More Style
Concepts
Once you understand that style sheets help you separate the contents of an HTML page from a specification of how it should look in a browser, you can discover more ways to put them to use.
Use the SPAN Element to Affect a Portion of Content
You can use style sheets to alter the appearance of HTML elements. For example, the elements P, UL, or BLOCKQUOTE.
But what if you want to alter the appearance of just a portion of the sentences or words of a paragraph? You can put the SPAN element inside the P element to affect how a portion of the contents look.
For example, like this:
| A CSS file "mystyle.css" contains this | An HTML file "highlights.html" contains this | Displayed in a Web browser, highlights.html looks something like this: |
|---|---|---|
| SPAN.highlighter {background-color: #FFFF99;} |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE> Style Sheet Demonstration </TITLE> <LINK rel="stylesheet" href="mystyle.css" type="text/css"> </HEAD> <BODY> <P> But what if you want to alter the appearance of <SPAN class="highlighter">just a portion of the sentences or words</SPAN> of a paragraph? You can put the <SPAN class="highlighter">SPAN element inside the P element</SPAN> to affect how a portion of the contents look. </P> </BODY> </HTML> |
But what if you want to alter the appearance of just a portion of the sentences or words of a paragraph? You can put the SPAN element inside the P element to affect how a portion of the contents look. |
Use the DIV Element to Affect Many Elements
If you want to affect the appearance of a group of elements, you can put these into a DIV element. For example,
| A CSS file "adstyle.css" contains this | An HTML file "mycopy.html" contains this | Displayed in a Web browser, mycopy.html looks something like this: |
|---|---|---|
|
DIV.ad { color: black; background-color: #FFFFCC; border-color: #336699; font-family: tahoma, verdana, sans-serif; margin-left: 5%; margin-right: 5%; padding: 0pt; text-align: center; border: 1pt; border-style: solid; } |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE> Style Sheet Demonstration </TITLE> <LINK rel="stylesheet" href="adstyle.css" type="text/css"> </HEAD> <BODY> <DIV class="ad"> <P> Shop <A Href = "https://johndecember.com/market/"> the Market</A> <P> <A Href = "https://www.amazon.com/">Buy Books and more at Amazon.com</A> </DIV> </BODY> </HTML> |
Look at An Application of Style Sheets
Style sheets are a powerful way to set the layout of an online publication like a newsletter or magazine. Check out this demonstration of style sheets that shows how a mock newsletter can be quickly and easily "dressed up" using some very simple style sheets.
More Style Sheet Issues
The potential ways style sheets can be used in Web documents is mind boggling.
Besides the method of using the LINK element in the HEAD of a document, you can also embed a style sheet right in an HTML document itself. You can do this by putting the style specifiations in a STYLE element that goes in the HEAD of the document. While this might be a good technique for special cases, it detracts from the value of creating separate files for the style and HTML. If you use embedded style, you'll have to change the HTML document in order to change the style, and you won't be able to share style specifications among documents.
Both the link and embedded method of style sheets involve style specifications that come from the author or authors of a set of Web documents.
But authors are not the only possible source of style information. It is possible for the user's browser to have an associated style sheet, and it is even possible for a user to create their own style sheet to display the HTML documents that they view.
The merging of all these potential sources for style takes place during what is called a "cascade." The specifications for CSS detail how this cascading works and the precedence rules for which style specification will be visible in the user's browser.
Learning More
The current style sheet specifications represent a degree of detail that requires a specialist to understand completely.
But if you are a casual user, remember that simple style sheets can do powerful things. Seek out examples of what kinds of visual appearance you would like in your Web pages.
You can keep up with style sheet technologies at the W3C.
Exercise: Create Your Own Publication
Start with a Web page that contains text, headers, lists, and many other HTML elements. Create a style sheet to create a look and feel that will appeal to its audience.