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.
AttributeDescription
typetext/ css
relstylesheet
hrefURL 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;}
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +