HTML/CSS: Internal Styles

The <style> Tag


Up to this point, we have been applying styles inline, or in each element. While this gives great control over the appearance of a site, it can be extremetly tedious - especially if you desire to change the colors/styles in a long list or table. CSS and HTML also provide a method for creating page level, or internal, styles that can alter all tags of a given type on a page. For example, with one line of CSS, a designer would be able to alter the appearance of all the <li> tags within a page.

Internal styles are applied using the <style> tag. The style tag is placed in the <head> of the document and are therefore valid throughout the entire page. In the style tag, html tags are identified and are followed by curly braces {}. Inside the curly braces, style pairs are written the same way as they are inside the quotes of the inline styles we have been writing. Using inline styles allows design changes to be made for all tags in a page at the same time.
<head>
	<title>...</title>
	<style>
		div {
			background-color:red; 
			color:white
		}
		li {
			font-family: Impact;
			font-weight: bold;
			font-size: 1.2 em;
		}
	</style>
</head>

In the example above, all div tags on the page would be created with a red background and white text. Also, any list items would be rendered as bold and slightly larger than normal in the Impact font.

Style Heirarchy

In the example above, ALL div tags on a page would be rendered with a red background and white text color. This is a bit of a problem. What if we want one div to be blue with green text (I know, ugly!)? Anyway, internal styles can be overridden with inline styles. In CSS, the closest style wins. 
<head>
	<title>...</title>
	<style>
		div {
			background-color:red;
			color:white;
		}
	<style>
</head>
<body>
	<div>This is white on red</div>
	<div>This is white on red</div>
	<div style='background-color:blue; color:green'>This is green on blue</div>
	<div>This is white on red</div>

Classes & Id's

Using inline styles is OK for an occassional exception, but what if the design calls for half of the divs to be red with white text and the other half are to be white with red text? I can pick one to be the rule, but I still have to write inline styles on half the divs. This is not the most efficient way AND if changes have to be made later, I will need to touch all of the inline styles as well.

In this case, we make a CSS class. A class is a style rule that is conditionally applied. In other words, we can create several rules for different divs and apply each rule as desired. To make a class in CSS, we choose a name (think variables) and place a period (.) in front of it (lines 4 and 8). Then we apply style rules as normal. To call the class, we use the class attribute in the desired tag (lines 22, 23 and 24).

Often, there are special sections on a page that require special formatting. These areas may include the header, navigation, footer, etc. Each of these areas are unique in a page. In other words, they appear only once on a page. To create special formatting in an internal style to be applied to a single area on a page, we use an id. Id's are created just like classes in CSS, except they use a # to denote them (line 12) and they can only be applied to a single element on the page. In the html, we use the id attribute to call the style (line 21). 
<head>
	<title>...</title>
	<style>
		.whiteOnRed {
			background-color:red;
			color:white;
		}
		.redOnWhite{
			background-color:white;
			color:red;
		}
		#nav {
			border: 2px solid red;
			font-weight:bold;
			background-color:black;
			color:red;
		}
	</style>
</head>
<body>
	<div id='nav'>Home | About | Products | Contact</div>
	<div class='whiteOnRed'>This is white on red.</div>
	<div class='redOnWhite'>This is red on white</div>
	<div class='whiteOnRed'>This is white on red</div>
	<div class='redOnWhite'>This is red on white</div>

Advanced CSS Styling

CSS has capabilities to be as specific or as general as desired. This means that we can dig into the HTML structure to identify specific patterns or make general rules that can be applied in a variety of situations. Some of the syntax is very close, so look carefully at the following examples of these situations.

div.blue{ css code }
These styles would only be applied to div with the class blue applied 
div .blue{ css code }
These styles would only be applied to tags with the blue class inside of a div tag 
div, .blue{ css code }
These styles would be applied to all div tags AND all tags with the blue class applied 
#nav span.active{ css code }
These styles are applied only to a span with the active class applied inside of the element with id nav 
<div class='blue nav' >
This element is applying two different classes: blue and nav.