CSS
Integration

In order to apply CSS properties on existing HTML tags, it is must to link CSS code with HTML. There are three ways to embed CSS file into HTML document.

Inline CSS

Inline style is applied to an individual tag. It modifies the attributes of a tag in the current occurrence of that tag. If the tag is used again, the default style of the tag will be used.

The attributes are given in the opening tag using <style>.

Example:
Copy Code 


<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
        <p style=”color: blue;”> PHPDocs</p>
    </body>
</html>

Internal CSS

An internal style sheet is inserted in the head section of a web page. It only affects the web page in which it is inserted. It is added in an HTML document using the <style> tag.

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <style type=”text/css”>
            H4{ color: green; }
            H5{ color: red; }
        </style>
    </head>
  
    <body>
        ...
    </body>
</html>

External CSS

An external style sheet is defined in a separate file stored with .css extension. It is very useful when the style is applied to many pages.

It is used to specify the style of an entire website in one file. An external style sheet file is then linked to the web page using the <link> tag. This <link> tag us written inside the head section.

Example:
Copy Code 


<!doctype html>  
<html>
    <head>
        <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
    </head>
  
    <body>
        ...
    </body>
</html>