XHTML CCIS1301 - Class 6

Class 6 - Introduction to CSS

What is CSS?

CSS is an acronymn for "Cascading Style Sheets". A simple explaination of what CSS "is" is this: CSS is a way to send display instructions to a browser. There are several ways we can send these display instructions, but in general, what CSS does is to tell the browser what colors, fonts, styles, treatments and positioning we want to use for our content on any given web page.

To use CSS, we generally set up a list of rules (a ruleset) which contain a selector in conjunction with a list of display or formatting instructions, in each rule. A "generic" CSS ruleset would look like this...

selector {
	rule:setting;
	rule:setting;
	rule:setting;
}

The example above, you will notice that we are using a selector. We'll get back to this later, suffice to say that a selector tells the browser what part of the page we're "selecting" for our formatting. We then use the opening curly bracket "{" to begin our formatting instructions. Each formatting instruction is similar to an HTML tag attribute - we have a name and a value for each instruction. Only, with CSS instructions, we use the format "name:value" (or "rule:setting" as I used above). So the rule (or the instruction to the page) and the setting (or value of our instruction) is separated by a colon ":". Each rule:setting pair is terminated with a semi-colon ";".

IDs and Classes

As I mentioned earlier, we use divs to logically associate elements on a page, this gives us one method of identifying what content is where on the page. Another method is to give an XHTML element a specific attribute of either "id" or "class" or both. An example:

The example above has an attribute name of "id" and an attribute value of "first_paragraph". Now consider the following...

The example above has an attribute name of "id" and an attribute value of "first_paragraph" as well as another attribute name of "class" with its attribute value of "main_section_text". We will get into classes and attributes more in the CSS section of this course (which is where they have a huge impact). For now, you need to know the following:

All id attribute names must be unique on the page. Meaning, for any page, if you have one tag with an id value of "first_id", there can be NO OTHER id with a value of "first_id".
Class names can be used to logically associate similar elements. You can have more than one tag with the same class value. Meaning, if you have a paragraph (<p>) with a class attribute value of "main_content_text", you can have other tags with the same class attribute value.

Selectors

A CSS selector is a method of "selecting" which elements, classes and ids you want to format in your HTML document. While there are about a half dozen methods for selecting parts of your page, we are going to focus on the three most common selector types. They are:

HTML Tag selectors
Class selectors
ID selectors

You can use these selectors in combination to get better granularity in your CSS, but let's start with the basics.

HTML selectors

HTML selectors are probably the easiest to understand. To select an HTML element for our CSS ruleset, we simply use the name of the element. For example, if we wanted to select all the <h4> tags on a page, we use the following CSS:

h4 {
	/* Ruleset definitions here */
}

Class Selectors

Remember, we can create classes using the attribute "class" on any HTML element, like this:

<p class='specials'>

To access (or select) this class, we have a special selector. We simply use the name of the class, prepended with a period ".", like this...

.specials {
	/* Ruleset definitions here */
}

ID selectors

The final method for accessing content is using an ID. Remeber, we can create an id using the "id" attribute on any HTML element, like this:

<div id="container">

To select this specific ID, we have a special selector. We simply use the name of the id, prepended with a hash "#", like this...

#container {
	/* Ruleset Definitions Here */
}

Combining Selectors

In addition to the simple selectors above, we can make more complicated selectors to be more specific and granular in what we want to select. Consider the following examples:

#container h4 {

}

This will select ONLY the <h4> elements that are INSIDE another element that has an id of "container", like this HTML:

<div id="container">
	<h4>My H4</h4>
</div>

Another Example

#container p .highlight {

}

This will select ONLY the elements which have a class of "highlight" which are INSIDE the <p> elements that are INSIDE another element that has an id of "container", like this HTML:

<div id="container">
	<p>This is a paragraph <a class='highlight'>with a link</a> and other text</p>
</div>

Spaces make a difference.

When using CSS selectors, spaces generally indicate a parent-child relationship. For example:

html body p span a {
	
}

Start with the "html" element, look for a child "body" element, then look for a child "p" element, then look for a child "span" element, then look for a child "a" element. (When I say "child" in this context, I mean a nested tag "inside" the other tag).

So consider the following:

body p .special {

}

This starts with the body, then looks for a "p" element, then looks for any element with a class name of "special" (see the HTML below)

<body>
	<p class="special">
		This is <span class="special">special</span> text.
	</p>
	<p class="feature">
		This is <span class="special">special</span> text.
	</p>	
</body>

However, what if we wanted to address a paragraph tag that had a class name of special, but not a span with a class name of special? To do that, we eliminate the space like this...

body p.special {

}

The HTML looks like this:

<body>
	
	<p class="special">
		This is <span class="special">special</span> text.
	</p>
	
	<p class="feature">
		This is <span class="special">special</span> text.
	</p>	
</body>

We can go even further here and say we want to select only text with a class of special that are inside a paragraph with a class of featured...

p.featured .special {

}

<body>
	
	<p class="special">
		This is <span class="special">special</span> text.
	</p>
	
	
	<p class="feature">
		This is <span class="special">special</span> text.
	</p>
</body>

We can use any combination of elements and classes and ids. Just remember the following:

a space in our selector means "has a child"
no space in our selector means "has a class or id of"

CSS methods and Precendence

There are several ways to apply CSS to your document, and the order in which you use these methods will determine which declaration is applied to any given elements.

Inline Styles

Inline styles are styles which are applied to an HTML tag using the style attribute. An example is:

<p style="font-color:red;">This is a paragraph that is red</p>

This style will ALWAYS* override any internal styles. What's an "internal style"?

Internal Styles

Internal styles are styles that are placed between the opening and closing <style> tags. The <style> go in the head of your document (i.e. between the <head> and </head> tags)

An example of an internal style is:

<style type="text/css">
body {
	background-color:blue;
	font-size:12px;
}
/* More styles here */
</style>

Internal styles will ALWAYS* override external styles. What's an "external style"?

External Styles

External styles are styles which are defined in a single file outside of the actual HTML code, and "included" into the page. These are the most common method of creating CSS, and are very powerful. By simply changing a single file, you can dramatically change the entire layout of your site (see cssZenGarden.com for an example).

There are 2 ways to include a remote CSS file. Option 1: Using the <link> tag:

<link rel="stylesheet" type="text/css" media="all" href="./path/to/css_file.css" />

And option 2: using the @import statement in CSS:

<style type="text/css">
	@import url('./path/to/css_file.css');
</style>

External Styles will ALWAYS* override Browser Default Styles. What are browser default styles?

Browser Default Styles

Ever wonder why links are blue, text is black, and backgrounds are white? This is because your browser has default settings. Unbeknownst to you, these settings are all over the place and include settings for all sorts of elements. This is why I usually recommend "resetting" your CSS to make sure you have a consistent look and feel across all browsers (hint: not all browsers have the same default settings for the same elements - ain't web design fun?). Ideally, You should do something similar to this at the top of every CSS file you create:

* {
	margin:0px;
	padding:0px;
	border:0px;
	font-family:sans-serif;
	color:#000;
}

This will "reset" any browser settings to have every element with no border, margin, padding, a color of black, and a sans-serifed font.

The only remaining styles we have are the Operating System styles. These are overridden by the Browser Default Styles so, we get our final precedence:

System Styles are overridden by...
Browser Default Styles, which are overridden by...
External Styles, which are overridden by...
Internal Styles, which are overridden by...
Inline styles

You may have noticed my * by the ALWAYS above. This is because there is a little way to override the precedence order above by using the !important modifier.

p.special {
	color:red !important;
}

This says, I don't care what I told you before, this is "important", so override the precedence rules.

One last thing about precedence...

While the order of styles is important, so too is the specificity. The more specific your selector, the more precedence it has. For example:

html body p .special {
	color:green;
}
.special {
	color:red;
}

The first selector is more specific, so in general, it will have higher precedence (and therefore be applied) over the less-specific second example.

Media Types

You may have noticed in the link tag above, that I used an attribute called "media". CSS allows you to let the browser know what type of system you want the CSS to apply to. For example, if you want your CSS to apply to a standard PC browser, you would use 'media="screen"'. For mobile devices, you would use the media type "mobile", and for printing, media="print".

Fonts, colors and treatments

So, now that we know a little bit about how to use CSS, below is a table of common CSS definitions:

Property	Useage	Example	Reference
color	Used to change the color of text in an element	color:red;	http://w3schools.com/css/css_text.asp
background	Used to set the background (image, color, etc) of an element	background-color:red; background-image:url("/path/to/image.jpg")	http://w3schools.com/css/css_background.asp
font	Used to set the font (family, size, weight, etc) of text in an element	font-family:arial,sans-serif; font-style:italic; font-weight:bold; text-decoration:none; font-size:12px;	http://w3schools.com/css/css_font.asp

Finally, we have something called a pseudo-class (http://w3schools.com/css/css_pseudo_classes.asp) which is like a "hidden" class on most elements that we can access. The most common pseudo-class is "hover". We use this to identify the hover state (i.e. your cursor is hovering over an element) of your mouse. To use this, we simply append to our selector, the pseudo-class like this:

#container p a:hover {
	text-decoration:underline;
}

The code above will set links in our #container div which are in a <p> tag to have an underline when you mouse-over them.

XHTML - CCIS1301