Page 172 - DCAP202_Fundamentals of Web Programming
P. 172
Unit 14: DHTML
14.4 External Style Sheets Notes
An external style sheet is a separate file where you can declare all the styles that you want to use
on your website. You then link to the external style sheet from all your HTML pages. This means
you only need to set the styles for each element once.
!
Caution If you want to update the style of your website, you only need to do it in one place.
Example:
Type the following into a plain text file, and save with a .css extension (i.e.
external_style_sheet.css).
p {font-family: georgia, serif; font-size: x-small;}
hr {color: #000000; height: 1px }
a:hover {color: #ff0000; text-decoration: none}
Add the following code between the <head></head> tags of all HTML documents
that you want to reference the external style sheet. This code uses the HTML <link>
element to link to the external style sheet.
<link rel=StyleSheet href=”external_style_sheet.css” type=”text/
css”>
Now, all of your HTML documents will use the styles from your external style sheet
resulting in a consistent look and feel. If you want to change anything, you only
need to update the external style sheet.
14.4.1 Using <SPAN> ... </SPAN> Tag
The SPAN element has very similar properties to the DIV element, in that it changes the style of
the text it encloses. But without any style attributes, the SPAN element won’t change the enclosed
items at all.
The primary difference between the SPAN and DIV elements is that SPAN doesn’t do any
formatting of it’s own. The DIV element includes a paragraph break. The SPAN element simply
tells the browser to apply the style rules to whatever is within the SPAN.
To use the SPAN element, simply surround the text that you want to add styles to with the
<span> and </span> tags:
<div id=”mydiv”>
<p><span class=”highlight”>Highlighted text</span> and non-highlighted text.</
p>
</div>
The SPAN element has no required attributes, but the three that are the most useful are the same
as for the DIV element:
style
class
id
Use SPAN when you want to change the style of elements without placing them in a new block-
level element in the document.
LOVELY PROFESSIONAL UNIVERSITY 165
