Styling with CSS

Course Topics by Week 
1. Intro to HTML 56. Page Layout with CSS
2. More HTML 57. HTML Tables
3. Developing a Web Site8. HTML Forms
4. Styling with CSS9. Multimedia
5. Midterm Quiz10. Review and Term Project
 11. Final Quiz

Contents

Introduction

 

Basic CSS

Cascading Style Sheets (CSS) refers to both a type of file, .css, and a computer language used to describe the formatting and style of a web page written in HTML.

CSS is designed to facilitate the separation of presentation and content, including layout, colors, and fonts. This separation can:

The name cascading comes from the hierarchy of priorities that determine which style rule applies when there is more than one style rule that is applicable to a particular HTML element.

Style Rules

Style-sheets

A Style-sheet is just a set of one or more CSS rules and it doesn't have to be in a file.

Precedence: The Cascade

When you have style rules in multiple places with the same selector and conflicting properties, then the style rule that has the highest precedence overrides the others meaning it wins.

This is the order of precedence from highest to lowest. (#1 is highest)

  1. HTML element's inline styles.

  2. HTML page's embedded style rules.

  3. HTML pages's external style-sheet.

    There can be multiple external style sheets linked to one page. The last one has the highest precedence.

  4. Browser's user-defined styles.

  5. Browser's internal style-sheet.

 

More Selectors

Contextual Selectors

CombinatorExampleDescription
commanav, p, olMatches any of the three elements
spacenav olMatches any ol that is anywhere inside a nav.
greater-thannav>olMatches an ol that is directly inside an nav.
plusul+olMatches an ol that immediately follows a sibling ul.
dashul-olMatches any ol that is a sibling of an ul.

W3 Schools tutorial: CSS Combinators

 

Attribute Selectors

id Selector

A particular id attribute can be used only once on a web page to identify an element. It has multiple uses in HTML.

Example of a target HTML element:

 

Class Selector

A particular class attribute can be used multiple times on a web page and is only used for applying a CSS rule.

 

Semantic structural Elements as CSS Selectors

These can be used as CSS rule selectors to provide a way to format a section of the page. For example:

Semantic Structural Elements

W3Schools tutorial on semantic elements

Non-semantic Structural Elements

The <div> element was a structural element used before HTML5 introduced semantic structural elements. It is considered non-semantic, because div is just an abbreviation for "division", it's name doesn't have any meaning related to the type of division it represents.

Example:

The <span> element is used to apply CSS formatting to an arbitrary area in a row of in-line elements.

For example:

 

Examples

 

References


Creative Commons License Web Authoring Lecture Notes by Brian Bird are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.