Quick Contact

    Style Sheet (CSS)

    A Style Sheet is a collection of style rules that that tells a browser how the various styles are to be applied to the HTML tags to present the document. Rules can be applied to all the basic HTML elements, for example the

    tag, or you can define you own variation and apply them where you wish to.

    Types of style sheet

    You can use CSS in three ways in your HTML document:

    • External Style Sheet
    • Internal Style Sheet
    • Inline Style Sheet
    External Style Sheet

    If you need to use your style sheet to various pages, then it’s always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.

    Example
    <!DOCTYPE html>
    <html>
       <head>
          <title>HTML External CSS</title>
          <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
       </head>
       <body>
          <p class = "red">This is red</p>
          <p class = "thick">This is thick</p>
          <p class = "green">This is green</p>
          <p class = "thick green">This is thick and green</p>
       </body>
    </html>
    
    Internal Style Sheet

    The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

    Example
    <!DOCTYPE html> 
    <html>
       <head> 
          <title>HTML Internal CSS</title> 
          <style type = "text/css"> 
             .red { 
                color: red; 
             } 
             .thick{ 
                font-size:20px; 
             } 
             .green { 
                color:green; 
             } 
          </style> 
       </head>
       <body> 
          <p class = "red">This is red</p>  
          <p class = "thick">This is thick</p>  
          <p class = "green">This is green</p>  
          <p class = "thick green">This is thick and green</p> 
       </body>
    </html>    
    
    Inline Style Sheet

    Inline style sheets is a term that refers to style sheet information being applied to the current element. By this, I mean that instead of defining the style once, then applying the style against all instances of an element (say the <p> tag), you only apply the style to the instance you want the style to apply to.

    Example
    <!DOCTYPE html> 
    <html>
       <head> 
          <title>HTML Inline CSS</title> 
       </head>
       <body> 
          <p style = "color:red;">This is red</p>  
          <p style = "font-size:20px;">This is thick</p>  
          <p style = "color:green;">This is green</p>  
          <p style = "color:green;font-size:20px;">This is thick and green</p> 
       </body>
    </html>
    
    About CSS Selectors

    In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine grained precision when selecting elements to style.

    Given below is a table which shows different selectors with its description

    Selector Example Example Description
    .class .intro Selects all elements with class=”intro”
    #id #firstname Selects the element with id=”firstname”
    * * Selects all elements
    element p Selects all <p> elements
    element, element div, p Selects all <div> elements and all <p> elements
    element element div p Selects all <p> elements inside <div> elements
    element>element div > p Selects all <p> elements where the parent is a <div> element
    ::after p::after Insert something after the content of each <p> element
    ::before p::before Insert something before the content of each <p> element

    Let us see some of the above selectors in detail.

    .class selector

    The .class selector selects elements with a specific class attribute.

    To select elements with a specific class, write a period (.) character, followed by the name of the class.

    Syntax
    .class {
        css declarations;
    }    
    
    Example

    Style all

    elements with class=”hometown”:

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                p.hometown {
                    background: yellow;
                }
            </style>
        </head>
        <body>
            <p>My name is Donald.</p>
            <p class="hometown">I live in Ducksburg.</p>
            <p>My name is Dolly.</p>
            <p class="hometown">I also live in Ducksburg.</p>
        </body>
    </html>
    
    #id selector

    The #id selector styles the element with the specified id.

    Syntax
    #id {
        css declarations;
    }    
    
    Example
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                #firstname {
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <h1>Welcome to My Homepage</h1>
            <div class="intro">
                <p id="firstname">My name is Donald.</p>
                <p id="hometown">I live in Duckburg.</p>
            </div>
            <p>My best friend is Mickey.</p>
        </body>
    </html>
    
    * selector

    The * selector selects all elements.

    The * selector can also select all elements inside another element.

    Syntax
    *{
        css declarations;
    }
    
    Example
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                div * {
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <h1>Welcome to My Homepage</h1>
            <div class="intro">
                <p id="firstname">My name is Donald.</p>
                <p id="hometown">I live in Duckburg.</p>
            </div>
            <p>My best friend is Mickey.</p>
        </body>
    </html>
    
    Element selector

    The element selector selects all elements with the specified element name.

    Syntax
    element {
        css declarations;
    }
    
    Example
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                p {
                    background-color: yellow;
                }
            </style>
        </head>
        <body>
            <h1>Welcome to My Homepage</h1>
            <div>
                <p id="firstname">My name is Donald.</p>
                <p id="hometown">I live in Duckburg.</p>
            </div>
            <p>My best friend is Mickey.</p>
        </body>
    </html>
    
    Types of properties

    CSS properties is used to change the look and feel of your web pages. Given below are different categories of CSS properties with functionality.

    Background Properties
    Property Description
    background Defines a variety of background properties within one declaration.
    background-attachment Specify whether the background image is fixed in the viewport or scrolls.
    background-color Defines an element’s background color.
    background-image Defines an element’s background image.
    background-position Defines the origin of a background image.
    background-repeat Specify whether/how the background image is tiled.
    background-size Specifies the size of the background images.
    Border Properties
    Property Description
    border Sets the width, style, and color for all four sides of an element’s border.
    border-bottom Sets the width, style, and color of the bottom border of an element.
    border-color Sets the color of the border on all the four sides of an element.
    border-image Specifies how an image is to be used in place of the border styles.
    border-width Sets the width of the border on all the four sides of an element.
    Color Properties
    Property Description
    color Specify the color of the text of an element.
    opacity Specifies the transparency of an element.
    Dimension Properties
    Property Description
    height Specify the height of an element.
    max-height Specify the maximum height of an element.
    max-width Specify the maximum width of an element.
    min-height Specify the minimum height of an element.
    min-width Specify the minimum width of an element.
    width Specify the width of an element.
    Font Properties
    Property Description
    font Defines a variety of font properties within one declaration.
    font-family Defines a list of fonts for element.
    font-size Defines the font size for the text.
    font-style Defines the font style for the text.
    font-variant Specify the font variant.
    font-weight Specify the font weight of the text.
    List Properties
    Property Description
    list-style Defines the display style for a list and list elements.
    list-style-type Specifies the marker style for a list-item.
    Margin Properties
    Property Description
    margin Sets the margin on all four sides of the element.
    margin-bottom Sets the bottom margin of the element.
    margin-left Sets the left margin of the element.
    margin-right Sets the right margin of the element.
    margin-top Sets the top margin of the element.
    Padding Properties
    Property Description
    padding Sets the padding on all four sides of the element.
    padding-bottom Sets the padding to the bottom side of an element.
    padding-left Sets the padding to the left side of an element.
    padding-right Sets the padding to the right side of an element.
    padding-top Sets the padding to the top side of an element.
    About CSS properties

    Let’s discuss some of the CSS properties in detail.

    Background Properties

    The CSS provide several properties for styling the background of an element, such as background-color, background-image, background-repeat, background-attachment and background-position.

    The following section will describe you how to use these properties to set the different styles for the backgrounds one by one.

    Background Color

    The background-color property is used to set the background color of an element.

    The example below demonstrates, how to set the background color of a web page.

    Example
    body {
        background-color: #f0e68c;
    }
    
    Background Image

    The background-image property set an image as a background of an HTML element.

    See the example below which demonstrates how to set the background image for a page.

    Example
    body {
        background-image: url("leaf.jpg");
    }
    
    Background Repeat

    By default the background-image property repeats an image both horizontally and vertically.

    By using background-repeat property you can control how a background image is tiled in the background of an html element. You can set a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.

    See the example below which demonstrates how to set the gradient background for a web page by repeating the sliced image horizontally.

    Example
    body {
        background-image: url("gradient.png");
        background-repeat: repeat-x;
    }
    
    Background Attachment

    The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block.

    Example
    body {
        width: 250px;
        height: 200px;
        overflow: scroll;
        background-image: url("recycle.jpg");
        background-attachment: fixed;
    }
    
    Background Position

    The background-position property is used to control the position of the background image.

    If no background-position has been specified, the image is placed at the default top-left position of the element i.e. at (0,0). See the example below:

    Example
    body {
        background-image: url("tree.png");
        background-repeat: no-repeat;
    }
    

    In the following example, the background image is positioned at top-right corner and the position of the image is specified by the background-position property.

    body {
        background-image: url("tree.png");
        background-repeat: no-repeat;
        background-position: 100% top;
    }
    
    Box Properties

    The box-sizing CSS property defines how the user should calculate the total width and height of an element.

    The actual space that an element’s box might take is calculated like this:

    Box Size CSS Properties
    Total Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
    Total Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

    Here is the same example below, with box-sizing: border-box; added to both <div> elements:

    Example
    .div1 {
        width: 300px;
        height: 100px;
        border: 1px solid blue;
        box-sizing: border-box;
    }
    
    .div2 {
        width: 300px;
        height: 100px;
        padding: 50px;
        border: 1px solid red;
        box-sizing: border-box;
    }
    
    Border Properties

    The CSS border properties allow you to define the border area of a box. The border can either be a predefined style like, solid line, double line, dotted line, etc. or it can be an image. The following section will describe you how to set the various properties defining the style (border-style), color (border-color), and thickness (border-width) of the border.

    The border-width Property

    The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.

    Example
    p {
        border-width: medium 10px thick 15px;
    }
    

    Note: If the value for the border-width property is missing or not specified, the default value (medium) of the border-width will be used instead.

    The border-style Property

    The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.

    The border-style property may take one of the following values: none, hidden, dashed, dotted, double, groove, inset, outset, ridge and solid.

    none: Defines no border
    hidden: Defines hidden border.
    dotted: Defines a dotted border
    dashed: Defines a dashed border
    solid: Defines a solid border
    double: Defines two borders. The width of the two borders are same as the border-width value
    groove: Defines a 3D grooved border. The effect depends on the border-color value
    ridge: Defines a 3D ridged border. The effect depends on the border-color value
    inset: Defines a 3D inset border. The effect depends on the border-color value
    outset: Defines a 3D outset border. The effect depends on the border-color value
    Example
    p {
        border-style: dotted;
    }
    
    The border-color Property

    The border-color property specify the color of a box’s border. This is also a shorthand property for setting the color of all the four sides of an element’s border.

    Example
    p {
        border-style: solid;
        border-color: #ff0000;
    }
    

    Note: The border-color property does not work if it is used alone. Use the border-style property to set the border first.

    The border Shorthand Property

    The border CSS property is a shorthand property for setting one or more of the individual border properties border-style, border-width and border-color in a single rule.

    Example
    p {
        border: 5px solid #ff4500;
    }
    

    If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.

    Note: If the value for the border-color property is missing or not specified when setting the borders for an element (e.g. border: 5px solid;) the element’s color property will be used as the value for the border-color.

    In this example, the border will be a solid black line of 5px width:

    p {
        color: black;
        border: 5px solid;
    }
    

    But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for border-style property is none.

    In the example below, there will be no border:

    p {
        border: 5px #00ff00;
    }
    
    Positioning Properties

    The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). The following section will describe you these positioning methods one by one.

    Static Positioning

    A static positioned element is always positioned according to the normal flow of the page. HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, right, and z-index properties.

    Example
    .box {
        padding: 20px;
        background: #7dc765;
    }
    
    Relative Positioning

    A relative positioned element is positioned relative to its normal position.

    In the relative positioning scheme the element’s box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the properties — top or bottom and/or left or right.

    Example
    .box {
        position: relative;
        left: 100px;
    }
    

    Note: A relatively positioned element can be moved and overlap other elements, but it keeps the space originally reserved for it in the normal flow.

    Absolute Positioning

    An absolutely positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the ‘top-left’ corner of the browser window. The box’s offsets further can be specified using one or more of the properties top, right, bottom, and left.

    Absolutely positioned elements are taken out of the normal flow entirely and thus take up no space when placing sibling elements. However, it can overlap other elements depending on the z-index property value. Also, an absolutely positioned element can have margins, and they do not collapse with any other margins.

    Example
    .box {
        position: absolute;
        top: 200px;
        left: 100px;
    }
    
    Fixed Positioning

    Fixed positioning is a subcategory of absolute positioning.

    The only difference is, a fixed positioned element is fixed with respect to the browser’s viewport and does not move when scrolled.

    Example
    .box {
        position: fixed;
        top: 200px;
        left: 100px;
    }
    

    Note: In case of the print media type, the fixed positioned element is rendered on every page, and is fixed with respect to the page box (even in print-preview). IE7 and IE8 support the fixed value only if a <!DOCTYPE> is specified.

    Summary
    • A Style Sheet is a collection of style rules that that tells a browser how the various styles are to be applied to the HTML tags to present the document.
    • The CSS are divided into following three categories
      • External Style Sheet
      • Internal Style Sheet
      • Inline Style Sheet
    • In CSS, selectors are patterns used to select the element(s) you want to style.
    • CSS properties are used to change the look and feel of your web page.
    • In this chapter, we have gone through the following CSS properties in detail:
      • Background Properties
      • Box Properties
      • Border Properties
      • Positioning Properties

    Copyright 1999- Ducat Creative, All rights reserved.