CSS

-

  Need of CSS-HTML was originally designed as a simple way of presenting information, the presentation of your content shows the success of your site. Cascading Stylesheet is the key presentational technology that is used to design websites in an attractive manner.

Websites: A webpage is a digital document that is available on a world wide web through internet and can be viewed over a web browser. A group of webpages can be composed and linked together to make a website. These websites can be classified as:

  1. Static websites
  2. Dynamic websites
In static website, webpage contains information that is same or static for user who view the site. The information does not change.
In dynamic website, web page contains information that keeps on changing as per the user's requirement. For example, online shopping sites that keep updating and displaying items as per the user's need is an example of dynamic website.

DHTML(Dynamic HTML): DHTML makes every element of a page interactive before, during and even after the page displayed. DHTML is combination of HTML with other web technologies like CSS, Javascript, DOM(Document Object Model) for creating interactive and animated websites.
  • The HTML used to present documents.
  • Cascading Stylesheets(CSS) is used to define a style for multiple objects and their position on the page.
  • The DOM is used for making a hierarchy of objects to facilitate their manipulation.
  • JavaScript is used for interactively controlling the elements.
Cascading Stylesheets(CSS):
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
You can add stylesheet to a webpage in the following 3 ways:
  1. Inline stylesheet: An inline Style may be used to apply a unique style for a single element. To use inline style, add the style attribute to the relevant element.
            Example:
<html>
    <body>
        <h1 style="color:blue;text-align:center;">This is heading one.</h1>
        <p style="color:red;">This is paragraph</p>
    </body>
</html>
output:
    2.Internal stylesheet: An internal style sheet may be used if one single HTML page has a unique style. The internal  style is defined inside the <style>element, inside the head section.
Example:
<html>
    <head>
        <style>
            body{
                background-color:linen;
            }
            h1{
                margin-left:50px;
            }
            p{
                margin-left:55px;
                color:darkblue;
            }
        </style>
    </head>
    <body>
        <h1>HyperText Markup Language</h1>
        <p>HyperText Markup Language is used to make a web document.
            A web document is accessible on the internet</p>
    </body>
</html>
Output:


External Stylesheet: With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> tag, inside the head section. An external style sheet can be written in any text editor, and must be saved with a .css extension. The external .css file should not contain any HTML tags. 
Syntax:


Example:
<html>
    <head>
        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
        <h1>Cascading style sheet is used to style the web page.</h1>
    </body>
</html>
Output:
Here is how the "mystyle.css" file looks:
h1{
    color:yellow;
    margin-top:250px;
    text-align: center;
}
body{
    background-color: blue;
}
CSS Comment: CSS comment are generally written to explain your code. It is very helpful for the users who reads your code so that they can easily understand the code.
Comments are line line or multiple line statements and written with /*..............*/

CSS Properties:All CSS properties have values. Different properties have different value syntaxes. Some properties are 
  1. Background Properties- Some background properties are background-attachment, background-color, background-image, background-repeat and background-size.
  2. Border Properties-border, border-color, border-top, border-bottom, border-right and border-left.
  3. Color Properties- color and opacity(opacity means transparency)
  4. Font Properties-font, font-size, font-family, and font-style.
  5. Margin Properties- margin-bottom, margin-top, margin-left and margin-right.
  6. Outline Properties- outline, outline-color, outline-offset, outline-width.
  7. Padding Properties-padding, padding-bottom, padding-left, padding-right and padding-top.
  8. Table Properties- border-collapse, border-spacing, caption side, table-layout.
  9. Text Properties- text-align, text-justify, text-shadow, text-transform, line-height, letter-spacing and word-wrap.
CSS Float:CSS float property that forces any element to float (right, left,none, inherit) inside its parent body with the rest of the element to wrap around it. This property can be used to place an image or an element inside its container and other inline elements will wrap around it.
Example:
<html>
    <head>
        <link rel="stylesheet" href="floatstyle.css">
    </head>
    <body>
        <p>The result is that the image will float to the left
            in the paragraph.
        </p>
        <img src="dog.jpg" alt="log image">
        <p>the image is of a dog who speaks English</p>
    </body>
</html>
output:
CSS file:
img{
    float:left;
    width:200px;
    height:200px;
}

Comments

Post a Comment