Web technologies-course 03

2. COURSE 03
CSS
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

3. C03 – CSS
• Introduction
• Including CSS in HTML
pages
• CSS syntax
• CSS selectors
• IDs and classes
• Combining selectors
• Pseodo-element
selectors
• Selector priority
• Inheritance
• Styling color
• Styling font
• Specifying dimensions
• Borders, padding and
margins
• Positioning elements
• Adding opacity and
shadows

4. CSS
• Cascading Style Sheets (CSS) is a style sheet
language used for describing the presentation
of a document written in a markup language
like HTML
• CSS is a cornerstone technology of the World
Wide Web, alongside HTML and JavaScript

5. HTML + CSS
HTML HTML +
CSS

6. HTML + CSS

7. HTML + CSS

8. CSS
• The “cascade” part of CSS is a set of rules for
resolving conflicts with multiple CSS rules
applied to the same elements
• For example, if there are two rules defining the
color of an element, the rule that comes last in
the cascade order will “trump” the other

9. STYLING HTML
• HTML tags can be used to style HTML
• However, they shouldn’t be used
• Most formatting attributes have been deprecated in
HTML5

10. STYLING HTML
• Separation of concerns:
• HTML – structure of the webpage
• CSS – style of the webpage

11. STYLING HTML
HTML
CSS
Rendered
page

12. INCLUDING CSS IN WEB PAGES
• Inlining styles – style is defined when the element
is defined

13. INCLUDING CSS IN WEB PAGES
• Using the <style></style> tags in the head of
the HTML document

14. INCLUDING CSS IN WEB PAGES
• Using a separate linked stylesheet – most
commonly used
index.html myStyles.css

15. CSS SYNTAX
• Three terms for describing your styles
• CSS rule
• CSS selector
• CSS declaration

16. CSS RULE
• Every style is defined by a selector and a
declaration
• The declaration contains at least one property:
value pair. Together they are called a CSS rule
selector {
property1: value1;
property2: value2;
…
propertyn: valuen;
}
declaration

17. CSS SELECTOR
• The selector associates CSS rules with HTML
elements

18. CSS SELECTOR
• The selector is typed in front of the
declaration, with a space separating it and the
opening curly-bracket (aka curly-brace)
• Typically, extra indentation and returns are
added as shown for the sake of readability

19. CSS SELECTOR
• You can apply styles to multiple selectors in
the same rule by separating the selectors with
commas

20. CSS DECLARATION
• You can apply multiple declarations to a
selector by separating the declarations with
semi-colons.

21. CSS SELECTORS
• There are three categories of CSS selectors
• All (*)
• Type (element)
• ID
• Class

22. * SELECTOR
• Selects all elements on the web page
HTML CSS

23. TYPE (ELEMENT) SELECTORS
• The simplest selector is the type selector,
which targets an HTML element by name

24. ID SELECTORS
• An ID is an HTML attribute that is added to
your HTML markup
• You reference that ID in your CSS with a hash
(#)
• IDs should be unique in your HTML/CSS
HTML CSS

25. CLASS SELECTORS
• A class is an HTML attribute that is added to
your HTML markup
• You reference that class in your CSS with a
period (.)
HTML CSS

26. IDS VS. CLASSES
• The most important difference between IDs
and classes is that there can be only one ID
assigned to an element, but multiple classes
• An ID is more specific than a class
• An element can have both an ID and multiple
classes

27. IDS VS. CLASSES

28. IDS VS. CLASSES
HTML
CSS

29. IDS VS. CLASSES
HTML
CSS
What color will the paragraph
text be?
ID > class

30. MULTIPLE CLASSES
• Elements can have multiple classes, giving you
more control
HTML
CSS

31. SELECTOR COMBINATIONS
• Element+.class
HTML CSS

32. SELECTOR COMBINATIONS
• Element+.class
HTML CSS

33. SELECTOR COMBINATIONS
• .class+.class
HTML CSS

34. SELECTOR COMBINATIONS
• selector, selector
HTML CSS

35. DESCENDANT SELECTORS
• selector selector
HTML CSS

36. ADJACENT SELECTORS
• selector ~ selector (all adjacent)
HTML CSS
adjacent

37. ADJACENT SELECTORS
• selector + selector (directly adjacent)
HTML CSS
directly
adjacent

38. PSEUDO-ELEMENT SELECTORS
• :after
• :before
• :first-line
• :first-letter
• :selection

39. PSEUDO-ELEMENT SELECTORS
HTML CSS

40. PSEUDO-ELEMENT SELECTORS
• [attribute]
• [attribute=“exact-value”]
• [attribute*=“contains-value”]
• [attribute^=“begins-value”]

41. PSEUDO-ELEMENT SELECTORS
HTML
CSS

42. PSEUDO-CLASSES
• :active
• :link
• :visited
• :hover
• :focus
• … and many more

43. PSEUDO-CLASSES
• :first-child
• :last-child
• :only-child
• :nth-child(n)
• :nth-last-child(n)

44. PSEUDO-CLASSES
HTML CSS

45. SELECTOR PRIORITY
• Last loaded selector will trump any other
HTML CSS

46. SELECTOR PRIORITY
• Last loaded selector will trump any other
HTML CSS

47. SELECTOR PRIORITY
• Last loaded selector will trump any other
HTML CSS

48. CASCADING PRIORITY
Browser stylesheet
Linked (external) stylesheet
Embedded (internal) styles
Inline (internal) styles

49. INHERITANCE
• Most elements will inherit many style
properties from their parent elements by
default

50. !IMPORTANT SPECIFIER
• The !important specifier can be used to
override normal cascading and inheritance
• Normal use case: never!
HTML
CSS

51. !IMPORTANT SPECIFIER
• The !important specifier can be used to
override normal cascading and inheritance
• Normal use case: never!
HTML
CSS

52. APPLYING COLOR
• color – text color
• background-color – background color
(duuuh…) HTML CSS

53. APPLYING COLOR
• There are 3 main ways to set color:
• By name: red, white, blue, magenta, etc.
• By hex-RGB values: #006699, #123456, #FFAACC
• By RGB(A) values: rgb(0, 66, 99), rgba(123, 255, 0,
0.5)
• By HSL values: hsl(100, 66%, 99%), hsl(360, 55%, 0%)

54. APPLYING COLOR
• Use any color picker from the Internet (e.g.:
w3schools)

55. APPLYING COLOR
• Or just ask
Google
Assistant to
show you a
Color Picker

56. APPLYING COLOR
HTML CSS

57. FONT ATTRIBUTES
• For fonts, we generally want to style the
following:
• color: color
• size: font-size
• effect: font-weight, font-style, text-
decoration
• family: font-family

58. FONT-SIZE
• font-size
• pixels: px
• relative size of the element: em
HTML

59. FONT-SIZE
CSS

60. FONT-WEIGHT, FONT-STYLE,
TEXT-DECORATION
CSS

61. FONT-FAMILY
• For the font family you can (and should)
specify, in order:
• The exact font name
• A fallback font name or font family
• A generic font type (if none of the above are
available)
• You can also import font from other font
repositories (like Google Fonts)

62. FONT-FAMILY
CSS
Font to use
Fallback
Generic
(built-in
browser)

63. SPECIFYING DIMENSIONS
• You can specify dimensions (width and/or
height) to most HTML elements in:
• pixels
• percentages (of current viewport)
• You can also specify a maximum width of
length

64. SPECIFYING DIMENSIONS
HTML
CSS

65. SPECIFYING DIMENSIONS
HTML
CSS
The div will take up 50%
of the viewport until it
reaches 200px in width
and then it will stop
growing

66. MEASUREMENT UNITS IN CSS
Unit Description Example
% Defines a measurement as a percentage relative to another
value, typically an enclosing element.
p {
font-size: 16pt;
line-height: 125%;
}
px Defines a measurement in screen pixels. p {
padding: 25px;
}
em A relative measurement for the height of a font in em spaces.
Because an em unit is equivalent to the size of a given font, if
you assign a font to 12pt, each "em" unit would be 12pt; thus,
2em would be 24pt.
p {
letter-spacing: 7em;
}
rem Similar to “em” but while em is relative to the font-size of its
direct or nearest parent, rem is only relative to the html (root)
font-size.
p {
letter-spacing: 7rem;
}
cm/mm
/in
Defines a measurement in centimeters, millimeters or inches p {
word-spacing: 15mm;
}
pt Defines a measurement in points. A point is defined as
1/72nd of an inch.
body {
font-size: 18pt;
}
ex This value defines a measurement relative to a font's x-
height. The x-height is determined by the height of the font's
lowercase letter x.
p {
font-size: 24pt;
line-height: 3ex;
}

67. Margin
Border
Padding
BORDERS, PADDING, MARGINS
Conte
nt

68. BORDERS, PADDING, MARGINS
HTML CSS

69. BORDERS, PADDING, MARGINS
HTML CSS

70. BORDERS, PADDING, MARGINS
HTML CSS
Note: CSS comments are
just like C/C++ block
comments /* */

71. BORDERS, PADDING, MARGINS
HTML CSS

72. BORDER-RADIUS
HTML CSS

73. BORDER-RADIUS
HTML CSS

74. BORDER-RADIUS
HTML CSS

75. POSITIONING
• There are four basic types of positions in CSS
• Static
• Relative
• Absolute
• Fixed

76. POSITIONING
HTML CSS
default positioning is

77. POSITIONING
HTML CSS
With relative positioning you can
move an element from where it’s

78. POSITIONING
HTML CSS
Pay special attention when
using negative positioning
values!

79. POSITIONING
HTML CSS
Absolute positioning will place the element to the
specified location relative to the parent element (the
entire HTML document, in this case).

80. POSITIONING
HTML CSS
Fixed positioning will place the element relative to the
current viewport.
The element will stay in that position even if the page is

81. OPACITY
HTML CSS

82. OPACITY
HTML CSS

83. SHADOW
HTML CSS
Well, that looks like 💩, doesn’t it?

84. SHADOW
HTML CSS
Little bit better…

85. SHADOW
CSS
Blur
attribute

86. CHANGING CURSORS
• CSS can control the look of the cursor using the cursor
attribute CSS
HTML

87. BIBLIOGRAPHY
• https://www.w3schools.com/css/default.asp
• https://www.w3schools.com/css/css_syntax.as
p
• https://www.w3schools.com/cssref/css_selecto
rs.asp
• https://www.w3schools.com/css/css_pseudo_el
ements.asp
• https://www.w3schools.com/css/css_pseudo_cl
asses.asp
• https://www.w3schools.com/colors/default.asp

88. COURSES
Available online at:
http://www.ael.utcluj.ro/
Information for Students -> Courses -> Web
Technologies