You've already started watching Introduction to CSS
This introduction is an overview of basic CSS concepts and terminology.
Reference
-
0:01
[Deep Dive: CSS Foundations, Introduction with Guil Hernandez]
-
0:06
CSS, which stands for Cascading Style Sheets,
-
0:10
is responsible for describing the presentation of HTML pages
-
0:14
and it defines how elements on a page are displayed.
-
0:18
Colors, font sizes, and page layout
-
0:20
are just a few of the presentational responsibilities of CSS.
-
0:25
With CSS we create rules to specify how contents should appear on a page.
-
0:30
We then associate those rules with HTML elements.
-
0:34
CSS was added by the W3C and HTML 4.0
-
0:38
to solve some development and maintenance problems
-
0:41
web developers were having at the time with HTML 3.2,
-
0:45
which had introduced several new presentational tags and attributes.
-
0:49
Because HTML was never intended to contain presentational tags
-
0:53
for formatting pages, such as the font and center tags,
-
0:57
it made it difficult and impractical to develop and maintain websites.
-
1:02
By separating the content from the presentation,
-
1:05
CSS made the development and maintenance of websites more efficient
-
1:09
by being able to share styles across multiple pages.
-
1:13
CSS also improved accessibility of web content
-
1:16
by allowing access and adaptability to various devices,
-
1:20
such as desktops, mobile devices, large screens, and printers.
-
1:26
Currently, CSS is the official complete web standards, with parts of the CSS 3 spec
-
1:33
in the recommendation stage--the stage where it's considered a final standard.
-
1:38
The good news is the W3C has split the CSS 3 spec
-
1:43
as a series of modules being implemented separately
-
1:46
and independently from each other.
-
1:48
This has enabled portions of the spec to move faster,
-
1:52
which is great, because it has really encouraged browser vendors
-
1:55
to implement certain modules without having to wait for the entire spec
-
1:59
to be considered finished.
-
2:02
To follow the development of CSS 3 and view all completed specifications and drafts
-
2:07
you can visit the W3C at www.W3.org.
-
2:11
One of the most fundamental concepts of CSS is the cascade.
-
2:15
The cascade determines which style properties are assigned to an element
-
2:19
based on declarations that have cascaded down from other sources.
-
2:23
It's what allows us to set styles and keep them consistent throughout a website
-
2:27
without having to repeat them.
-
2:29
There are three main concepts
-
2:30
that determine which properties are assigned to an element--
-
2:33
importance, specificity, and source order.
-
2:36
The cascade then follows these three steps to determine which properties
-
2:40
to assign to an element.
-
2:43
Importance depends on the origin of the style sheet,
-
2:46
which can come from different sources,
-
2:48
such as user agent styles, user styles, and author styles.
-
2:52
User agent styles are the styles the browser applies by default.
-
2:56
Each browser has its own user agent style sheet,
-
2:58
and this is why there are some visual differences
-
3:01
when viewing a web page on different browsers.
-
3:04
User styles are the styles specified by the user.
-
3:08
Users can have special styles predefined that are different
-
3:10
from the browser's default styles.
-
3:12
These are are often times used for accessibility for people with special needs
-
3:16
who, for example, need larger font sizes, specific colors, or contrast.
-
3:21
Finally, author styles is the CSS in the HTML page specified by an author,
-
3:26
more likely the sites designer.
-
3:28
By default, rules in author style sheets have more weight
-
3:31
than user agent and user style sheets.
-
3:36
Specificity determines which CSS rule is applied by the browser.
-
3:40
As mentioned earlier, CSS rules have a particular weight defined
-
3:43
that determine which property will be applied to an element,
-
3:46
even when rules conflict.
-
3:49
Once the cascade decides the importance of a rule,
-
3:52
it then assigns a specificity to it.
-
3:54
If one is more specific than the other, it overrides it.
-
3:57
Later we'll discuss ways to calculate a selector's specificity.
-
4:01
Once you're familiar with how specificity works,
-
4:03
it can save you a lot of time customizing and troubleshooting your CSS.
-
4:08
Source order is the order in which styles are linked, included, or imported.
-
4:13
The order is important because the cascade assigns a priority to a rule
-
4:17
based on what order they appear.
-
4:19
If you have tooling styles sheets in the head section of the page,
-
4:23
the last one will take precedence over the first.
-
4:26
Or if two declarations affect the same element,
-
4:29
have the same importance and the same specificity,
-
4:32
the declaration that appears later in the style sheet will be applied.
-
4:38
After importance, specificity, and source order have been determined
-
4:42
a weight is assigned to each CSS rule.
-
4:45
The one with the greatest weight takes precedence when several rules are applied.
-
4:50
Inheritance means that the specified value of a property is copied from the value
-
4:54
of the parent element in the DOM tree.
-
4:56
When a property is said to be inherited,
-
4:58
it just means that the value will be determined by that inheritance
-
5:01
unless another property value is specified.
-
5:04
For example, if you set the body element of a page to a specified font,
-
5:08
that font will be inherited by other elements,
-
5:11
such as headings and paragraphs.
-
5:13
Not all properties are inherited,
-
5:14
but you can force them to be by using the inherited value,
-
5:18
which we'll go over later in detail.
-
5:20
CSS rules tell browsers how to render elements in an HTML document.
-
5:25
A CSS rule is comprised of two main parts--
-
5:27
the selector followed by one or more declarations.
-
5:30
CSS rules then apply the declarations listed to all elements matched by the selector.
-
5:37
A selector is a part of the CSS rule that matches
-
5:40
a set of elements in an HTML document.
-
5:43
Selectors can contain one or more simple selectors,
-
5:45
such as an h1 or a paragraph element,
-
5:48
also a class or an ID separated by combinators.
-
5:52
Combinators explain the relationship between the selectors.
-
5:55
Examples of combinators are white space, the greater than sign, or a plus sign.
-
5:59
We'll go over all the combinators in the selectors video.
-
6:03
Selectors can range from element names to contextual representations.
-
6:07
They are case sensitive, so they must match the element name exactly.
-
6:12
A declaration is the part of the rule that sits inside the curly braces.
-
6:16
It consists of a property name, followed by a value.
-
6:19
Multiple declarations can be made by
-
6:21
organizing them into semicolon-separated groups.
-
6:24
Properties are a set of parameters that define the rendering of a document.
-
6:28
They indicate the part of the element you want to change.
-
6:31
Each property is then followed by a value,
-
6:33
which specifies the settings you want to use for the property.
-
6:37
Before learning CSS, it's important to have at least a basic understanding of HTML
-
6:42
and the structure of a document.
-
6:44
So now that we've covered some basic concepts,
-
6:46
we're ready to start writing CSS.
-
6:49
In the next video, we'll go over the different ways we can apply CSS to a page.
-
6:54
[treehouse]
You need to sign up for Treehouse in order to download course files.
Sign up