External Style Sheet
External Style Sheet
Empowering Today’s Learners to Become Tomorrow’s Leaders
An external style sheet is an external text file with the extension .css.
/* CSS Document */
body {
margin: 0px;
padding: 0px;
background-color: #FFFFCC;
color: #000000;
}
h2 {
color:blue;
}
p {
font-family: Arial, Helvetica, sans-serif;
color:green;
}
The external style sheet is linked to the HTML by the link element. The link tag is placed in the head element of the HTML. The link element is not a block element and does not require a closing tag. It does not contain any content.
The / within the tag acts as the closer.
<element attribute=" value" attribute="value" />
<link href="stylefolder/stylefile.css" rel="stylesheet" />
link is the HTML element
href is the attribute of the HTML element
stylefile.css is the name of the external css file (notice that the folder path is also included)
rel tells the browser what type of file it is
In Notepad, open a new file.
Add the following code
/* CSS Document */
body {
margin: 0 auto;
background-color: #FFFFCC;
color: #000000;
padding: 0 20px 20px 20px;
border: 5px solid black;
width: 600px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color:blue;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color:red;
font-family: Arial, Helvetica, sans-serif;
}
p, li {
font-family: Arial, Helvetica, sans-serif;
color:green;
}
3. Save as styles.css in the prostyles folder (inside the procedures folder)
Remember to add .css as the extension of the file
4. Open index.html
5. Link to external style sheet in the head element using the following markup:
<link href="prostyles/styles.css" rel="stylesheet" type="text/css" />
6. Add a h2 element above the <h3> Some Mail Links: </h3> element of index.html .
<h2>This is a h2 heading. It should be blue. It's presentation is controlled by the external css. </h2>
7. Add a p element below <h2>This is a h2 heading. It should be blue. It's presentation is controlled by the external css. </h2>
element. we added in step 6.
<p>This is a green pargragh. It's presentation is controlled by the external css.</p>
<p>All paragraphs will be controlled by the external css except for the paragraph that have inline styles. The inline style will trump the external style.</p>
<p>This is an example of the Cascade effect</p>
8. Save and preview your web page in a browser.
Read the content.