WEB DEVELOPMENT
FRONT-END
CSS 101
SELECTORS
simple selectors
pseudo-class selectors
attribute selectors
pseudo-elements selectors
SIMPLE SELECTORS
/* universal selector */
* {
font-family: 'Roboto', sans-serif;
}
/* element selector */
h1 {
color: red;
}
/* id selector */
h1#promoted {
color: green;
}
/* class selector */
h1.featured {
color: blue;
}
ATTRIBUTE SELECTORS
/* basic attribute value selector */
[type="text"] {
border: 1px solid black;
}
/* attribute value exact or starts 'val-' */
[attr|=val]
/* attribute value exact or starts with 'val' */
[attr^=val]
/* attribute value exact or ends with 'val' */
[attr$=val]
/* attribute value contains 'val' */
[attr*=val]
PSEUDO-CLASS SELECTORS
/* match the hovering state of a link */
a:hover {
color: blue;
font-size: 30px;
}
PSEUDO-ELEMENTS SELECTORS
/* add a character after each link */
a::after {
content: '⤴';
}
COMBINING SELECTORS
/* all h1 and h2 are red */
h1, h2 {
color: red;
}
/* all h1 in an article are red */
article h1 {
color: red;
}
/* only h2 that come after an h1 are red */
h1 + h2 {
color: blue;
}
/* all h3 that come after an h1 are red */
h1 ~ h3 {
color: green;
}
PROPERTIES
- Text and fonts
- Colors and backgrounds
- Box model manipulation
- Visual formatting
- Generated content and lists
- Tables
- Paged media
- Transitions
- Transformations
- Other
VALUES
numeric
percentage
predefined list
colors
functions
NUMERIC VALUES
absolute
relative
px
em
unitless
0
multipliers
animations
degrees
seconds
timing functions
PERCENTAGE VALUES
LIST VALUES
COLOR VALUES
color system | example |
---|---|
hexaecimal | #FF0000 |
rgb | rgb(255, 0, 0) |
hsl | hsl(0, 100%, 50%) |
rgba | rgba(255, 0, 0, 1) |
hsla | hsla(0, 100%, 50%, 1) |
FUNCTION VALUES
rgb()
hsl()
calc()
Q&A
THANK YOU!
WEBDEV-FE-L6 - CSS 101
By Alex Albu
WEBDEV-FE-L6 - CSS 101
- 425