Add CSS

Inline Styles

Inline Styles are defined within the HTML markup of a particular page element.

The Style attribute can be added to almost any html element included in the <body>..</body> element of a web page.

style = "font-style:italic; color: #efefef;"

snippet

<html>
<head>
    <style>
        <h2 style="font-style:italic; color: #efefef;">This is a Title</h2>
        <div style="font-style: underline">Get beautiful inspiring quotes from Quotefells.com </div>
        <div style="color: red;"> Hard work beats talent when talent doesn't work hard.</div>
    </style>
</head>
</html>

Internal Styles

Internal Styles are defined in the <head> section of the "current" web page.

To define a style and apply it to many elements that belong to a web page, use a style sheet. The style can be placed inside the <style>..</style> element. Place the style sheet rules inside a <style>..</style> element and insert that element inside the <head>..</head> section of the web page. Add the "type" attribute of the <style> element. Set the type attribute value to "text/css"(the default value). For modern browsers no need to set the type attribute as it defaults to "text/css"

<html>
<head>
    <style>
        <!--
        	Style sheet rules
        -->
    </style>
</head>
</html>

snippet

<html>
<head>
    <style>
        a {font-style: underline;}
        p {style="color: red;}
        h2 {font-style:italic; color: #efefef;}
    </style>
</head>
<body>
    <h2>This is a Title</h2>
    <a href="http://quotefellas.com">Get beautiful inspiring quotes from Quotefells.com </a>
    <p> Hard work beats talent when talent doesn't work hard.</p>
</body>
</html>

External-Style Sheets

External Styles are defined on the External Style Sheet, which is linked to the web page(s).

To create a link between a web page and an external style sheet, place a <link> element inside the <head>..</head> element of that web page. Three attributes of the <link> element are required.

Attribute	Description
`type`	text/ css
`rel`	stylesheet
`href`	URL of the external style sheet

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

For example create an html page home.html and add the styles for the html elements in a separate css stylesheet file style.css

snippet

<html>
<head>
    <style>
        a {font-style: underline;}
        p {style="color: red;}
        h2 {font-style:italic; color: #efefef;}
    </style>
</head>
<body>
    <h2>This is a Title</h2>
    <a href="http://quotefellas.com">Get beautiful inspiring quotes from Quotefells.com </a>
    <p> Hard work beats talent when talent doesn't work hard.</p>
</body>
</html>

style.css

snippet

body {padding: 20px;}
a {font-style: underline;}
p {color: red;}
h2 {font-style:italic; color: #efefef;}

Cascading of styles

We can add multiple styles to apply simultaneously to an element. We can even add in-line styles, the styles defined inside the document and the external style sheet. CSS defines the priority of rules that determine which style to apply to the element.

If an inline style exists for that element, the inline style is applied.
If the inline style doesnt exist for that element, the styles defined inside of the document of the element are applied.
If a style defined inside of the document doesnt exist for the element, the styles defined in external style sheet are applied.
If a style define in external style sheets doesnt exists for that element, the default html styles are applied.

style.css

body {padding: 20px;
h3 {font-style:italic; color: #efefef;}

snippet

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <h1 style="font-style:uppercase">Title with Inline Style</h1>
    <h2>Title with Inside document style</h2>
    <h3>Title with External Style Sheet style</h3>
    <h4>Default HTML style</h4>
</body>
</html>