Cascading Style Sheets provide an additional layer of visual styling over HTML Document Object Model elements, in a hierarchical, forward applied, declarative manner.
- Styles cascade
- Styles which are defined can replace previously defined styles
- Styles can be declared
- inside the head of the HTML within style tags
<head> <style>...</style> </head> - inside the body of the HTML within style tags
<body> <style>...</style> </body> - inline within HTML tags
<input style="..." /> - (Best Practice)
externally in files which are referenced and linked to the HTML document inside the HTML head
<head> ... <link rel="stylesheet" href="site-styles.css"> ... </head>
- inside the head of the HTML within style tags
- Styles modify the appearance of HTML DOM elements using selectors which match to tags, attributes, and behaviors on HTML
- Styles effect DOM element properties
- Styles are context specific, in that:
- a single style may alter the appearance of zero, one or more multiple elements
- multiple styles may modify the appearance of any one DOM element
- one style may obscure the visual appearance effects of other styles
- some DOM elements do not support the style specific declarations intended for other DOM element tag types
- some browsers interpret the style declarations of CSS in different ways
CSS Comments
CSS Selectors
Basic CSS Selectors
| syntax | type | description |
|---|---|---|
p { ... } |
element selector | All document tags of specified type will be effected |
#idValue { ... } |
id selector | Any document tags with specified id (typically one) will be effected |
.classValue { ... } |
class selector | Any document tags with specified class will be effected |
[attr=value] { ... } |
attribute selector | Any document tags with specified attribute having specified value |
Combinator Selectors
| syntax | type | description |
|---|---|---|
selectorA + selectorB { ... } |
adjacent sibling selector | Any tag matching selector B which is immediately adjacent to a DOM element matching selector A on the same depth of the DOM, inside the same parent |
selectorA ~ selectorB { ... } |
general sibling selector | Any tag matching selector B which is adjacent (but not necessarily immediately adjacent) to a DOM element matching selector A on the same depth of the DOM, inside in the same parent |
parent > child { ... } |
direct child selector | Any specified element which is direct child of a parent tag |
parent descendant { ... } |
descendant selector | Any tag matching selector B which is adjacent (but not necessarily immediately adjacent) to a DOM element matching selector A on the same depth of the DOM, inside in the same parent |
parent descendant { ... } |
descendant selector | Any tag matching selector B which is adjacent (but not necessarily immediately adjacent) to a DOM element matching selector A on the same depth of the DOM, inside in the same parent |
Pseudo Selectors
| syntax | type | description |
|---|---|---|
<optional>:active { ... } |
active selector | Applies the style to a DOM element which the user is activating, i.e. click on button |
<optional>:focus { ... } |
focus selector | Applies the style on a DOM element which has the current browser focus, i.e. cursor in text box |
<optional>:hover { ... } |
hover selector | Applies the style when the mouse cursor is over an element |
<optional>:visited { ... } |
visited selector | Applies the style on a link when the browser history remembers a visit to the destination URL |
<required>:first-of-type { ... } |
first-of-type selector | Applies the style to the first element of a type |
<required>:nth-of-type(p) { ... } |
nth-of-type selector | Applies style to an element using an order condition, where p is comprised of “a” is an integer value “n” is the literal letter “n”, used to skip “+” is an operator and may be either “+” or “-“ “b” is an integer and is required if an operator is included in the formula |
<required>:last-of-type { ... } |
last-of-type selector | Applies the style the last element of a type |
<required>:n-last-of-type(p) { ... } |
nth-last-of-type selector | Applies style to an element using a reverse order condition, where p is comprised of “a” is an integer value “n” is the literal letter “n”, used to skip “+” is an operator and may be either “+” or “-“ “b” is an integer and is required if an operator is included in the formula |
<required>:nth-child(p) { ... } |
nth-child selector | Applies style to a child element using an order condition, where p is comprised of “a” is an integer value “n” is the literal letter “n”, used to skip “+” is an operator and may be either “+” or “-“ “b” is an integer and is required if an operator is included in the formula |
Pseudo Elements
| syntax | type | description |
|---|---|---|
<required>::after { content: '...' } |
after pseudo element | Add content directly after a matching selector matched element |
<required>::before { content: '...' } |
before pseudo element | Add content directly before a matching selector matched element |
CSS Properties
Text Properties
| property | description |
|---|---|
| color | - |
| font | - |
| font-family | - |
| font-size | - |
| font-weight | - |
| letter-spacing | - |
| line-height | - |
| text-align | - |
| text-decoration | - |
| text-indent | - |
| text-transformation | - |
| vertical-align | - |
List Properties
| property | description | Syntax | Applies to |
|---|---|---|---|
| list-style | Shorthand to set list-style-type, list-style-image, and list-style-position | List items | |
| list-style-image | Used to set an image as the list item marker | url("..."), none |
List items |
| list-style-position | Positions a marker relative to list items | inside, outside, inherit, initial, unset |
List items |
| list-style-type | Sets the marker shape | See spec | List items |
Background Properties
| property | description |
|---|---|
| background | |
| background-attachment | |
| background-color | |
| background-image | |
| background-position | |
| background-repeat |
Display Properties
| property | description | Value | Applies to |
|---|---|---|---|
| display | Switch between inline and block, and dictate the behavior for children | See spec | All elements |
| float | Pushes an element left or right to allow text to wrap around it | left, right, none, inline-start, inline-end |
All elements |
| clear | Asserts that an element should be moved below floating content | none, left, right, both, inline-start, inline-end |
Block level |
| overflow | When text is too large for the container | visible, hidden, clip, scroll, auto |
Block, Flex, Grid |
| visibility | show or hide an element | visible, hidden, collapse |
All elements |
Box Properties
| property | description |
|---|---|
| border | |
| border-color | |
| border-style | |
| border width | |
| height | |
| width | |
| padding | |
| margin | |
| box-sizing |
Position Properties
| property | description |
|---|---|
| position | |
| top | |
| bottom | |
| left | |
| right | |
| z-index |
Other Properties
| property | description |
|---|---|
| cursor |
Summary
Here’s a summary of the CSS3 Cheat Sheet, which covers some of the most commonly used CSS3 properties and their syntax:
Selectors:
Universal selector: *
Type selector: element
Class selector: .classname
ID selector: #id
Descendant selector: element element
Child selector: element > element
Attribute selector: [attribute=value]
Pseudo-class selector: :pseudo-class
Box Model:
width: Sets the width of an element.
height: Sets the height of an element.
margin: Sets the outer margin of an element.
padding: Sets the inner padding of an element.
border: Sets the border properties of an element.
box-sizing: Defines how the width and height of an element are calculated.
Positioning:
position: Specifies the positioning method (static, relative, absolute, fixed).
top, right, bottom, left: Specifies the offset of a positioned element.
z-index: Specifies the stacking order of positioned elements.
Typography:
font-family: Sets the font family for text.
font-size: Sets the font size.
font-weight: Sets the font weight (bold, normal).
font-style: Sets the font style (italic, normal).
text-align: Aligns text (left, right, center, justify).
text-decoration: Sets text decorations (underline, line-through).
Colors and Backgrounds:
color: Sets the text color.
background-color: Sets the background color.
background-image: Sets the background image.
background-size: Defines how the background image is sized.
background-position: Sets the starting position of the background image.
Display and Layout:
display: Specifies the display type of an element (block, inline, inline-block).
float: Allows an element to be floated to the left or right.
clear: Specifies which sides of an element other floating elements are not allowed.
overflow: Defines how content that overflows an element is handled.
flexbox: A flexible box layout model to create responsive layouts.
grid: A grid layout model to create grid-based layouts.
Transitions and Animations:
transition: Specifies transition properties (property, duration, timing function).
transform: Applies transformations (translate, rotate, scale, etc.) to elements.
animation: Specifies animations (name, duration, timing function, etc.).
Media Queries:
@media: Defines styles for specific device characteristics or screen sizes.
These are just some of the key properties and concepts in CSS3. CSS3 offers many more features and options for styling and layout, allowing developers to create visually appealing and responsive web pages.