Advanced Styles

Key points

CSS styles can be defined in the head of an HTML document using the <style> tag.
Styles in the head are applied to elements by tag, class, or id.
When cascading styles conflict, the most specific one will be used.

Defining Styles in the Head

Besides using the style attribute, HTML includes a <style> tag that can be placed in the <head> of an HTML document. Anything in the style tag affects pieces of the entire document. Inside the style tag, rather than using HTML, you include CSS code, very similar to the code used in style attributes. The only difference is that styles are grouped together using { and }, and groups are assigned a tag that they affect. Here is a simple example:

Click to view Live Example

<html>
	<head>
		<style type="text/css">
			b {
				color: green;
			}
		</style>
	</head>
	<body>
		<p>This is normal text, this is <b>green</b> text. This is also <b>green</b>.</p>
	</body>
</html>
An example style tag that turns all of the bold text green

Which produces text similar to: This is normal text, this is green text. This is also green. First, the style tag requires the type attribute, whose only possible value is "text/css". This attribute tells the browser what type of style information is being used. Second, b { starts a group of styles that affect every <b> tag in the document. Then, color: green is a standard CSS property like you've used with the style attribute. Finally, the } ends the group of styles.

Another Example

Just like how style attributes can contain multiple properties, so too can a group of styles in the style tag.

Click to view Live Example

<html>
	<head>
		<style type="text/css">
			body
			{
				font-family: Georgia, Arial, serif;
				background-color: #DDDDBB;
				color: #004400;
				font-size: larger;
			}
			
			i
			{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p>This text is dark green on a light background. All <i>italic</i> text will also be bold.</p>
	</body>
</html>
An HTML document with multiple styles

This above HTML will produce a document similar to the following:

This text is dark green on a light background. All italic text will also be bold.

Since CSS styles cascade and all visible HTML elements are within the body tag, the entire document is affected by anything in the body group. However, if any styles conflict between a parent and child element, the most specific style wins (in this case the child element is always more specific than the parent).

HTML Classes and Ids

So far, you have seen that CSS styles can be applied to all tags of a certain type (in the style tag) and individual tags (with the style attribute). However, CSS provides two more ways to choose which elements receive certain styles: classes and ids. Any tag that supports the style attribute can be given a class attribute. Styles within the style tag can reference the name of the class, and all elements regardless of which tag they are, will receive those styles:

Click to view Live Example

<html>
	<head>
		<style type="text/css">
			.special
			{
				color: red;
				font-size: larger;
			}
		</style>
	</head>
	<body>
		<p>Normal text, <span class="special">special text</span>.</p>
		<p class="special">A whole paragraph of special text!</p>
	</body>
</html>
Using CSS classes

Instead of using tag names, a dot (.) is used, followed by the name of the class. In the previous example, the style group is applied to any element whose class is "special". The resulting text would look like:

Normal text, special text.

A whole paragraph of special text!

Ids are used very similarly. However, an element's id must be unique among all elements in the entire HTML document. Then, the CSS in the style tag can reference a particular element by its id using a # followed by the name of the element:

Click to view Live Example

<html>
	<head>
		<style type="text/css">
			p
			{
				color: green;
			}
			#redP
			{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>Green paragraph</p>
		<p id="redP">Red paragraph</p>
	</body>
</html>
Cascading styles using an id

Green paragraph

Red paragraph

Note that the red paragraph's styles override the generic style given to all p elements. This is because referencing by an id is essentially the same as including the style attribute on that element.

More CSS

There's a lot more to CSS than what's been covered in this manual. However, this is enough to get you started. If you are interested in learning more about CSS, I recommend w3schools.com.