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

1. CSS
Nico Abel Laia
Front End Web Developer
In Depth

2. CSS Syntax
What is it?

3. What is it?
CSS selectors define the pattern to select elements to
which a set of CSS rules are then applied.
Selector

4. This is
Selector

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

6. 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

8. ID
Selector

9. What is it?
The tag selector selects HTML elements based on the
element name.
Tag Selector

10. Tag
Selector

11. CSS In UI Desain Aspects
What is it?

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?

18. Examples
Why color schemes is important

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

21. Typography

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?

23. Typography Size
What is it?

24. Typography Style
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

27. Font-size
We can define font size units with em, rem, px, mm,
percentage, and so on.

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

29. Shorthand of font-style,
font-weight,
font-variant, font-size
and font-family, so that
the writing of these
properties can be
shortened by using only
one property.
Shorthand

30. Layouting

31. Layout Region
Layout regions are the foundation for interactive experiences.
What is it?

32. Layout Region
Website Chatting App
1. Sidebar
2. Navigation
3. Body
What is it?

33. Example
Layout Region

34. Layouting
Definition
Layouting is managing
the position of content in
website.

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

36. 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

38. Box Model
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

39. Padding and Margin
Definition
Padding = the area between element border and content
Margin = the area between border and the edge of
element

40. Padding and Margin

41. Flexbox
Subtitle
Flexbox is a flexible box that can be used to set up element with container.

42. Flexbox
How to Use

43. Flexbox
flex-direction

44. Flexbox
flex-direction

45. Flexbox
flex-grow

46. Flexbox
flex-grow

47. Flexbox
flex-shrink

48. Flexbox
flex-shrink

49. Flexbox
flex-wrap

50. Flexbox
flex-wrap

51. Flexbox
flex-flow

52. Flexbox
flex-basis

53. Flexbox
flex-basis

54. Flexbox
flex

55. Flexbox
justify-content

56. Flexbox
justify-content

57. Flexbox
align-items

58. Flexbox
align-items

59. Grid
Subtitle
Grid in CSS almost similar to
flexbox, but grid used to set
the two dimensional layout
because it can handle
column and row

60. Grid
How to use

61. Grid

62. Grid
grid-column

63. Grid
grid-row

64. Grid
grid-template-columns

65. Grid
grid-template-column

66. Grid
grid-template-rows

67. Grid
grid-template-row

68. Grid
grid-gap

69. Shape

70. Shapes within the UI help
unite brand expression
across the UI.

71. Components with unique
shapes can attract attention
so they can be used for
important elements.

72. Types of Shape Scales

73. Types of Shape Scales

74. Elevation

75. Elevation
Elevation is the relative distance
between two surfaces along the
z-axis or depth.
Definition

76. Elevation

77. Elevation
text-shadow

78. Elevation
text-shadow

79. Elevation
box-shadow

80. Elevation
box-shadow

81. Thankyou
- GDSC Matana University