HTML

CSS - Cascading Style Sheet is used to apply styles for HTML elements.

Cascading Style Sheet for HTML


CSS changes the visual properties of HTML elements.

CSS can be applied in three ways inline css, internal css, and external css.

inline CSS overwrites internal CSS and external CSS if applied at the same time.

internal CSS overwrites external CSS if applied at the same time.

For priority: inline CSS > internal CSS > external CSS.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Inline CSS

Copy each file contents and paste it to your project, run and see the final output when everything is OK.

Example

<!DOCTYPE html>
<html>
<!-- Example: Inline CSS -->
<head>
    <title>Inline CSS Example</title>
</head>
<body>
    <p>Inline CSS Example</p>
    <h1 style="color: #fff;background-color: #505050;font-style:italic;">Hello World.</h1>
    <h2 style="color: white;background-color: #707070;font-style:italic;">Hello HTML.</h2>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


Internal CSS

Copy each file contents and paste it to your project, run and see the final output when everything is OK.

Example

<!DOCTYPE html>
<html>
<!-- Example: Internal CSS -->
<head>
    <title>Internal CSS Example</title>
    <style>
        .c1{
            color: white;
            background-color: #606060;
            font-style:italic;
            padding:10px;
        }
        .c2{
            color: white;
            background-color: #404040;
            padding:20px;
        }        
    </style>    
</head>
<body>
    <p>Internal CSS Example</p>
    <h2 class="c1">Hello World.</h2>
    <p class="c2">Hello HTML.</p>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.


External CSS

Copy each file contents and paste it to your project, run and see the final output when everything is OK.

Example

<!DOCTYPE html>
<html>
<!-- Example: External CSS -->
<head>
    <title>External CSS Example</title>
    <link href="externalstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <h2>External CSS Example</h2>
    <p class="c1">Hello HTML.</p>
    <p class="c2">Hello w3context</p>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.