CSS selectors define patterns to select elements to which CSS rules are applied. The class selector selects elements based on the class attribute, using a period before the class name. The ID selector selects elements based on the ID attribute, using a # before the ID name. The tag selector selects elements based on the element name. Color schemes handle dynamically changing colors as user inputs change, with primary, secondary, tertiary, and neutral colors used for key components. Typography includes font properties like font-family, size, weight, style, and more to arrange text on a page. Layouting manages element positioning using regions, the box model of margins, borders, padding, and content, and flexbox and grid for flexible and grid
5. What is it?
The class selector sets the target element based on the
value of the class attribute applied to the element. To
write a selector, start with a period (.) then continue with
the class name.
Class Selector
7. What is it?
The ID selector is same like a class, sets the target
element based on the value of the id attribute applied to
the element, but we have to use # to select the id.
ID Selector
12. Color System
The color system handles the variability of dynamically changing color schemes
that arise as user inputs change.
Color schemes can be considered a cohesive group of relative tones, rather
than a fixed group of constant values.
What is it?
13. Color System
The color system handles the variability of dynamically changing color schemes
that arise as user inputs change.
What is it?
14. Primary Color
The primary key color is used to derive roles for key components across the UI,
such as the FAB, prominent buttons, active states, as well as the tint of elevated
surfaces.
What is it?
15. Secondary Color
The secondary key color is used for less prominent components in the UI such
as filter chips, while expanding the opportunity for color expression.
What is it?
16. The Tertiary Key Color
The tertiary key color is used to derive the roles of contrasting accents that can
be used to balance primary and secondary colors or bring heightened attention
to an element.
What is it?
17. Neutral Color
The neutral key color is used to derive the roles of surface and background, as
well as high emphasis text and icons.
What is it?
19. What is it?
● Hex
○ Hexadesimal
● RGB
○ Red Green Blue
● RGBA
○ Red Green Blue Alpha
● HSL
○ Hue Saturation Lightness
● HSLA
○ Hue Saturation Lightness Alpha
Color in CSS
20. What is it?
This is how to make a paragraph
color black
Color in CSS
22. Typography
Typography is the art and technique of arranging type on a website. It's not only
about the design or composition of the letters and characters and their
arrangement.
What is it?
25. Some font properties in CSS :
1. font-family
2. font-size
3. font-weight
4. line-height
5. text-align
6. text-transform
7. text-decoration
8. font
Typography in CSS
26. Several values can be written so that if the font
type at value 1 is not supported by the browser
used, then there are alternatives at value 2, value
3, and so on.
Font-family
28. The size of the font weight is determined by the
numbers 100 to 900. However, the thickness of the
text can also be specified by 'normal', 'bold',
'bolder' and 'lighter'.
Font-weight
35. Box Model
The CSS box model is essentially a box that wraps
around every HTML element. It consists of: margins,
borders, padding, and the actual content.
Box Model
37. Box Model
● Content - The content of the box, where text and images appear
● Padding - Clears an area around the content. The padding is transparent
● Border - A border that goes around the padding and content
● Margin - Clears an area outside the border. The margin is transparent
Explanations
