CSS: The 5 min Overview - Donna's Technology Resources

WHAT IS CSS?

CSS stands for Cascading Style Sheets and it is a stylesheet language that:

Describes the presentation of HTML.
Contains both formatting and layout information.

WHAT IS A STYLE SHEET?

A set of code that defines style rules.
Style rules list formats for different elements on your web page.

WHAT IS THE GENERAL FORMAT (Syntax) of CSS?

CSS Syntax Example at donnasresources.com — Figure 1: General CSS syntax

The general format is Selector {Property: Value;}

Multiple Property-Value combinations can be listed together between the curly brackets (see Figure 1).

The simplest type of selector is an HTML tag. But there are many, many more possibilities. For more information on what can be designated as a Selector see Table 1 below on CSS Selector Types.

TYPE OF CSS STYLE IS DETERMINED BY ITS LOCATION:

The CSS styles in operation on a webpage can be located in 3 different places as follows:

1. Inline styles

Inline style are styles that are applied to portions of text.
The style information is located in the opening HTML <tag> contains style=”property: value” attribute information.
For example, this code <h1 style=”color:red”>My Company Name</h1> would make the heading 1 designated words “My Company Name” the color red.
For class in-line styles, the style would have to be defined in the CSS code of the internal or external style sheet and applied to portions of text with a span tag in the .html file.

2. Internal styles (aka internal style sheets)

Internal CSS styles example at donnasresources.com — Figure 2: Internal styles example

CSS code sits within the opening and closing <style> tags in the <head> of the webpage file (see Figure 2).
Internal styles define styles for the elements on that web page only.
Internal style sheets can contain tag, class, id, and compound styles.

3. External styles (aka external style sheets)

CSS code sits in an external .css file. See Figure 3 for an example of what one looks like.
The style sheet is linked to the web page file with a <link> tag in the <head> of the webpage file. See Figure 4 for an example of linking in a style sheet called mystyle.css.
External styles work for the elements on any of the web pages that have the link code in their head section.
External style sheets can contain tag, class, id, and compound styles

Link line of code for external style sheet at donnmasresources.co — Figure 4: Example code in head of webpage to link in external styles

ORDER OF THE CASCADE:

3 things determine the order of the CSS cascade. In other words, which CSS rules supersede others.

A. Location of the styles:

Inline styles override Internal style sheets which override External style sheets.
In general, the closer the style information is to the HTML tag the more likely it will take precedence.

B. Inheritance of CSS:

Parent child document schematic shown on donnasresources.com — Figure 5: Sample parent-child document tree

Children tags inherit style rules from their parent tags.
Document trees like the one shown in Figure 5 can help determine the parent child relationships in operation.

C. Specificity of CSS

In general, style rules that target more specific elements on the web page override style rules that target less specific elements on the web page.
Compound style rules can override class style rules and class style rules override tag style rules.
If two style rules target equally specific elements, the last style rule defined in the CSS code takes precedence.
Inherited properties have no specificity.

CSS SELECTOR TYPES:

Definitions and examples of the 4 types of CSS Selectors are shown in Table 1. Compound selectors are truly the workhorses of CSS as they enable you to get the exact look you need in very particular places of a web page especially when used inside <div> tags. To get a more complete feel for all the selector types possible, go to http://www.w3schools.com/cssref/trysel.asp.

PDF handout of this CSS overview:

If you would like a pdf copy of this information, use this link.