Styling & CSS

CSS Syntax

CSS works with HTML to define the way content is presented. Styles can be specified:

in the head of a HTML document - embedded style sheet;
in a separate style sheet - external style sheet;
directly into individual HTML elements - inline styles.

Embedded Style Sheets

The styles are included within style elements inside the head of an HTML document.

HTML & CSS:

<!doctype html>
<html>
<head><title>An Introduction to Style Sheets</title>
<style>
/* Here is a CSS comment */

/* Another CSS comment  
   over multiple lines */
	 
h2 {
    color: #800080;
    font-style: italic; 
}

p {
    text-indent: 2em;         
    text-align: justify; 
}
</style>
</head>
<body>
<h2>An Introduction to CSS</h2>
<p>We have been using HTML to define the basic 
structure of our web pages. We will now use 
Cascading Style Sheets (CSS) to define the 
appearance of our web pages.</p>

<p>We will review three different methods for 
incorporating style into HTML documents (embedded 
style sheets, external style sheets and inline 
styles).</p>
</body>
</html>

Displayed by browser:

An Introduction to CSS

We have been using HTML to define the basic structure of our web pages. We will now use Cascading Style Sheets (CSS) to define the appearance of our web pages.

We will review three different methods for incorporating style into HTML documents (embedded style sheets, external style sheets and inline styles).

HTML5 only requires style for the opening tag of an embedded style sheet:

<style>

Earlier versions of HTML require an additional attribute in the opening tag:

<style type="text/css">

Note that this method is used for styles that are to be applied to a single HTML document.

External Style Sheets

An external style sheet is a separate text file containing all your CSS rules. Note that the text file does not contain the <style> tag and you need to end the file name with the extension .css.

The style sheet can be applied to any number of HTML files. When you make a change to an external style sheet, all the pages that reference it are automatically updated as well.

HTML5 example:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style1.css">
</head>

Earlier versions of HTML require an additional attribute in the opening tag:

<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>

Keywords

Style sheets:

A set of instructions for rendering HTML elements
The browser's default style is overridden.

Keywords:

Rule: a single instruction. E.g. p {text-indent: 2em;}. The Rule contains two parts: the Selector and the Declaration

Selector: the HTML element to which author-specified effects are to be applied
Declaration: specifies how the Selector should be rendered. The Declaration contains two parts: the Property and the Value, always separated by a colon.

Property: the aspect of a Selector to be affected.
Value: how the property aspect should be rendered.

Note that a Selector can have multiple Declarations, separated by semi-colons as in the example:

h2 {
   color: #800080;
   font-style: italic; 
}

Inline Styles

It only applies to the element that contains the inline style. This method can also be used to override any previously declared styles. For example:

<h2 style="color: green;"> A green H2 </h2>

The earlier embedded example rewritten with inline styles would be as follows:

<!doctype html>
<html>
<head>
	<title>An Introduction to Style Sheets</title>
</head>
<body>
<h2 style="color: #800080; font-style: italic;"> ... </h2>
<p style="text-indent: 2em; text-align: justify;">
   ...  
</p>
<p style="text-indent: 2em; text-align: justify;">
   ...
</p>
</body>
</html>

Inline styles are good for testing. However, inline styles are rarely used for final versions of a website. Why?

General Page Styling

<!doctype html>
<html>
<head>
	<title>An Introduction to Style Sheets</title>
	<style>
	body { 
		font-family: Arial, helvetica, sans-serif; 
	}
	h2 { 
		color: #800080; 
		font-style: italic;
	}
	h3 { 
		font-style: oblique; 
		text-decoration: overline;
	}
	h4 {
		text-decoration: line-through;
	}
	h5 {
		text-decoration: underline;
	}
	h6 {
		font-weight: 900;
	}
	p { 
		text-indent: 2em;
		text-align: justify;
		text-transform: capitalize
	}
	</style>
</head>
<body>
<h2> h2 - Text Color and Italic Text</h2>
<h3> h3 - Oblique Text with Overline </h3>
<h4> h4 - Line Through Text </h4>
<h5> h5 - Underlined Text </h5>
<h6> h6 - Font-Weight:900 </h6>
<p>This page shows some examples of using basic syle properties and values. 
The paragraph has text indent, text-align jusify and text-transform capitalize.</p>
</body>   
</html>

text-indent	(shown in first example) indents the first line of a block of text. Value can be a length or percentage of element's width. Can be a negative length.
font-family	specifies an element's font set. Values can be of 2 types: family-name (e.g. `Times`, `Arial`, `Garamond`) and generic-name (`serif`,`sans-serif`, `monospace`, `cursive`, `fantasy`). Usually more than one font-family is specified to let the browser work through a list of choices until it finds a font it is able to display.
font-style	sets the display of a font to oblique or italic.
font-weight	sets the heaviness of a font. Values will produce different results depending on font-family selected. Absolute values are `100`, `200`, `300`, ... `900`, `400` being same as `normal`. Relative values are `bold`, `bolder`, `lighter`.
text-align	sets the text alignment for an element (`left`, `right`, `center`, `justify`).
font-size	sets the size of a font. Values can be absolute, relative, length and percentage.
text-decoration	adds underlining, overlining, strike-out or blink to text. Values can be `none`, `overline`, `line-through`, `underline` and `blink`.
text-transform	changes the case of text. Values are `capitalize`, `uppercase`, `lowercase`.

Selectors (to include classes and ids)

The following shows different ways of defining selectors (some can be combined).

Selecting elements by name:

h1 { color: blue; }

To add additional rules use semi-colon:

h1 { 
	background: white; 
    color: blue; 
}

Selecting groups of elements. Note group selectors are separated by a comma:

h1, h2 { color: blue; } 

   Same as:   

h1 { color: blue; }
h2 { color:blue; }

Selecting elements by context (descendant selector) to select a tag that is nested inside another specified tag. Note contextual selectors are separated by whitespace:

p em { color: green; }

<body> 
<h1>Heading <em>text1</em> </h1>
<p>Paragraph <em>text2 green</em></p>
</body>

Selecting elements by class. When you want to give one or more elements a style that is different to related tags on a web page:

.official { color: blue; }

<body> 
<h1 class="official">Some heading </h1>
<p class="official">Some text </p>
<p>Some more text </p>
</body>

Selecting elements by id. When you want to give one element a style that is different to related tags on a web page:

#intro { color: green; }

<body> 
<p>Some text </p>
<p id="intro">Some more text </p>
</body>

Combining selectors.

div.summary { color: green; }

<div class="summary">Some div text that should be green</div>

p#new { ... }

Universal selector - targets all elements on the page.

* { color: blue; }

Link pseudo-classes: selecting elements based on their state (see next section):

a: hover { background-color: silver; }

<span> and <div> elements

<span> element is a grouping element. Its primary purpose is to apply CSS rules or id attributes to a block of text. It is an in-line level element, which means it is displayed in line with other text and with no line breaks.
<div> is a similar element but displayed on its own line, with margins above and below. It is a block-level element

Review Questions

What tag is used to embed a style sheet?
What tag is used to link to an external style sheet?
How do you define and use a CSS class?
How do you define and use a CSS id?

What is the difference between:

p, b { color: blue; }
p b { color: red; }

What would the following select?
```
div.important h2 { color: green; }
```