CSS3 Tutorial: Styling The HTML Element

by Ridwan Fadilah, updated on May 19, 2020 CSS3 Tutorial: Styling The HTML Element

Another CSS3 tutorial on to learn about how to style the HTML element by using the CSS3

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. (www.w3.org)
The CSS is used to store the style of your web page. That can help you to set the style of your web view. 

In this tutorial, we'll try to learn about How to style the HTML elements by using the CSS3. CSS3 is the third generation of the CSS specification recommended by the W3C.


How to add CSS?

We can use a style sheet to styling the HTML elements. There are three ways of inserting a style sheet into the HTML document: 

  • External CSS
  • Internal CSS
  • Inline CSS

How to add CSS? See the example below.

    External CSS :

    Each HTML page must include a reference of the external style sheet. Place inside the <link> element contained in the <head> section of an HTML page.

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>

    </body>

    </html>

    Internal CSS :

    If you have a unique style, use an internal CSS that only used in one single HTML page. Place the internal CSS inside the <style> element within the <head> section.

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <title>Document</title>

    <style>
        body {
            background-color: aqua;
        }
    </style>
    </head>

    <body>

    </body>

    </html>

    Inline CSS :

    To use inline CSS, add a style attribute to the element. An inline CSS  only used in one HTML element.

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>
    </head>

    <body style="background-color: aqua;">

    </body>

    </html>

That's just a little definition and example of CSS use. Now, We'll start to style an HTML element by using the CSS. In this tutorial, we'll use the external CSS. An external CSS can make your page load faster.


CSS Colors

There's not too hard to change the colors of the HTML element within the CSS3 use. We could use the color names, or RGB, HEX, HSL, RGBA, HSLA values. 

Be sure you have known about the color code. If you want to learn more about the color code, you can learn it in the HTML 5 Tutorial: Color Codes.

We can set the background color, text color, or border color of the HTML elements by using the CSS.

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <section>
            <h1>Hello World</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita rerum nostrum, ratione sunt praesentium,
                numquam magnam alias eius iusto quam voluptate laudantium consequuntur repudiandae quasi autem quis et.
                Ratione
                assumenda nisi cum optio voluptate sint ullam soluta distinctio. Nulla dolorum illum obcaecati rem
                similique,
                asperiores itaque dolore quod possimus modi.</p>
        </section>
    </body>

    </html>

- CSS

    section {
        border: 2px solid tomato;
    }

    h1 {
        background-color: #e7e7e7;
    }

    p {
        color: dodgerblue;
    }


result :

CSS3 Tutorial: Styling The HTML Element -  Example 1


CSS Borders

The CSS allows you to add an element border.  By using the CSS borders, you can specify the style, width, and color for an element border.

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <p class="borders">Border on all sides</p>
        <p class="border-bottom">Red Border on bottom sides</p>
        <p class="border-left">Blue Border on left sides</p>
        <p class="rounded">Rounded Borders</p>
    </body>

    </html>

- CSS

    p.borders {
    border: 1px solid #000000;
    }

    p.border-bottom {
        border-bottom: 1px solid red;
    }

    p.border-left {
        border-left: 2px solid blue;
        background-color: lightgray;
    }

    p.rounded {
        border: 1px solid lightseagreen;
        border-radius: 5px;
    }

result :

CSS3 Tutorial: Styling The HTML Element - Example 2


The CSS has a border-style property to specify the border to display.

Here's the value that allowed by the CSS3 :

  • solid - solid border
  • dotted - dotted border
  • dashed - dashed border
  • double - double border
  • groove - 3D grooved border. 
  • ridge - 3D ridged border.
  • inset - 3D inset border.
  • outset -3D outset border.
  • none - no border
  • hidden - hidden border

Example :

    - HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <p class="solid">Solid Border</p>
        <p class="dotted">Dotted Border</p>
        <p class="dashed">Dashed Border</p>
        <p class="double">Double Border</p>
        <p class="groove">Groove Border</p>
        <p class="ridge">Ridge Border</p>
        <p class="inset">Inset Border</p>
        <p class="outset">Outset Border</p>
        <p class="none">None Border</p>
        <p class="hidden">Hidden Border</p>
    </body>

    </html>

- CSS

    p.solid {border-style: solid;}
    p.dotted {border-style: dotted;}
    p.dashed {border-style: dashed;}
    p.double {border-style: double;}
    p.groove {border-style: groove;}
    p.ridge {border-style: ridge;}
    p.inset {border-style: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}

result :

CSS3 Tutorial: Styling The HTML Element - Example 3


CSS Fonts

The font is probably the most basics property of the styling an HTML element. In CSS, you can set the font family, font style, or font size.
The font family of a text is set with the font-family property.

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <p class="monospace">This is monospace font</p>
    </body>

    </html>

- CSS

    p.monospace {font-family: "Lucida Console", Courier, monospace;}

result :

CSS3 Tutorial: Styling The HTML Element - Example 4

You can specify the style of the font by using the font-style property.

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <p class="monospace-italic">This is an italic monospace font.</p>
    </body>

    </html>

- CSS

    p.monospace-italic {
        font-family: "Lucida Console", Courier, monospace;
        font-style: italic;
    }

You can specify the font-size and the font-weight

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <p class="monospace thick">The font-weight example.</p>
        <p class="monospace size-32">The font-size example.</p>
    </body>

    </html>

- CSS

    p.monospace {font-family: "Lucida Console", Courier, monospace;}
    p.thick {font-weight: 600;}
    p.size-32 {font-size: 32px;}

result :

CSS3 Tutorial: Styling The HTML Element - Example  6


CSS Margins and Padding

You have full control to set the margins and padding of an element.
Use the margin properties to create a space around an element.
Use the padding to create a space around the content of an element.

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <p class="borders m-individual-sides">Margin example (Individual Sides)</p>
        <p class="borders p-individual-sides">Padding example (Individual Sides)</p>
        <p class="borders m-shorthand">Margin example - Shorthand Property (top: 80px, right: 100px, bottom: 150px, left:
            100px)</p>
        <p class="borders p-shorthand">Padding example - Shorthand Property (top: 80px, right: 100px, bottom: 50px, left:
            100px)</p>
    </body>

    </html>

- CSS

    /* CSS Margins */
    p.m-individual-sides {
        margin-top: 80px;
        margin-right: 100px;
        margin-bottom: 150px;
        margin-left: 100px;
    }

    p.m-shorthand {
        background-color: lightgray;
        margin: 80px 100px 150px 100px;
    }

    /* CSS Padding */
    p.p-individual-sides {
        padding-top: 80px;
        padding-right: 100px;
        padding-bottom: 50px;
        padding-left: 100px;
    }

    p.p-shorthand {
        background-color: lightgray;
        padding: 80px 100px 50px 100px;
    }

result :

CSS3 Tutorial: Styling The HTML Element - Example 7

Here's another example of shorthand properties :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <!-- two values -->
        <p class="borders m-two-values">Margin example - two values (top and bottom margins are 25px, right and left margins
            are 50px)</p>
        <p class="borders p-two-values">Padding example - two values (top and bottom padding are 25px, right and left
            padding are 50px)</p>

        <!-- one values -->
        <p class="borders m-one-values">Margin example - one values (all four margins are 50px)</p>
        <p class="borders p-one-values">Padding example - one values (all four padding are 50px)</p>
    </body>

    </html>

- CSS

    /* CSS Margins */
    p.m-two-values {
        color: #000000;
        background-color: tomato;
        margin: 25px 50px;
    }

    p.m-one-values {
        color: #000000;
        background-color: tomato;
        margin: 50px;
    }

    /* CSS Padding */
    p.p-two-values {
        color: #000000;
        background-color: tomato;
        padding: 25px 50px;
    }

    p.p-one-values {
        color: #000000;
        background-color: tomato;
        padding: 50px;
    }

result :

CSS3 Tutorial: Styling The HTML Element - Example 8


CSS Height and Width

Another of most CSS properties use for styling the HTML elements are height and width property.
The height and width properties are used to set the height and width of an element.

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <!-- CSS Height and Width -->
        <p class="borders w-100">This element has width 100%</p>
        <p class="borders hw-example">This element has a height of 100 pixels and a width of 500 pixels.</p>
    </body>

    </html>

- CSS

    p.w-100 {
        color: #000000;
        width: 100%;
    }

    p.hw-example {
        color: #000000;
        background-color: aliceblue;
        width: 500px;
        height: 100px;
    }

result :

CSS3 Tutorial: Styling The HTML Element - Example 9

You also set the max-width of an element by using the max-width property.

Example :

- HTML

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>

        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <!-- max width property -->
        <p class="borders mw-200">This element has a height of 100 pixels and a max-width of 200 pixels.</p>
    </body>

    </html>

- CSS

    p.mw-200 {
        color: #000000;
        background-color: aliceblue;
        max-width: 200px;
        height: 100px;
    }

result:

CSS3 Tutorial: Styling The HTML Element - Example  10

The height and width properties have some values that allowed to use.

Here are the values that can be used in CSS height and width property :

  • auto - This is the default. The browser calculates the height and width
  • length - Defines the height/width in px, cm, etc.
  • % - Defines the height/width in percent of the containing block
  • initial - Sets the height/width to its default value
  • inherit - The height/width will be inherited from its parent value


All of that you read is just a basic of the CSS3 use to styling the HTML elements. You can find another of the CSS3 tutorial in the next chapter. You can find the full source code of these examples on our GitHub.

That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:

Thank's!

Loading…