CSS Basics

Section 1: CSS Basics

CSS is the acronym of Cascading Style Sheets

Styles define how to display HTML elements.
CSS is not HTML, but can be embedded in HTML documents.

Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents.

CSS improves maintainability and modifiability by allowing format changes to be made in a single location only.
Click to see an Idaho-based analogy that might help you better understand the relationship between HTML and CSS.
Same Page Different Stylesheets!
See this demo of things you can do using CSS. Be sure to look at both the html as well as the attached stylesheet.

Recall that CSS works in conjunction with HTML, JavaScript, and XML to separate presentation from content, as seen in the figure below.

Advantages of CSS

Why use CSS instead of embedding formatting tags in your HTML?

Less code: We can assign properties to values for common style classes and apply that class in different locations, thus using less code. Less code means less bandwidth consumption and easier-to-maintain content.
Easy maintenance: Changing a style class in an external style sheet allows a change to take effect throughout and entire site. We can use multiple style sheets as needed.
Higher content to code (tag) ratio: Placing CSS in an external file allows higher content to code ratio in a web page. This can be an important SEO factor, since the pages include fewer tags and more content for the spiders to index.
Faster page download: Browsers cache the style sheets, so page loads on subsequent pages of your site became faster. Less code means faster download times.
CSS saves time: CSS allows you to specify formatting details once for any element, and that formatting will automatically be applied whenever that element occurs.
Superior styles to HTML: CSS has a much wider array of attributes than HTML.
Consistency: Layout and positioning can be completely consistent across a site.
By using the media attribute, different style sheets can be used to specify different styles for different media types, such as screen, print, projection, etc.

Section 2: Style Specification Formats

The CSS specification provides a set of properties that you can set for your html tags, as well as a set of allowable values for those properties.

Examples of properties include background-color, float, or margin-top.
Examples of property values include blue, left, or 10pt.
You cannot invent your own property names or values.

Form of the rules:

selector {list of property/values}

–or–

selector
{
property₁: value₁;
property₂: value₂;
:
propertyₓ: valueₓ;
}

A selector indicates the tag or tags affected.

Each property/value pair has the form:

property: value

Pairs are separated by semicolons.

Section 3: Basic Selector Forms

A selector, as its name implies, selects an element in your HTML document to which the specified formatting is applied.

A number of different types of selectors are available, with varying levels of specificity to target a large number of elements, or just a few.
Different texts and websites use a variety of names as well as different groupings for the different types of selector forms.

Universal Selector

The universal selector is merely an asterisk (*) acting as a "wild card" to select any and all elements in the document.

This is the least specific selector available, because it's not specific at all.
For example,
*
{
color: blue;
}

Element Selector

An element selector selects all instances of an element, specified by its tag name.

Element selectors are also known as type selectors.
The selector is a tag name or a list of tag names, separated by commas.
If CSS formatting is specified for a particular html tag type, every instance of that tag in the html document with which the CSS is associated will be formatted in the specified manner.
This selector is more specific than the universal selector, but it is still not very specific because it targets every occurrence of an element, no matter how many of them there may be.

Examples:

h1
{
font-size: 20pt;
}
p, h2
{
color: navy;
}

The last selector in the list above gives every paragraph element and h2 element the same blue foreground color even if there are thousands of them in a document.

Class Selector

A class selector targets any element that bears the given class name in its class attribute.

The style class name begins with a dot (.) to distinguish it as a class.
- Although it is "legal", don't use a numeral as the character immediately following the dot in a style class name with a number.
A class selector makes it possible to apply a style to more than one kind of tag.

Example:

.highlighted
{
   background-color: yellow;
   display: inline;       /* makes background only the width of the text */
}
.redfont
{
   color: red;
}

A class is associated with a particular occurrence of an HTML tag by using the class attribute of the tag.

<h2 class="highlighted">Old Yeller</h2>
:
<p class="highlighted">This entire line should be highlighted.</p>
:
<ul>
<li>Item 1</li>
<li><span class="highlighted">Item 2</span></li>
<li>Item 3</li>
</ul>
:
<p>This will <span class="highlighted">highlight</span> one word.</p>

This is the result:

You can also apply more than one class to a tag.

<h2 class="highlighted redfont">Old Yeller</h2>

This is the result:

Section 4: Formatting with Property:Value Pairs

Recall that the style format is

selector
{
property₁: value₁;
property₂: value₂;
:
propertyₓ: valueₓ;
}

CSS3 includes over 250 properties in a variety of categories.

Here is a continuously updated list of all CSS properties.
Properties can be set for fonts, lists, alignment of text, margins, etc.
They also include colors, backgrounds, borders, etc.
- (see CSS Tutorial)

Property Values

Property values can be expressed using the following approaches:

Keywords
- examples: left, small, red
- Not case sensitive.
Length
- Generally expressed with numbers, which may include decimal points.
- Units:
  - px – pixels
  - in – inches
  - cm – centimeters
  - mm – millimeters
  - pt – points
  - pc – picas (12 points) [not pikas]
  - em – height of the letter 'M' in relation to the font size of the parent element, generally the body. (Note: the default browser text size is consistently 16px when no styles are applied.)
  - vw, vh – viewport units. vw, vh, and vmin can be used to size things relative to the current viewport size: One unit on any of the three values is 1% of the viewport axis. "Viewport" == browser window size == window object. Here are a couple of explanations (link and link).
    - Note how fluidly the demo resizes when you alter the window size – liquid layout
- No space is allowed between the number and the unit specification
  - e.g., "1.5 in" is illegal!
- Percentage – a number followed immediately by a percent sign
URL values
- The url() is used with either the background, list-style-image, or border-image properties to bring an image into the page for either list or background purposes.
- url(protocol://server/pathname)
- background-image: url('images/logo.gif');
Colors
- Colors are discussed in detail in an upcoming section.

Section 5: Font Properties

Font properties can include the following:

font-family
- Value is a list of font names, and the browser will use the first in the list.
- Example: Arial, Helvetica, Courier
- Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS)
  - Browsers have a specific font for each.
- If a font name is made up of more than one word, the W3C recommends that it be enclosed in quotes. Please do so in this class.
- font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size
- Possible values: a number followed by units or a name, such as smaller, xx-large, etc.
- font-size: 10pt;
- A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
font-style
- italic, oblique (useless), normal
- font-style: normal;
font-weight – degrees of boldness
- bolder, lighter, bold, normal
- Can be a multiple of 100 (100 … 900) (More in CSS Property: font-weight)
- font-weight: normal;
  font-weight: 400;
font
- For specifying a list of font properties.
- Order must be style, weight, size, name(s).
- font: bolder 14pt Arial, Helvetica, sans-serif;
- Note: if you use this shortened form you MUST include size and name. If you omit size, everything else seems to be ignored. More details in CSS font Property.
text-decoration
- line-through, overline, underline, none
- text-decoration: underline;
text-transform – convert text to upper case, lower case, or title case
- Options include none, uppercase, lowercase, capitalize, and toggle.
- text-transform: capitalize;
letter-spacing
- any length property value
- letter-spacing: -1.7px;
- Example of compressed spacing.

Section 6: Colors

Colors can be specified using any of the following:

Color name
rgb(n1, n2, n3)
- Numbers can be decimal or percentages
Hex form: #XXXXXX (note on Shorthand Hexadecimal Colors)

There are three color collections:

There is a set of 16 colors that are guaranteed to be displayable by all graphical browsers on all color monitors.

black	000000	green	008000
silver	C0C0C0	lime	00FF00
gray	808080	olive	808000
white	FFFFFF	yellow	FFFF00
maroon	800000	navy	000080
red	FF0000	blue	0000FF
purple	800080	teal	008080
fuchsia	FF00FF	aqua	00FFFF

There is a much larger set, the Web Palette
- 216 colors
- Uses hex color values of 00, 33, 66, 99, CC, and FF
Any one of 16 million different colors
- The color property specifies the foreground color of elements
  
  p
  {
  color: red;
  }
  ul
  {
  color: orange;
  }
  
  <p>apple</p>
  <ul>
  <li>Orange</li>
  <li>Pumpkin</li>
  <li>Carrot </li>
  </ul>
- The background-color property specifies the background color of elements

NOTE: Beware of using "odd" color names like "papayawhip" in your CSS. Some browsers will not accept them, and at one point they would not validate!

You can use all three approaches (hex, rgb triplet, or color name) in the same style sheet.

Color resources:

Section 7: Text Alignment

text-indent property
- The text-indent property specifies the amount of indentation (empty space) that is put before lines of text in a block. By default, this controls the indentation of only the first formatted line of the block.
  text-indent: 10%;
text-align property
- The text-align property has the following possible values: left (the default), center, right, or justify.
  text-align: left;
vertical-align property
- The vertical-align property sets the vertical alignment of an element.
  vertical-align: middle;
- It can be a bit confusing when you first learn about it, so here is a helpful link titled What is Vertical Align?.

Section 8: Margins

Margin – the space between the border of an element and its neighbor element.

The margins around an element can be set with margin-left, margin-right, etc., by assigning them a length value.

h5
{
margin-left: 2em;
margin-top: 3em;
}

<h5>Example of heading with margins</h5>

Example of heading with margins

Regular h5 with 0 margins

This particular word has big margins.

Section 9: Levels of Style Sheets

Styles are normally stored in style sheets, but there are three levels of styles: inline, document-level, and external.

Inline style sheets appear in the tag itself; specified for a specific occurrence of a tag and apply only to that tag.
Limit your use of these to debugging!

General Form

style = "property₁: value₁; property₂: value₂; …; propertyₓ: valueₓ"

Example

<p style = "float: left; width: 2.5in; margin-right: 10px;
margin-bottom: 10px;
border-style: dashed; border-width: thick;
border-color: red; background-color: yellow;">
Some people are like Slinkies – it brings a smile
to your face when you push them down a flight of stairs.
</p>

Some people are like Slinkies – it brings a smile to your face when you push them down a flight of stairs.

Inline style sheets are much less useful than embedded or external style sheets because if you want to make a change, you have to do it EVERYWHERE that inline style occurs.
- This defeats the entire purpose of CSS.
- See Evils of Inline.

Document-level style sheets (also called embedded style sheets) appear in the head of the document; they apply to the whole document in which they appear.
A style sheet appears as a list of rules that are the content of a <style> tag.

This is what we will use at first, but we'll later learn that it is better to use external style sheets.
- Until recently, the recommendation was that the <style> tag must include the type attribute, set to "text/css". However, the validator now indicates that the type attribute for the style element is not needed and should be omitted.
General Form

<head>
<style>
– Insert rule list –
</style>
</head>

Style Rule General Form

selector {property₁: value₁; property₂: value₂; …; propertyₓ: valueₓ;}

Example

<head>
<style>
ol
{
list-style-type: upper-roman;
}
ol ol /* an ol inside an ol */
{
list-style-type: upper-alpha;
}
ol ol ol /* an ol inside an ol inside an ol*/
{
list-style-type: decimal;
} </head>

External style sheets are in separate files, potentially on any server on the Internet; can be applied to any number of documents <preferred option>.
A <link> tag is used to specify that the browser is to fetch and use an external style sheet file:

Example

In the html document...

<head>
<link rel = "stylesheet" href = "styles/termpaper.css">
</head>

In the termpaper.css file linked above we might see...

ol
{
list-style-type: upper-roman;
}
ol ol /* an ol inside an ol */
{
list-style-type: upper-alpha;
}
ol ol ol /* an ol inside an ol inside an ol*/
{
list-style-type: decimal;
}

External style sheets are written as text files with the MIME type text/css.

Why are external stylesheets the preferred option?
- When you use external CSS to control the basic cosmetics of your web site, you need only to edit those cosmetic properties in one file to update ALL of your web site's pages.
- An external CSS page loads one time only and is cached, therefore the net weight of your individual pages decreases.
- An external CSS page can be easier maintained.
- Search engines can spider your site faster, because they do not have wade through all that unnecessary, redundant HTML code.
- External CSS separates your page content from presentation.