CSS is a language for specifying how documents (HTML) are presented (HTML will be presented by browsers) to users
CSS is used to style and lay out web pages — for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.
Example: [data-id='some-id']
The equals sign in attribute selectors may be prefaced by other characters which alter the meaning a bit.
| Symbol | meanings |
|---|---|
| "*=" | Match the following value anywhere in the attribute value |
| "^=" | Attribute begins with certain value |
| "$=" | Attribute ends with certain value |
| "~=" | Space separated list |
| "|=" | within dash separated list |
A CSS pseudo-class is a keyword added to the end of a selector, preceded by a colon (:), which is used to specify that you want to style the selected element but only when it is in a certain state.
Typical Pseudo-classes:
| Symbol | trigger cases | common use tags | |
|---|---|---|---|
| :link | represents an element that has not yet been visited | <a> <area> <link> | |
| :visited | represents links that the user has already visited | <a> <area> <link> | |
| :hover | matches when the user interacts with an element with a pointing device, but does not necessarily activate it. | most elements | |
| :active | When using a mouse, "activation" typically starts when the user presses down the primary mouse button. | <a> <button> form elemnt with associated <label> | |
| :checked | represents any radio, checkbox, or option element that is checked or toggled to an on state. | <input type="radio"> <input type="checkbox"> <option> in a <select> |
|
| :first-child | represents the first element among a group of sibling elements. | most elements | |
| :nth-child | matches elements based on their position in a group of siblings. | most elements start with 1 | |
| :not | represents elements that do not match a list of selectors. | most elements |
Order: :link :visited :hover :active
For privacy reasons, the styles that can be modified using this selector are very limited.
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.
| Symbol | trigger cases |
|---|---|
| ::after | creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. |
| ::before | creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. |
| ::first-letter | applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). |
| ::first-line | applies styles to the first line of a block-level element. |
| ::selection | applies styles to the part of a document that has been highlighted by the user |
| ::backdrop | is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen mode. T |
| Symbol | meanings |
|---|---|
| space | descendant selector |
| > | child selector |
| + | adjacent sibling selector |
| ~ | general sibling selector |
Multiple selectors which will include all above rule.
Pixels(px): are referred to as absolute units because they will always be the same size regardless of any other related settings.
em: 1 em = 16px by default; NOTE: ems are the most common relative unit you'll use in web development.
rem: 1 rem = 16px called root em.
vw, vh: Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport.
line-height: 1.5; // the times of font-size
width: 50%; // 1⁄2 width of its container
CSS functions are used as a value for various CSS properties.
| Function | Description | Examples | |
|---|---|---|---|
| attr() | Returns the value of an attribute of the selected element | a:after { content: " (" attr(href) ")"; } | |
| calc() | Allows you to perform calculations to determine CSS property values | width: calc(100% - 100px); | |
| hsl() | Defines colors using the Hue-Saturation-Lightness model (HSL) | background-color:hsl(120,100%,50%); | |
| hsla() | Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA) | background-color:hsla(120,100%,50%,0.3); | |
| linear-gradient() | Sets a linear gradient as the background image. Define at least two colors (top to bottom) | linear-gradient(red, yellow, blue); | |
| rgb() | Defines colors using the Red-Green-Blue model (RGB) | background-color:rgb(255,0,0); | |
| rgba() | Defines colors using the Red-Green-Blue-Alpha model (RGBA) | background-color:rgb(255,0,0, 0.3); | |
| var() | Inserts the value of a custom property | :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); } |
|
| url() | Defines resource path | background-image:url(../asset/image1.png); |
What selectors win out in the cascade depends on three factors (these are listed in order of weight
-- earlier ones will overrider later ones
Specificity is basically a measure of how specific a selector is — how many elements it could match.
Inline style > Id > Class == Attribute == pseudo-class > simple element
1000 => 100 => 10 => 1
All elements could inherite:
Inline elements could inherite:
Block elements could inherite:
List elements could inherite:
Table elements could inherite:
Some css could not be inheritance from the element’s parent like:
CSS PropertiesThe CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Margins have a specific behavior called margin collapsing: When two boxes touch against one another, the distance between them is the value of the largest of the two touching margins, and not their sum.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.
is positioned relative to its normal position.
is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
If an element is taller than the element containing it, and it is floated, it will "overflow" outside of its container