1. Web technologies
Tehnologii web

2. Course 03 CSS lect. eng. Rajmond JÁNÓ, PhD
fb.com/janorajmond
Room E05

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
CSS
HTML
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. What color will the paragraph text be?
IDs vs. Classes
ID > class
HTML
CSS
What color will the paragraph text be?

30. Multiple Classes
Elements can have multiple classes, giving you more control
CSS
HTML

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

37. ADJACENT Selectors selector + selector (directly adjacent) HTML CSS

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!
CSS
HTML

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

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. Generic (built-in browser)
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
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.
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.
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.
letter-spacing: 7rem;
cm/mm/in
Defines a measurement in centimeters, millimeters or inches
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.
font-size: 24pt;
line-height: 3ex;

67. Borders, padding, Margins
Content

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 static

77. Positioning
HTML
CSS
With relative positioning you can move an element from where it’s supposed to be

78. Pay special attention when using negative positioning values!
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).
Note that it takes the element out of the normal document flow.

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 scrolled/resized

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 HTML
CSS can control the look of the cursor using the cursor attribute
CSS
HTML

87. Bibliography https://www.w3schools.com/css/default.asp

88. Courses
Available online at: Information for Students -> Courses -> Web Technologies