🌐
CSS Notes
CSS Crash Course
CSS Basics
Cascading Style Sheets - Primary styling language of the web.
It allows us to style our websites as well as describing the layout of how we want our
website to be presented such as the size and positioning of elements
Casading
The order that stylesheets are used. There are 3 main types of style sheets:
1.) User Agent Stylesheets: Contain browser defaults for styles, these get the lowest
level of precedence.
2.) User Stylesheets: Contain user preferences saved in the browser, which override
user agent stylesheets.
3.) Author Stylesheets: Contain the CSS code we write, these get the highest level of
precedence (assuming !important has not been used)
Declaration
CSS Notes 1
, CSS is just a collection of declarations. A declaration is a CSS property-value pair in the
form:
property: value;
Declaration block
A group of declarations surrounded by {}
Ruleset
A selector followed by a declaration block for styling elements matching the selector
with the declarations in the declaration block. Rulesets follow this syntax:
Comments
CSS Notes 2
, Linking To HTML
The link tag goes on the head. It uses the relationship attribute and the hypertext
reference attribute.
Selectors
A Pattern used at the beginning of a ruleset for choosing which elements will be affected
by the declarations.
Universal selector: * selects everything
CSS Notes 3
, Pseudo Classes And Elements
Pseudo classes are an addition to a CSS selector used for selecting based on the
current state of the element. These start with “:” e.g. button:hover would select buttons
currently hovered over
Pseduo elements are an addition to a CSS selector used for selecting a specific portion
of the element.
e.g. p::first-letter would select the first letter of the paragraphs.
::before and ::after are special pseudo elements that insert children before or after the
content of the element, allowing for styling before or after the content. This is often
times used with the CSS content property but not always.
Selector Specificity
What happens to conflicting declarations?
The highest weight is selected. The more specific one is used.
Specificity is roughly calculated by counting the number of each selector type involved
in a selector and multiplying by a weight. If weighting is the same it defaults to the last
rule in the stylesheet.
CSS Notes 4
CSS Notes
CSS Crash Course
CSS Basics
Cascading Style Sheets - Primary styling language of the web.
It allows us to style our websites as well as describing the layout of how we want our
website to be presented such as the size and positioning of elements
Casading
The order that stylesheets are used. There are 3 main types of style sheets:
1.) User Agent Stylesheets: Contain browser defaults for styles, these get the lowest
level of precedence.
2.) User Stylesheets: Contain user preferences saved in the browser, which override
user agent stylesheets.
3.) Author Stylesheets: Contain the CSS code we write, these get the highest level of
precedence (assuming !important has not been used)
Declaration
CSS Notes 1
, CSS is just a collection of declarations. A declaration is a CSS property-value pair in the
form:
property: value;
Declaration block
A group of declarations surrounded by {}
Ruleset
A selector followed by a declaration block for styling elements matching the selector
with the declarations in the declaration block. Rulesets follow this syntax:
Comments
CSS Notes 2
, Linking To HTML
The link tag goes on the head. It uses the relationship attribute and the hypertext
reference attribute.
Selectors
A Pattern used at the beginning of a ruleset for choosing which elements will be affected
by the declarations.
Universal selector: * selects everything
CSS Notes 3
, Pseudo Classes And Elements
Pseudo classes are an addition to a CSS selector used for selecting based on the
current state of the element. These start with “:” e.g. button:hover would select buttons
currently hovered over
Pseduo elements are an addition to a CSS selector used for selecting a specific portion
of the element.
e.g. p::first-letter would select the first letter of the paragraphs.
::before and ::after are special pseudo elements that insert children before or after the
content of the element, allowing for styling before or after the content. This is often
times used with the CSS content property but not always.
Selector Specificity
What happens to conflicting declarations?
The highest weight is selected. The more specific one is used.
Specificity is roughly calculated by counting the number of each selector type involved
in a selector and multiplying by a weight. If weighting is the same it defaults to the last
rule in the stylesheet.
CSS Notes 4
