What are styles and CSS?
In an effort to separate structural markup and data from user interface design, today's Web Development Standards suggest that we use styles and style sheets in our Web development efforts. Style sheets and cascading style sheets (CSS) (Content type: text/css) are documents that define the visual preferences for markup, and how such markup should be formatted when viewed via specific clients or at various media states. These pages are written in a language commonly referred to as CSS.
To properly understand how Styles effect the visual formatting of our markup, we must first understand how our standard non-styled markup renders in a Web browser client. For example, let us look at a non-styled <span> element is rendered in a Web Browser client.
<\!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<p>Hello <span>world</span>!</p>
</body>
</html>
A <span> element is designed to act as an inline content container and has no inherent visual element enhancers. With styles however, we can expand the visual element. For this example, we change the color of the <span> element by using the style attribute of the element.
<\!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<p>Hello <span style="color: red;">world</span>!</p>
</body>
</html>
The utilization of inline style attributes does not truly separate data content from the visual rendering, which is the main reason that we are looking at using styles in our development practices. Therefore, let us expand on the element styling capabilities and review the <style> tag.
<\!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
span { color: red; }
</style>
</head>
<body>
<p>Hello <span>world</span>!</p>
</body>
</html>
While we can see no change in the rendered end result in the Web browser client, by adding the <style> element to the <head> element of our example Web page, we have set that any <span> element content will be in the color red, thus successfully separating content from the visual user interface.
Element, ID, and class assignments
In the above example, the <style> element declaration for <span> element styling would impact all <span> elements in the Web page. In this section, we discuss how we can pinpoint the styling of elements via element, named ID, and named class assignments.
Style selectors
A style selector is a named element, element ID, or element class that a style sheet can use in the maintenance of specific style properties. Selectors may contain both general properties and properties specific to their given element capabilities.
| Selector |
Selector usage examples |
| Named Element |
span { color: red; }
div { color: blue; }
p { color: green; } |
| Element ID |
#ID1 { background-color: silver; }
#ID2 { background-color: white; }
#ID3 { background-color: black; } |
| Element Class |
.section1 { border: 1px solid red; }
.section2 { border: 1px solid blue; }
.section3 { border: 1px solid green; } |
If we take these selector examples and create a simple XHTML page that leverages said examples (see the following code example and figure), you can see how named element, element ID, and element class selectors can be used to provide visual formatting to your markup content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Style Sheet Selector Examples</title>
<style>
span { color: red; }
div { color: blue; }
p { color: green; }
#ID1 { background-color: silver; }
#ID2 { background-color: white; }
#ID3 { background-color: black; }
.section1 { border: 1px solid red; }
.section2 { border: 1px solid blue; }
.section3 { border: 1px solid green; }
</style>
</head>
<body>
<div id="ID1" class="section1">
<div>Example DIV content.</div>
<span>Example SPAN content.</span>
<p>Example P content.</p>
</div>
<div id="ID2" class="section2">
<div>Example DIV content.</div>
<span>Example SPAN content.</span>
<p>Example P content.</p>
</div>
<div id="ID3" class="section3">
<div>Example DIV content.</div>
<span>Example SPAN content.</span>
<p>Example P content.</p>
</div>
</body>
</html>
Advanced selectors
The usage of style selectors can give you complete control over the visual representation of every markup element, one you have made a conscience effort to architect our markup to best facilitate more advanced usage of selectors. To do this, we must first understand the more advanced capabilities of selectors.
Nested selectors
In CSS, we have the ability to create nested selectors. A nested selector is a CSS declaration that uses a combination of named elements, element IDs, and/or element class names to traverse the markup to affect specific target markup elements. The following simple example shows _nested selectors_, and their impact on the target markup element.
div#content div.section p {
font-weight: normal;
margin: 0px;
padding: 0px;
color: red;
}
The above CSS is designed to only affect the paragraph (<p>) tag element that is located in the DIV (<div>) tag element with a Class Name of section which is located in the DIV (<div>) tag element with an ID of content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nested Selector Example</title>
<style>
div#content div.section p {
font-weight: normal;
margin: 0px;
padding: 0px;
color: red;
}
</style>
</head>
<body>
<div id="header">
<div class="section">
<p>This content should <strong>not</strong> be modified.</p>
</div>
</div>
<div id="content">
<div class="section">
<p>This content should be modified.</p>
</div>
</div>
<div id="footer">
<div class="section">
<p>This content should <strong>not</strong> be modified.</p>
</div>
</div>
</body>
</html>
Without CSS style
With applied CSS style
By using named elements, element IDs, element class names, and CSS nested selectors, developers can both architect their solution in compliance with current Web standards primer and move toward giving their applications Web 2.0-class functionality.
Using media types
What are CSS media types
With CSS media types, you can specify which particular style sheet to apply to your markup based on the given access medium. The following table outlines the different media types and examples of their usage mediums.
| Media type |
Description |
| all |
Global/all media types and devices |
| aural |
Sound and speech synthesizers |
| braille |
Braille tactile feedback devices |
| embossed |
Braille printer media |
| handheld |
Mobile/handheld devices |
| print |
Printed medium |
| projection |
Projected media and devices |
| screen |
Computer-specific media (ie., Web browser client) |
| tty |
Designed for fixed-pitch character grid media (ie., teletypes and terminals) |
| tv |
Television-type devices |
By understanding and properly using media types in both your markup architecture and your CSS design, you can completely control how the content of your Web pages is displayed across any media type.
Using CSS media types
There are currently two ways to use CSS media types: @Import/@Media rules or the media attribute of the <link> element.
The @Import rule
The following code showcases the proper usage schema for using CSS via the @Import rule.
@import url("example.css") screen;
The @Media rule
The following code showcases the proper usage schema for using CSS via the @Media rule.
@media screen {
body { font-size: 10pt }
}
The <link> element media attribute
The following code showcases the proper usage schema for using CSS via the media attribute of the <link> element.
<link rel="stylesheet" type="text/css" media="screen" href="example.css">
Style sheets versus inline style declarations
As was mentioned in the What are Styles and CSS? section, utilizing an inline style declaration does not separate the data content of a Web page from its design. This is bad for a number of reasons that are covered in detail in the Web standards primer primer, but chief among them is the impact on maintenance.
As a simple example, the following markup example uses inline style declarations to give an HTML table alternating row colors. The background color of the alternating rows is specified inside, or inline, of the HTML markup.
<table width="200" border="1">
<tr style="background-color: #CCE5FF">
<td>row 1 column 1</td>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
<td>row 2 column 3</td>
</tr>
<tr style="background-color: #CCE5FF">
<td>row 3 column 1</td>
<td>row 3 column 2</td>
<td>row 3 column 3</td>
</tr>
<tr>
<td>row 4 column 1</td>
<td>row 4 column 2</td>
<td>row 4 column 1</td>
</tr>
<tr style="background-color: #CCE5FF">
<td>row 5 column 1</td>
<td>row 5 column 2</td>
<td>row 5 column 3</td>
</tr>
</table>
If the alternating row color must be changed from blue to yellow, it requires editing the page in three places. In an example like this, such a task is easily accomplished. If this table was larger or there were inline styles for each <td> tag that needed to be modified, the updates would become significantly more cumbersome.
Again, as was demonstrated in the What are Styles and CSS? section, we can simplify the maintenance of this page by assigning the alternating rows of the table a class and creating an embedded style sheet in the head of the HTML document using the <style> tag. Inside the embedded style sheet, we can create a selector for the class assigned to the alternate table rows and set the background-color property of the selector to the desired color. If the color of the alternate table rows needs to be modified at some point in the future, the change now only needs to be made inside the embedded style sheet rather than to each table row.
...
<style type="text/css">
.alternateTableRow {
background-color: #FFFF99;
}
</style>
...
<table width="200" border="1">
<tr class="alternateTableRow">
<td>row 1 column 1</td>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
<td>row 2 column 3</td>
</tr>
<tr class="alternateTableRow">
<td>row 3 column 1</td>
<td>row 3 column 2</td>
<td>row 3 column 3</td>
</tr>
<tr>
<td>row 4 column 1</td>
<td>row 4 column 2</td>
<td>row 4 column 1</td>
</tr>
<tr class="alternateTableRow">
<td>row 5 column 1</td>
<td>row 5 column 2</td>
<td>row 5 column 3</td>
</tr>
</table>
What if there are several pages in a Web site and each of them contains a table that should be styled consistently? We can take this example a step further and move the embedded style sheet to an external file. Separating HTML documents and style sheets has several benefits:
- External style sheets can be used across multiple Web pages.
- The styles can be updated without editing the HTML documents that import or link to them.
- Style sheets can be loaded based on the media type used to view the page.
Moving an embedded style sheet to an external file is as simple as cutting and pasting the content between the <style> tags into a new text document and saving it with a .css extension. The HTML document can then link to the style sheet by replacing the <style> tag with a <link> tag that specifies the path to the style sheet.
<link href="mystyle.css" rel="stylesheet" type="text/css">
By using external style sheets and semantic HTML, you can greatly simply the maintenance of your Web pages in the following ways:
- Making HTML documents more concise and easier to read
- Consolidating all the styling and presentation of the HTML in one place for easier editing
- Allowing you to use the same style sheets across multiple HTML documents
Combining CSS, advanced selectors, and media types
In this section, we review a simple example that showcases the combination of CSS, advanced selectors, and media types to facilitate functional web development. The following example shows the simple non-styled Web browser client rendering example XHTML page and markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS, Advanced Selectors, and Media Type Example</title>
</head>
<body>
<div id="maincontainer">
<div id="header" class="layoutsection">
<h1>Example Header</h1>
<ul id="menu_header">
<li class="menuitem" id="menu_header_item1"><a href="#" id="menu_header_link1" class="active">Link 1</a></li>
<li class="menuitem" id="menu_header_item2"><a href="#" id="menu_header_link2">Link 2</a></li>
<li class="menuitem" id="menu_header_item3"><a href="#" id="menu_header_link3">Link 3</a></li>
<li class="menuitem" id="menu_header_item4"><a href="#" id="menu_header_link4" >Link 4</a></li>
<li class="menuitem" id="menu_header_item5"><a href="#" id="menu_header_link5" >Link 5</a></li>
</ul>
</div>
<div id="body" class="layoutsection">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<table id="bodycontent" class="content">
<thead>
<tr class="odd">
<td class="col0">Header C 1</td>
<td class="col1">Header C 2</td>
<td class="col2">Header C 3</td>
<td class="col3">Header C 4</td>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="col0">R 1 C 1</td>
<td class="col1">R 1 C 2</td>
<td class="col2">R 1 C 3</td>
<td class="col3">R 1 C 4</td>
</tr>
<tr class="even">
<td class="col0">R 2 C 1</td>
<td class="col1">R 2 C 2</td>
<td class="col2">R 2 C 3</td>
<td class="col3">R 2 C 4</td>
</tr>
<tr class="odd">
<td class="col0">R 3 C 1</td>
<td class="col1">R 3 C 2</td>
<td class="col2">R 3 C 3</td>
<td class="col3">R 3 C 4</td>
</tr>
<tr class="even">
<td class="col0">R 4 C 1</td>
<td class="col1">R 4 C 2</td>
<td class="col2">R 4 C 3</td>
<td class="col3">R 4 C 4</td>
</tr>
</tbody>
</table>
</div>
<div id="footer" class="layoutsection">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</body>
</html>
We defined in the example markup explicit element IDs and element class names for all markup elements, which can help us to specifically target grouped and individual elements for style design. For this example, we define both a screen and print CSS media type. The intended result is a different design on printed materials than what a given user sees when viewing our web page via a Web browser client.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS, Advanced Selectors, and Media Type Example</title>
<style>
@media screen {
body {
background-color: #999;
text-align: center;
margin: 0px;
padding: 0px;
font-size: 75%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body div#maincontainer {
background-color: #fff;
text-align: left;
margin: 0px auto;
padding: 0px;
border: 1px solid #333;
border-top: none;
width: 480px;
}
body div#maincontainer div#header {
border-bottom: 1px solid #999;
padding: 0px 0px 4px 0px;
}
body div#maincontainer div#header h1 {
margin: 0px 0px 15px 5px;
padding: 5px 0px 0px 0px;
font-size: 12pt;
color: #666;
}
body div#maincontainer div#header ul#menu_header {
list-style: none;
margin: 0px 0px 0px 5px;
padding: 0px;
}
body div#maincontainer div#header ul#menu_header li.menuitem {
display: inline;
}
body div#maincontainer div#header ul#menu_header li.menuitem a {
text-decoration: none;
color: #333;
border: 1px solid #333;
margin: 0px;
padding: 4px 10px 4px 10px;
text-align: center;
background-color: #f1f1f1;
}
body div#maincontainer div#header ul#menu_header li.menuitem a.active {
background-color: #fff;
font-weight: bold;
}
body div#maincontainer div#body p {
margin: 10px;
padding: 0px;
}
body div#maincontainer div#body table#bodycontent {
border-collapse: collapse;
border: 1px solid #cfcfcf;
margin: 5px 5px 15px 5px;
width: auto;
}
body div#maincontainer div#body table#bodycontent thead tr td {
background-color: infobackground;
border-bottom: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
text-align: center;
font-size: 9pt;
font-weight: bold;
padding: 4px;
}
body div#maincontainer div#body table#bodycontent tr.even td {
background-color: #f1f1f1;
}
body div#maincontainer div#body table#bodycontent tbody tr td {
font-size: 8pt;
}
body div#maincontainer div#body table#bodycontent td.col0 {
width: 125px;
}
body div#maincontainer div#body table#bodycontent td.col1 {
width: 85px;
}
body div#maincontainer div#body table#bodycontent td.col2 {
width: 125px;
}
body div#maincontainer div#body table#bodycontent td.col3 {
width: 95px;
}
body div#maincontainer div#body table#bodycontent tbody tr td.col1 {
color: red;
text-align: center;
}
body div#maincontainer div#body table#bodycontent tbody tr td.col2 {
color: blue;
font-weight: bold;
text-align: center;
}
body div#maincontainer div#body table#bodycontent tbody tr td.col3 {
color: green;
text-align: right;
}
body div#maincontainer div#footer {
border-top: 1px solid #666;
}
body div#maincontainer div#footer p {
text-align: center;
margin: 5px;
padding: 0px;
font-size: 7pt;
color: #666;
}
}
@media print {
body {
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}
body div#maincontainer div#header h1 {
font-size: 12pt;
}
body div#maincontainer div#header ul {
display: none;
}
body div#maincontainer div#body p {
font-size: 9pt;
}
body div#maincontainer div#body table#bodycontent thead tr td {
font-size: 11pt;
font-weight: bold;
}
body div#maincontainer div#body table#bodycontent {
border-collapse: collapse;
font-size: 9pt;
border: 1px solid #999;
width: 100%;
}
body div#maincontainer div#body table#bodycontent tr td {
border: 1px solid #999;
border-right: none;
border-left: none;
}
body div#maincontainer div#footer p {
color: red;
font-size: 8pt;
text-align: center;
}
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="header" class="layoutsection">
<h1>Example Header</h1>
<ul id="menu_header">
<li class="menuitem" id="menu_header_item1"><a href="#" id="menu_header_link1" class="active">Link 1</a></li>
<li class="menuitem" id="menu_header_item2"><a href="#" id="menu_header_link2">Link 2</a></li>
<li class="menuitem" id="menu_header_item3"><a href="#" id="menu_header_link3">Link 3</a></li>
<li class="menuitem" id="menu_header_item4"><a href="#" id="menu_header_link4" >Link 4</a></li>
<li class="menuitem" id="menu_header_item5"><a href="#" id="menu_header_link5" >Link 5</a></li>
</ul>
</div>
<div id="body" class="layoutsection">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<table id="bodycontent" class="content">
<thead>
<tr class="odd">
<td class="col0">Header C 1</td>
<td class="col1">Header C 2</td>
<td class="col2">Header C 3</td>
<td class="col3">Header C 4</td>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="col0">R 1 C 1</td>
<td class="col1">R 1 C 2</td>
<td class="col2">R 1 C 3</td>
<td class="col3">R 1 C 4</td>
</tr>
<tr class="even">
<td class="col0">R 2 C 1</td>
<td class="col1">R 2 C 2</td>
<td class="col2">R 2 C 3</td>
<td class="col3">R 2 C 4</td>
</tr>
<tr class="odd">
<td class="col0">R 3 C 1</td>
<td class="col1">R 3 C 2</td>
<td class="col2">R 3 C 3</td>
<td class="col3">R 3 C 4</td>
</tr>
<tr class="even">
<td class="col0">R 4 C 1</td>
<td class="col1">R 4 C 2</td>
<td class="col2">R 4 C 3</td>
<td class="col3">R 4 C 4</td>
</tr>
</tbody>
</table>
</div>
<div id="footer" class="layoutsection">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</body>
</html>
Web browser client
Print preview
Content size, caching, and external style sheets
As you can see in the previous examples, styling your markup elements via the in-markup <style> tag element can add more markup to the given Web page. With more markup on our Web pages, we are unnecessarily adding to the content size of the Web page, and not allowing both the HTTP server and the Web browser client to cache common style declarations.
To create a lighter markup and allow both the HTTP server and Web browser client to cache any common styles declarations, we can take all of the CSS markup and create two separate style sheets named screen.css and print.css. We then modify all of our Web pages that need these common style declarations, by using the <link> element method.
In the following table, we show a simple comparison of the above example (which uses the in-markup <style> tag element) and a second example Web page that uses the <link> tag element method, which charts the content size and the ratio of markup-to-displayed content (text).
| Web page/markup example |
Total page size |
Text content |
Content percentage |
| In-markup <style> |
6002 Bytes |
387 Bytes |
6.45% |
| External Style Sheets |
2455 Bytes |
387 Bytes |
15.76% |
As we can see, the usage of external style sheets reduces the Total Page size by more than 50%. Despite this being a simple example, we can immediately see the benefits of using external style sheets in our development archtecture. Decreasing total page size metrics across our applications allow for not only better resource utilization and response times, but also can facilitate the expanse of said applications to low-bandwidth device types, such as mobile device clients.
Another benefit to this approach is the single-point-of-maintenance that this approach affords us when a need to modify the common style declarations across multi-Web page environments.
This is a community wiki. Be sure you are logged in to edit, comment, and add pages. Not a member yet? It's free and simple. Click Login in the upper right corner and Register.