[Deep Dive: CSS Foundations, Introduction with Guil Hernandez]

CSS, which stands for Cascading Style Sheets,

is responsible for describing the presentation of HTML pages

and it defines how elements on a page are displayed.

Colors, font sizes, and page layout

are just a few of the presentational responsibilities of CSS.

With CSS we create rules to specify how contents should appear on a page.

We then associate those rules with HTML elements.

CSS was added by the W3C and HTML 4.0

to solve some development and maintenance problems

web developers were having at the time with HTML 3.2,

which had introduced several new presentational tags and attributes.

Because HTML was never intended to contain presentational tags

for formatting pages, such as the font and center tags,

it made it difficult and impractical to develop and maintain websites.

By separating the content from the presentation,

CSS made the development and maintenance of websites more efficient

by being able to share styles across multiple pages.

CSS also improved accessibility of web content

by allowing access and adaptability to various devices,

such as desktops, mobile devices, large screens, and printers.

Currently, CSS is the official complete web standards, with parts of the CSS 3 spec

in the recommendation stage--the stage where it's considered a final standard.

The good news is the W3C has split the CSS 3 spec

as a series of modules being implemented separately

and independently from each other.

This has enabled portions of the spec to move faster,

which is great, because it has really encouraged browser vendors

to implement certain modules without having to wait for the entire spec

to be considered finished.

To follow the development of CSS 3 and view all completed specifications and drafts

you can visit the W3C at www.W3.org.

One of the most fundamental concepts of CSS is the cascade.

The cascade determines which style properties are assigned to an element

based on declarations that have cascaded down from other sources.

It's what allows us to set styles and keep them consistent throughout a website

without having to repeat them.

There are three main concepts

that determine which properties are assigned to an element--

importance, specificity, and source order.

The cascade then follows these three steps to determine which properties

to assign to an element.

Importance depends on the origin of the style sheet,

which can come from different sources,

such as user agent styles, user styles, and author styles.

User agent styles are the styles the browser applies by default.

Each browser has its own user agent style sheet,

and this is why there are some visual differences

when viewing a web page on different browsers.

User styles are the styles specified by the user.

Users can have special styles predefined that are different

from the browser's default styles.

These are are often times used for accessibility for people with special needs

who, for example, need larger font sizes, specific colors, or contrast.

Finally, author styles is the CSS in the HTML page specified by an author,

more likely the sites designer.

By default, rules in author style sheets have more weight

than user agent and user style sheets.

Specificity determines which CSS rule is applied by the browser.

As mentioned earlier, CSS rules have a particular weight defined

that determine which property will be applied to an element,

even when rules conflict.

Once the cascade decides the importance of a rule,

it then assigns a specificity to it.

If one is more specific than the other, it overrides it.

Later we'll discuss ways to calculate a selector's specificity.

Once you're familiar with how specificity works,

it can save you a lot of time customizing and troubleshooting your CSS.

Source order is the order in which styles are linked, included, or imported.

The order is important because the cascade assigns a priority to a rule

based on what order they appear.

If you have tooling styles sheets in the head section of the page,

the last one will take precedence over the first.

Or if two declarations affect the same element,

have the same importance and the same specificity,

the declaration that appears later in the style sheet will be applied.

After importance, specificity, and source order have been determined

a weight is assigned to each CSS rule.

The one with the greatest weight takes precedence when several rules are applied.

Inheritance means that the specified value of a property is copied from the value

of the parent element in the DOM tree.

When a property is said to be inherited,

it just means that the value will be determined by that inheritance

unless another property value is specified.

For example, if you set the body element of a page to a specified font,

that font will be inherited by other elements,

such as headings and paragraphs.

Not all properties are inherited,

but you can force them to be by using the inherited value,

which we'll go over later in detail.

CSS rules tell browsers how to render elements in an HTML document.

A CSS rule is comprised of two main parts--

the selector followed by one or more declarations.

CSS rules then apply the declarations listed to all elements matched by the selector.

A selector is a part of the CSS rule that matches

a set of elements in an HTML document.

Selectors can contain one or more simple selectors,

such as an h1 or a paragraph element,

also a class or an ID separated by combinators.

Combinators explain the relationship between the selectors.

Examples of combinators are white space, the greater than sign, or a plus sign.

We'll go over all the combinators in the selectors video.

Selectors can range from element names to contextual representations.

They are case sensitive, so they must match the element name exactly.

A declaration is the part of the rule that sits inside the curly braces.

It consists of a property name, followed by a value.

Multiple declarations can be made by

organizing them into semicolon-separated groups.

Properties are a set of parameters that define the rendering of a document.

They indicate the part of the element you want to change.

Each property is then followed by a value,

which specifies the settings you want to use for the property.

Before learning CSS, it's important to have at least a basic understanding of HTML

and the structure of a document.

So now that we've covered some basic concepts,

we're ready to start writing CSS.

In the next video, we'll go over the different ways we can apply CSS to a page.

[treehouse]