Web technologies-course 04

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

3. C04 – CSS
• Animations
• CSS variables
• Media queries
• Floats and displays
• Flexbox
• CSS grid
• Importing CSS files
• CSS browser support
• Example - log in styling

4. ANIMATIONS
• Certain HTML elements can be animated using
CSS properties
HTML

5. ANIMATIONS
CSS

6. ANIMATIONS
CSS

7. CSS VARIABLES
• CSS variables can be used to store CSS
attribute values
• These can help maintain and easily update
code
• To declare a variable use the following syntax:
• To read a variable use:
fallback

8. CSS VARIABLES
HTML
CSS

9. CSS VARIABLES
HTML
CSS

10. CSS VARIABLES
HTML
CSS

11. CSS MEDIA QUERIES
• The @media rule is used in media queries to apply
different styles for different media types/devices.
• Media queries can be used to check many things, such
as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait
mode?)
• resolution
• Using media queries are a popular technique for
delivering a tailored style sheet (responsive web design)
to desktops, laptops, tablets, and mobile phones.

12. CSS MEDIA QUERIES
• You can also use media queries to specify that
certain styles are only for printed documents or for
screen readers (mediatype: print, screen, or
speech)
• In addition to media types, there are also media
features. Media features provide more specific
details to media queries, by allowing to test for a
specific feature of the user agent or display device.
For example, you can apply styles to only those
screens that are greater, or smaller, than a certain
width

13. CSS MEDIA QUERIES
• Media queries can be used to interrogate
different properties of the browser and adapt
to changing environments
• These can be efficiently combined with CSS
variables to create responsive web pages

14. CSS MEDIA QUERIES
• Syntax
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}

15. CSS MEDIA QUERIES
HTML CSS

16. FLOATS AND DISPLAYS
HTML CSS

17. FLOATS AND DISPLAYS
HTML CSS

18. FLOATS AND DISPLAYS
HTML CSS

19. FLOATS AND DISPLAYS
CSS
You can use
display: none;
to hide elements from your
page

20. FLEXBOX
• The display: flex styling can be used to display
an element as a block-level flex container
HTML CSS

21. FLEXBOX
CSS

22. FLEXBOX
CSS

23. FLEXBOX
CSS

24. FLEXBOX
CSS

25. FLEXBOX
CSS

26. FLEXBOX
CSS

27. FLEXBOX
CSS

28. FLEXBOX
CSS
The flex-grow property
can be used in a similar
fashion.

29. FLEXBOX
CSS
Why aren’t the divs
rendered?

30. FLEXBOX
CSS

31. FLEXBOX
CSS

32. FLEXBOX – EXAMPLE #1
HTML
Challenge: make the
textboxes take up the
whole width of the
remaining space
CSS

33. FLEXBOX – EXAMPLE #1
CSS
HTML

34. FLEXBOX – EXAMPLE #2
HTML CSS

35. FLEXBOX – EXAMPLE #2
HTML CSS

36. FLEXBOX – EXAMPLE #2
HTML CSS

37. FLEXBOX – EXAMPLE #2
HTML CSS

38. FLEXBOX – EXAMPLE #2
HTML CSS

39. FLEXBOX – EXAMPLE #2
HTML CSS

40. FLEXBOX – EXAMPLE #2
HTML CSS

41. FLEXBOX – EXAMPLE #2
HTML CSS

42. FLEXBOX – EXAMPLE #3
HTML CSS

43. FLEXBOX – EXAMPLE #3
HTML CSS

44. FLEXBOX – EXAMPLE #3
HTML CSS

45. FLEXBOX – EXAMPLE #3
HTML CSS

46. FLEXBOX – EXAMPLE #3
HTML CSS

47. FLEXBOX – EXAMPLE #3
HTML CSS

48. FLEXBOX – EXAMPLE #3
HTML CSS
flex-basis:
30%;
would be
better

49. FLEXBOX – EXAMPLE #3
HTML CSS

50. FLEXBOX – EXAMPLE #3
Works fine on large screens,
however it really doesn’t look
good on small displays (e.g.:
mobile phones).
How do we fix this?

51. FLEXBOX – EXAMPLE #3
CSS

52. FLEXBOX – EXAMPLE #4
CSS
HTML

53. FLEXBOX – EXAMPLE #4
CSS
HTML

54. FLEXBOX – EXAMPLE #5
CSS
HTML

55. FLEXBOX – EXAMPLE #5
CSS
HTML

56. FLEXBOX – EXAMPLE #5
CSS
HTML

57. CSS GRID
• The CSS Grid Layout Module offers a grid-
based layout system, with rows and columns,
making it easier to design web pages without
having to use floats and positioning
• We can use display: grid in order to activate a
grid layout

58. CSS GRID
HTML CSS

59. CSS GRID CSS

60. CSS GRID CSS
Empty row
(nothing to
display)

61. CSS GRID CSS

62. CSS GRID CSS

63. CSS GRID CSS
1 2 3 4
1
2
3
4

64. CSS GRID CSS

65. CSS GRID CSS

66. CSS GRID CSS

67. CSS GRID CSS

68. GRID VS. FLEXBOX

69. IMPORTING CSS FILES
• You can import other CSS files in your current
CSS code by using the @import statement
• You can overwrite imported styles, by
redefining them in your current CSS file
• The import statement runs an additional HTTP
request to download the imported file (speed!)

70. CSS BROWSER SUPPORT
• Each web browser uses a layout engine to
render web pages, and support for CSS
functionality is not consistent between them
• Always check browser compatibility when
adding new styling to your webpage, especially
if this is part of a newer version of CSS (current
version is CSS 4)
• Always check your webpage across all
browsers

71. PRACTICAL EXAMPLE – LOG IN
STYLING
• Create a classical log-in webpage, with the
following elements:
• A “Log in” label
• A “Username” textbox with label, marked as
“required”
• A password box with label, marked as “required”
• A “Log in” button
• A “Forgot password” hyperlink

72. PRACTICAL EXAMPLE – LOG IN
STYLING
HTML

73. PRACTICAL EXAMPLE – LOG IN
STYLING
Now isn’t that just
lovely?

74. PRACTICAL EXAMPLE – LOG IN
STYLING

75. PRACTICAL EXAMPLE – LOG IN
STYLING
CSS

76. PRACTICAL EXAMPLE – LOG IN
STYLING
CSS

77. PRACTICAL EXAMPLE – LOG IN
STYLING
CSS

78. PRACTICAL EXAMPLE – LOG IN
STYLING
CSS

79. PRACTICAL EXAMPLE – LOG IN
STYLING
CSS

80. PRACTICAL EXAMPLE – LOG IN
STYLING
CSS

81. PRACTICAL EXAMPLE – LOG IN
STYLING
Outstanding questions:
• How was the gradient
effect on the buttons
generated?
• How can you change
styling/color when an item
is hovered over?
• How was the “Required”
text changed in the
Orange form?

82. BIBLIOGRAPHY
• https://www.w3schools.com/css/css3_variables.a
sp
• https://www.w3schools.com/cssref/css_websafe_
fonts.asp
• https://css-tricks.com/snippets/css/a-guide-to-
flexbox/
• https://www.w3schools.com/css/css3_flexbox.as
p
• https://www.w3schools.com/css/css3_mediaquer
ies.asp

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