LEARN CSS

- Rafael Van de Wiele -

To learn what CSS is.

1
2
Ⓒ 2023 Rafael Van de Wiele. All rights reserved.

This document is copyrighted and is the property of Rafael Van de Wiele. It is

prohibited to copy, reproduce, distribute, modify, or make any other use of all or part
of this document without the express written permission of the copyright holder.

Any copyright infringement of this document will result in legal action and civil
prosecution, where damages and court costs may be claimed.

For permission to use this document or for further information, please contact Rafael
Van de Wiele.

All trademarks, service marks and trade names mentioned in this document are the
property of their respective owners.

3
4
Introduction
Dear Reader,

Welcome to the wonderful world of CSS! As the author of this document, I want to
take you on an exciting journey full of colorful styles, beautiful layouts and stunning
web designs. Together we will explore the depths of this powerful language and
guide you in discovering the magic it brings.

But before we begin, I want to make you a promise. This is not a typical boring
textbook that drags you through thick chunks of text. No, my goal is to entertain,
inspire and ignite your passion for CSS. After all, I believe that learning should be fun
and fun is the fuel for creativity.

So take a deep breath and let your imagination run wild as we immerse ourselves in
the world of CSS. Imagine you are a painter and the web is your canvas. With every
line of code you write, you bring your vision to life. Every color palette, transition and
animated effect adds a touch of magic to your creation.

CSS is like a magic wand that lets you transform the elements of a Web page. From
positioning elements with precision to creating beautiful typography that excites the
senses, CSS gives you the power to tell your story with visual splendor.

But you know what's best? CSS is for everyone. It doesn't matter if you're a seasoned
programmer or just starting your first steps in the world of web development. With
patience, curiosity and a dash of adventure, you too can become a master of CSS.

So for a moment, forget your worries, let your creativity run wild and enjoy the
process. Experiment, try new things and dare to fail. It is in the mistakes and failures
that we learn the greatest lessons and sharpen our skills.

I hope this document will inspire you, make you smile and encourage you to make
your own unique mark on the Web. Don't be afraid to explore your own style and
experiment with new trends and techniques. CSS is an endless playground of
possibilities, where your imagination is the only limit.

So let's embark on this adventure full of fun, discovery and growth. Grab your favorite
code editor, get ready to learn and most importantly.... enjoy!

With enthusiasm and a touch of magic,

Rafael Van de Wiele

5
∙

6
Content
Introduction .............................................................................................................................. 5
1 Basics of CSS ...................................................................................................................... 9
1.1 Introduction to CSS .................................................................................................. 9
1.2 Overvieuw of CSS................................................................................................... 10
1.3 CSS syntax ............................................................................................................... 11
1.4 CSS selectors ........................................................................................................... 12
1.5 CSS toepassen op webpagina’s ......................................................................... 13
2 CSS layouts ...................................................................................................................... 14
2.1 Introduction to CSS layouts................................................................................... 14
2.2 Responsive design and its importance ............................................................... 15
2.3 Grid layouts and how to use them ...................................................................... 16
2.4 Best practices for CSS layouts .............................................................................. 17
2.5 CSS markup testing and debugging ................................................................... 18
3 CSS properties and values............................................................................................. 20
3.2 Understanding CSS properties and values ......................................................... 21
3.3 Formatting text with CSS properties and values ................................................ 21
3.4 Formatting elements with CSS properties and values ...................................... 23
3.5 Using CSS frameworks to style Web pages......................................................... 23
4 Advanced CSS techniques ........................................................................................... 25
4.1 Introduction to advanced CSS techniques ....................................................... 25
4.2 Animations in CSS................................................................................................... 25
4.3 Flexbox layouts in CSS ........................................................................................... 27
4.4 Using CSS frameworks ............................................................................................ 29
4.5 Best practices for advanced CSS techniques ................................................... 30
5 Examples of CSS code ................................................................................................... 32
5.1 Font change ........................................................................................................... 32
5.1.1 For chapters ........................................................................................................ 32
5.1.2 For text in the paragraphs ................................................................................ 32
5.1.3 For links ................................................................................................................. 32
5.2 Changing text size ................................................................................................. 32
5.2.1 For chapters ........................................................................................................ 32
5.2.2 For text in the paragraphs ................................................................................ 32
5.2.3 For links ................................................................................................................. 33
5.3 Changing color ...................................................................................................... 33
5.3.1 For chapters ........................................................................................................ 33

7
 5.3.2 For text in the paragraphs ................................................................................ 33
5.3.3 For links ................................................................................................................. 33
5.4 Changing background color ............................................................................... 33
5.4.1 For chapters ........................................................................................................ 33
5.4.2 For text in the paragraphs ................................................................................ 33
5.4.3 For links ................................................................................................................. 33
5.5 Bold text for links ..................................................................................................... 34
5.5.1 For chapters ........................................................................................................ 34
5.6 Text alignment of bullets ....................................................................................... 34
5.6.1 For unordered lists .............................................................................................. 34
5.6.2 For ordered lists ................................................................................................... 34
5.6.3 For custom listings............................................................................................... 34
5.7 Distinctive style for quoted text ............................................................................ 34
6 Names you can use in CSS to address things in your HTML/XML code .................. 35
6.1 Elements .................................................................................................................. 35
6.2 Pseudo-classes ....................................................................................................... 35
6.3 Pseudo-elements ................................................................................................... 36
6.4 Classes and IDs ....................................................................................................... 36
7 Names you can use in CSS to change the style ........................................................ 36
7.1 Features ................................................................................................................... 36
7.2 Values ...................................................................................................................... 37

8
1 Basics of CSS
1.1 Introduction to CSS
CSS, or Cascading Style Sheets, is an indispensable markup language that plays a
crucial role in the design of Web pages. It acts as a bridge between the structure
(HTML or XML) and the appearance of a Web document. Through CSS, Web designers
and developers can completely customize and beautify the presentation of a Web
page.

The concept of CSS was first introduced in 1996 by the World Wide Web Consortium
(W3C), with the goal of separating the presentation of Web content from the actual
content. This means that HTML or XML code contains the structure and content of the
page, while CSS is responsible for the visual aspects, such as colors, fonts, margins,
dimensions, backgrounds and more.

One of the biggest advantages of CSS is its ability to apply styles to multiple elements
on a Web page in an efficient and consistent manner. Instead of changing each
individual HTML tag, CSS allows designers to define desired styles and apply them to
all relevant elements. This not only saves time, but also makes managing and
maintaining a Web site much easier.

CSS provides a wide range of options for customizing the design of a Web page.
Designers can adjust the style of text, such as changing the color, size, font and
spacing of lines. In addition, they can add borders, shadows and backgrounds to
elements to make them more visually appealing. CSS also makes it possible to add
animations, transitions and other interactive elements to a Web page, creating an
engaging user experience.

Another important aspect of CSS is the ability to apply different styles to different
media types. This means designers can define specific styles for print, screens of
different sizes and even for specific devices, such as smartphones or tablets. This allows
Web pages to be optimally displayed on different devices and allows designers to
adapt the user experience to the specific context.

The flexibility and power of CSS allows Web designers and developers to create
beautiful and professional Web pages that are both attractive and functional. CSS
continues to evolve and new features are regularly added to its specifications, giving
designers more and more freedom in creating unique and engaging Web
experiences.

9
It is therefore essential for anyone involved in web design and development to have
a good understanding of CSS and keep up with the latest developments.

1.2 Overvieuw of CSS

Cascading Style Sheets, better known as CSS, is a powerful markup language used to
describe the presentation of a document written in HTML or XML. It has an important
role in shaping and stylizing Web pages, giving Web developers and designers
complete control over the layout, color scheme, typography and other visual aspects
of a Web site.

CSS acts as a separation between the content and design of a Web site. This means
that the structure and content of a Web page can be defined separately from the
visual representation, allowing them to be edited independently. This makes it easier
to make changes to the design or content of a Web site without affecting other
aspects. This flexibility and modularity make CSS an essential tool for Web developers
and designers, especially when managing larger Web sites with multiple pages.

One of the main advantages of CSS is the ability to create a consistent look and feel
across multiple Web pages. Using CSS, developers can create a single style sheet that
can be applied to all pages of a Web site. This means that changes in the style sheet
will automatically affect all associated pages, making keeping the appearance of the
Web site consistent much easier. This saves considerable time and effort, as developers
do not have to edit each page individually.

In addition, CSS makes it possible to improve the accessibility of a Web site. By

separating the structure and content from the design, developers can focus on
creating well-structured and semantically correct HTML, while leaving the visual
presentation to CSS. This has the benefit of making content easier to read and interpret
by search engines, screen readers and other aids for people with disabilities.

In addition to basic functionality, CSS also offers a wide range of advanced features
and capabilities. Among other things, it supports animations, transitions, flexible
layouts, responsive designs and more. This allows developers to add complex and
interactive elements to their Web sites, making them even more engaging and user-
friendly.

All in all, CSS has become an indispensable tool for Web developers and designers. It
provides the ability to create attractive, well-structured, and user-friendly Web sites

10
that maintain consistency across multiple pages. By separating content from design,
CSS makes managing and updating Web sites easier and more efficient. It allows
developers to create Web sites that are not only visually appealing, but also
accessible and usable by a wide audience.

1.3 CSS syntax

CSS or Cascading Style Sheets is a set of rules that define how the visual elements of a
Web page should look. It is a powerful and flexible tool for Web developers and
designers to control the presentation of Web content. CSS allows users to fully
customize the style and appearance of a Web page, giving them the ability to give a
unique visual identity to their Web sites.

One of the most important aspects of CSS is that it separates a separate layer of
presentation from the structure of a Web page, which is defined by HTML. This means
that with CSS, developers and designers can change the visual appearance of a Web
site without changing the HTML code. This allows them to easily create reusable style
rules that apply to multiple pages within a Web site, improving the efficiency of the
development process.

CSS syntax is based on the rules of HTML and is relatively easy to understand. The basic
structure consists of selectors, properties and values. Selectors identify the HTML
elements to which the style is to be applied. This can be a specific element, such as a
paragraph (<p>) or a heading (<h1>), or a group of elements with a particular class
or ID.

Properties indicate the aspect of the selected element to be changed. They include
color, background, font, size, alignment, margins and padding. CSS provides a
comprehensive list of properties that allow developers to modify virtually any visual
aspect of a Web page.

Values specify the specific settings for the selected properties. For example, for the
"color" property, the value could be "red," "blue," or a hexadecimal code such as
"#FF0000." CSS also supports different units, such as pixels, percentages and ems, to
allow precise control over the size and position of elements.

Understanding the different types of selectors in CSS is essential for creating effective
styles. Element selectors are the most general and target specific HTML elements,
regardless of their class or ID. Class selectors select elements based on the class

11
attribute assigned to them, allowing designers to select multiple elements with the
same style. ID selectors are unique to a single element because they use the ID
attribute to identify it.

The proper use of selectors allows developers and designers to apply targeted styles
to specific areas of a Web page, giving them more control over the presentation of
their content.

In short, CSS is a powerful tool that allows Web developers and designers to control the
visual aspects of Web pages. Using selectors, properties and values, they can
customize the style, look and feel of a Web site to suit their needs. Understanding CSS
syntax and using different types of selectors enables professionals to create attractive
and functional Web pages that provide the desired user experience.

1.4 CSS selectors

CSS (Cascading Style Sheets) is an essential tool in the world of Web development. It
is a style sheet language specifically designed to describe the presentation of an HTML
or XML document. CSS allows Web developers to manage and control the visual
design and layout of Web pages. It allows them to define various styles, including
layout, fonts, colors and other design elements, giving them the ability to create
beautiful and functional Web sites.

One of the main pillars of CSS are selectors. These selectors are used to identify and
format HTML elements based on various properties, such as attributes, classes, IDs and
more. They are the building blocks of CSS and allow developers to determine and
customize the appearance of specific elements or groups of elements on a Web
page. By using various types of selectors, such as element selectors, class selectors, ID
selectors and attribute selectors, developers can select specific HTML elements and
apply the desired styles.

Element selectors are used to select and style specific HTML elements on a Web page.
For example, if you want to change the font size of all headers on a page, you can
use the element selector to select the HTML tags for <h1>, <h2>, <h3>, <h4>, <h5> and
<h6>. Class selectors, on the other hand, allow HTML elements to be selected based
on a specific class attribute assigned to those elements. This allows developers to style
groups of elements with the same class in a uniform way. ID selectors, on the other
hand, provide a unique identifier for HTML elements using an ID attribute, allowing
developers to select and style specific individual elements. Finally, attribute selectors

12
allow developers to select HTML elements based on specific attribute values assigned
to those elements.

Understanding and mastering CSS selectors is critical for anyone who wants to create
visually appealing and functional Web sites. It allows developers to have complete
control over the presentation of a Web page and provides flexibility in applying styles
to different elements. CSS and its selectors have a huge impact on Web site design
and development, and they play a key role in creating a consistent and attractive
user experience for visitors.

1.5 CSS toepassen op webpagina’s

CSS stands for Cascading Style Sheet and is a language used to describe and style
the visual appearance of a Web page. It is an essential part of Web development and
is widely used by developers around the world.

The main purpose of CSS is to separate the content of a Web page from its
presentation. This means that using CSS allows developers to modify the layout, color
scheme, typography and other visual aspects of a Web site without changing the
actual HTML structure. This allows Web developers to easily make changes to the
appearance of a Web page without having to rewrite all of the HTML code.

CSS allows developers to apply a wide range of style elements to HTML elements. This
includes changing the size and font of text, setting background images, adjusting
margins and aligning elements on the page. By using selectors, such as element, class
and ID selectors, developers can target specific elements and apply specific styles.
This offers great flexibility and allows for detailed customization of the visual
appearance of a Web page.

In addition to selectors, the use of properties and values plays an important role in CSS.
Each property has an associated value, and by applying the right combination of
properties and values to HTML elements, the desired visual style can be achieved. For
example, by applying the property "color" with the value "red" to a text element, the
text will be colored red. CSS provides a comprehensive list of properties and values
that developers can use to create desired visual effects.

The importance of CSS in Web development cannot be overemphasized. By using

CSS, developers can maintain design consistency across all pages of a Web site,
creating a professional appearance. In addition, CSS makes it possible to create

13
responsive Web pages that automatically adapt to different screen sizes, such as
those of mobile devices. This is critical in an era when people visit websites via different
devices with different screen sizes.

In short, CSS is a powerful tool for Web developers that allows them to style and
customize the presentation of a Web page. By separating content from presentation,
developers can easily make changes to the appearance of a Web site, making it
more efficient to maintain and update. Understanding and mastering CSS is critical for
anyone interested in web development and design, as it is key to creating attractive
and well-functioning websites.

2 CSS layouts
2.1 Introduction to CSS layouts
Cascading Style Sheets (CSS) is a powerful stylesheet language used to define and
control the presentation of a Web document. Combined with markup languages such
as HTML, CSS allows designers to define the layout, style and visual aspects of a Web
page. By separating content (HTML) and presentation (CSS), Web developers can
easily make changes to the design of a Web site without affecting its structure and
content.

One of the most important functions of CSS is the management of layouts. The CSS
layout plays a crucial role in creating an attractive and functional Web site. It
determines how different HTML elements are placed, positioned and displayed on a
page. By applying various CSS properties and values, such as the positioning, size,
margins and paddings of elements, designers can create complex and responsive
layouts.

CSS provides several ways to create and apply layouts. Inline CSS is applied directly in
the HTML tags and is useful for quickly applying style to individual elements. Embedded
CSS, also called internal CSS, is placed in the header section of the HTML document
and can be used to define the style of an entire Web page. External CSS, on the other
hand, is placed in a separate CSS file and can be applied to multiple Web pages. This
provides a consistent style and makes it easy to make changes without editing each
page individually.

When creating CSS layouts, certain properties play a key role. The "display" property
determines the type of frame an element generates, such as a block or inline element.
The "position" property allows the designer to determine the exact position of an

14
element on the page, such as "absolute" or "relative" positioned. The "float" property
controls the flow of elements within a container, such as aligning images next to text.
These and many other CSS properties provide a wide range of options for creating
layouts and adapting them to specific design requirements.

A good understanding of CSS layouts is essential for Web designers striving to create
effective and visually appealing Web sites. By using the right combination of CSS
properties and values, designers can not only define the structure of a Web page, but
also improve the user experience. Responsive layouts can be created to adapt the
display to different devices and screen sizes. In addition, CSS can be used to add
accessibility features, such as enlarging text, improving color contrast and adjusting
reading order for users with disabilities.

In short, CSS layouts are an indispensable part of Web design and play a crucial role
in defining the overall look and feel of a Web page. By understanding and applying
CSS properties and values, Web designers can create attractive, functional and
responsive layouts that enhance the user experience. CSS provides the flexibility and
control needed to develop modern and accessible Web sites.

2.2 Responsive design and its importance

CSS markup is an essential part of Web development and design. It plays a crucial role
in creating the structure and layout of a Web page, which in turn improves the overall
user experience. Using CSS Layouts, designers can leverage a wide range of flexibility
and customization options, enabling them to create unique and attractive Web
pages that perfectly fit the needs and goals of their projects.

Within the domain of CSS Layouts, responsive design is one of the most essential sub-
topics. Responsive design refers to the ability of a Web page to dynamically adapt to
different screen sizes and devices, such as desktop computers, laptops, tablets and
cell phones. With the increasing use of mobile devices for exploring the Internet,
responsive design has become a crucial factor in the success of a Web site.

The importance of responsive design cannot be overemphasized in today's digital

world. More than 50% of Internet traffic comes from mobile devices, and this
percentage continues to rise. Therefore, businesses and website owners must ensure
that their websites are fully responsive to provide an optimal user experience to all
visitors, regardless of the device they are using.

15
A responsive website allows users to effortlessly access and view the content of a web
page without compromising the user experience. This means that users can easily
navigate, read and interact with the website regardless of the device they are using.
By implementing responsive design, designers and developers can ensure that the
website will always look and function well, regardless of the screen size or resolution.

Moreover, a responsive website improves accessibility and usability, allowing users with
different needs and limitations to use the website easily. Not only is having an
accessible website ethical, but it can also increase user engagement and appeal to
a wider audience.

In addition to improving user experience and accessibility, responsive design also has
search engine optimization (SEO) benefits. Search engines, such as Google, prefer
websites that are mobile-friendly and reward them with better rankings in search
results. This means that a responsive website can gain more visibility and generate
more organic traffic.

In short, responsive design is an essential subtopic within CSS Layouts that Web
developers and designers must learn and implement to create modern and effective
Web pages. It allows them to create Web sites that adapt to the diverse needs and
preferences of users, regardless of the device they use. By applying responsive design,
they can improve the user experience, increase accessibility, attract more visitors and
perform better in search engines.

2.3 Grid layouts and how to use them

CSS Layouts are a crucial part of creating Web sites with a visually appealing and user-
friendly interface. They allow Web designers to structure and position the elements of
a Web page, making the page more readable and easier to navigate. One of the
main techniques used to create CSS Layouts is the use of grid layouts, the most
prominent of which is the CSS Grid system.

Grid layouts are a powerful tool for Web designers that allow them to create complex
and flexible layouts that are responsive and adaptable to different screen sizes. CSS
Grid allows designers to create grids made up of columns and rows that can be
customized to meet the specific needs of the Web page. This offers tremendous
flexibility when designing different types of layouts, such as multi-column designs,
image galleries and even complex navigation menus.

16
To use Grid layouts effectively, it is important that Web designers first understand the
basics of CSS Grids. This includes learning how to set up a grid, define columns and
rows, and position elements within the grid. Using specific CSS properties and values,
designers can achieve the desired structure and positioning of elements in the grid.

Another important aspect of using CSS Grid is ensuring responsiveness of the layouts
so that they can be adapted to different screen sizes, such as desktops, tablets and
mobile devices. This can be achieved by using media queries, which allow designers
to adjust the style rules of the grid based on the available screen size. This allows the
layout to adapt and look consistent regardless of the device being used to view the
Web site.

Although understanding CSS Grid and using it effectively requires some practice and
experimentation, it provides designers with a powerful tool to create stunning and
visually appealing Web sites. By taking advantage of CSS Grid's flexibility and
capabilities, Web designers can create unique and attractive layouts that are both
easy to navigate and user-friendly.

It is important to note that CSS Grid is not the only layout technique available in CSS.
There are also other methods, such as Flexbox, that are used to create dynamic and
responsive layouts. Understanding and combining different CSS layout techniques
allows designers to choose the best approach based on the specific requirements of
their project.

2.4 Best practices for CSS layouts

CSS markup, also known as Cascading Style Sheets, is a crucial part of Web
development. It allows developers to position and style elements on a Web page in a
way that is both aesthetically pleasing and enhances functionality. Through various
best practices, developers can create effective CSS layouts that are consistent and
user-friendly.

One of the most important best practices for CSS layouts is to use a consistent grid
system. A grid system helps create a uniform layout on different pages of a Web site.
It ensures that elements are aligned in a consistent manner and makes the design
process easier. Fortunately, popular frameworks such as Bootstrap and Foundation are
available that provide predefined classes to create a grid layout. By using these grid
systems, developers can quickly and efficiently bring consistency to their designs.

17
Another important best practice is applying responsive design in CSS layouts. With the
rise of mobile devices, it is critical that websites adapt to the user's screen size.
Responsive design allows websites to display smoothly and optimally on different
devices, increasing accessibility and usability. This is achieved by using media queries,
which allow developers to adjust the layout of a website based on screen size.

In addition to responsive design, CSS Flexbox and CSS Grid are also valuable tools for
creating complex layouts. CSS Flexbox is a one-dimensional layout system that allows
developers to create flexible and responsive layouts. Flexbox allows elements to be
dynamically arranged and aligned, giving developers more control over the display
of content. On the other hand, CSS Grid is a two-dimensional grid system that provides
even more extensive control over layouts. Grid makes it possible to create complex
and versatile layouts through its ability to define both rows and columns. Both Flexbox
and Grid are widely supported by modern browsers and have become an
indispensable part of CSS layouts.

In short, following best practices for CSS layouts can make a significant difference in
the design and functionality of a Web site. Using a consistent grid system, responsive
design and CSS Flexbox and Grid helps developers create modern and user-friendly
Web sites. However, it is important for developers to stay abreast of the latest trends
and techniques in CSS layouts to ensure that their websites remain relevant and
functional in an ever-changing Web landscape.

2.5 CSS markup testing and debugging

CSS markups play a crucial role in the world of Web development. They form the
backbone of visually appealing and functional Web pages, giving Web designers the
ability to define the look and feel of a Web site. Using CSS code, developers can
precisely specify the positioning and size of HTML elements, allowing them to create
an organized and aesthetically pleasing user interface.

There are several types of CSS layouts that Web developers can explore and
implement, each with its own features and benefits. One common layout is the fixed
layout, in which the content of a Web page maintains a fixed width regardless of
screen size. This can be useful if you want your Web site to look consistent on different
devices, but it can be problematic if the content does not scale well on smaller
screens.

18
Another approach is the fluid layout, where the content of the Web site adapts to the
space available on the screen. This means that the elements on the page
automatically adjust and respond to changes in screen size. This provides a more
flexible user experience, but it can be challenging to ensure that all elements display
correctly and that content remains readable, especially on very wide or narrow
screens.

An important development in CSS layouts is the emergence of responsive and

adaptive layouts. Responsive layouts use media queries to apply different style rules
based on screen size, making the Web site look optimal on both desktops and mobile
devices. Adaptive layouts, on the other hand, use specific layouts for different screen
sizes, with the website detecting which device is being used and applying the
appropriate layout. Both approaches allow developers to provide a consistent user
experience regardless of the device being used to view the Web site.

In addition to creating CSS layouts, testing and debugging them is an essential step in
the development process. Testing CSS layouts involves viewing the website on different
devices and in different browsers to ensure that the visual display and interactive
elements function correctly. It is crucial to understand that different devices and
browsers interpret CSS in different ways, and that can lead to unintended visual
inconsistencies or behavioral problems. Therefore, developers should test regularly to
ensure that their CSS layouts display properly on all major platforms.

Debugging CSS layouts is a process in which developers identify and correct any errors
or inconsistencies in the CSS code. This can range from simple syntax errors to more
complex problems related to positioning, alignment and responsiveness. Fortunately,
there are several tools available that can help developers debug CSS, such as browser
developer tools that provide insight into the structure and style of Web pages, online
validators that check CSS code for errors and compatibility issues, and CSS pre-
processors that provide advanced features, such as variables and mixins, to increase
the efficiency of CSS development.

The success of a Web site depends largely on the quality of its CSS layouts. Thorough
testing and debugging of CSS layouts is an ongoing process that should be performed
regularly to ensure that a Web site remains functional and visually appealing
regardless of evolving user needs and changes in technology. In addition, it is crucial
for Web developers to be aware of the latest Web development trends and best

19
practices so that they can create CSS layouts that are modern, efficient and future-
proof.

Through thorough testing and effective debugging, Web developers can ensure that
their CSS layouts meet the needs of the Web site and its users. By striving for a seamless
user experience and attractive visual design, CSS layouts can become an essential
tool for successfully developing high-quality Web sites.

3 CSS properties and values

3.1 CSS properties and values
CSS properties and values are the essential building blocks for the design and layout
of any Web site. As a front-end developer, it is paramount to have a deep
understanding of these properties and values. Cascading Style Sheets, CSS for short, is
the language used to describe how HTML elements should be displayed on a Web
page. These CSS properties and values play a crucial role in determining the visual
characteristics of HTML element content, such as color, font, size and formatting.

The spectrum of CSS properties and values is truly vast, offering unique options for each
purpose. An example of such a property is "font-family," which determines which font
is applied to the text within an HTML element. In contrast, the "color" property
determines the color of the text itself. Similarly, the "background-color" property
determines the color of the background of an HTML element. The values assigned to
these properties can have different formats, such as hexadecimal values, RGB values
or named colors. It is essential to apply the right properties and values to create visually
appealing and responsive Web sites.

In addition to basic features, advanced CSS properties such as animations, transitions

and flexbox are also available. Animations and transitions allow for dynamic and
interactive elements on a Web site. Flexbox, on the other hand, is a layout model that
enables responsive Web design by automatically adjusting the size and position of
HTML elements based on screen size and orientation. A thorough mastery of these
advanced CSS properties and values is essential for developing modern and user-
friendly Web sites that meet user requirements.

All in all, CSS properties and values play a crucial role in creating attractive and
interactive websites. As a front-end developer, it is essential to have a deep
understanding of both basic and advanced properties and values. Correctly applying

20
the right properties and values is crucial in developing responsive and user-friendly
web designs that meet users' needs and expectations.

3.2 Understanding CSS properties and values

CSS (Cascading Style Sheets) is an essential component of Web development used to
customize the appearance and layout of Web pages. Understanding CSS properties
and values is critical to creating responsive, user-friendly and aesthetically pleasing
Web sites.

CSS properties refer to specific characteristics that determine the appearance of an

HTML element. These properties include a wide range of visual aspects, such as an
element's font size, color, margins, padding and background color. By setting these
properties to specific values, Web developers can customize the visual presentation
of elements. Understanding how each property affects the element enables
developers to design Web pages that are both visually appealing and functional.

On the other hand, values are the specific settings assigned to a CSS property. These
values determine how the property will affect the element. For example, take the
"font-size" property that determines the size of the letters in an element. This property
can be set to different values, such as "small," "medium," "large" or a specific number
of pixels. Similarly, the "color" property can be set to specific colors such as red, blue
or green. Understanding these values allows developers to achieve appropriate visual
effects and consistency in their Web designs.

In short, understanding CSS properties and values is critical to creating responsive and
visually appealing Web pages. Properties determine the visual appearance of an
HTML element, while values determine how each property will affect the element. As
a Web developer, it is essential to understand how to use CSS properties and values to
create a user-friendly and aesthetically pleasing Web site. By understanding these
fundamental concepts of CSS, developers can control the visual presentation of Web
pages in an effective and consistent manner, allowing them to take advantage of
their creativity and design opportunities.

3.3 Formatting text with CSS properties and values

CSS properties and values are a crucial and fundamental concept in Web
development that focuses on the design, formatting and presentation of Web pages.
Cascading Style Sheets, also known as CSS, is a powerful stylesheet language used to
describe the appearance and formatting of an HTML document. By using CSS

21
properties and values, Web developers can define in a structured and consistent way
the style of various elements on a Web page, such as text, colors, borders,
backgrounds and positioning.

The importance of CSS properties and values cannot be overemphasized because

they allow developers to separate the presentation of a Web page from its structural
structure. This allows them to better maintain, update and reuse a Web site's code. The
use of CSS properties and values provides a wide range of options for customizing the
visual aspects of a Web page, giving developers the freedom to create creative and
attractive designs.

One specific area where CSS properties and values play a major role is the formatting
of text on a Web page. Text is an essential part of content and communication on the
Web, and CSS provides various properties and values to style and format text. For
example, the "font-family" property allows developers to specify the font of the text,
while "font-size" is used to set the size of the text. In addition, the "text-align" property
can be used to determine the alignment of the text, and properties such as "font-
weight," "font-style," "text-decoration" and "letter-spacing" can be applied to add
additional formatting options to the text.

The use of CSS properties and values also provides the ability to create and apply
various text effects. For example, the "text-shadow" property can be used to add a
shadow effect to the text, while the "color" and "background-color" properties give the
developer the freedom to customize the colors of the text and background. In
addition, the "line-height" property allows developers to set the interlinearity of the text,
while "text-transform" can be used to convert the text to uppercase, lowercase, or
have the first letter of each word begin with an uppercase letter.

All in all, understanding and mastering CSS properties and values is critical to creating
Web pages that are not only visually appealing, but also easy to read and user-
friendly. Proper use of these properties and values allows developers to optimize the
typography and presentation of text on a Web page, effectively conveying content
to the user. The ability to decouple the structure of a Web page from its design and
formatting is an essential skill for Web developers, as it allows them to be flexible and
efficient while maintaining consistency and cohesion in their Web sites.

22
3.4 Formatting elements with CSS properties and values
CSS, also known as Cascading Style Sheets, is a powerful language used to describe
the presentation of a document, such as a Web page written in HTML or XML. Using
CSS, developers can improve the visual appeal and responsiveness of Web pages. An
essential aspect of CSS is the use of CSS properties and values, which allow developers
to manipulate and customize layout elements.

Layout elements refer to the structure and design of a Web page. These can include
the positioning of text and images, the size of containers and the spacing between
elements. Using CSS properties and values, developers can manage and customize
these layout elements to meet their specific needs. For example, the "position"
property allows developers to specify the exact position of an element on the page.
The "display" property allows developers to determine how an element is displayed,
such as inline or block. The "float" property allows elements to be moved to the left or
right of the page.

An important aspect of using CSS properties and values is creating responsive design.
This means that Web pages adapt to different screen sizes, such as those of desktops,
tablets and mobile devices. CSS provides developers with a wide range of properties
and values to create responsive layouts. One example is "media queries," which allow
developers to apply different styles based on screen size. By using CSS properties and
values for responsive designs, developers can ensure that their Web pages look and
function well on different devices, providing a positive user experience.

In short, CSS is a powerful language used to describe the presentation of Web pages.
Using CSS properties and values, developers can manage and customize layout
elements, creating visually appealing and responsive layouts. Using CSS properties and
values is especially important when designing responsive Web pages that adapt to
different screen sizes, providing an optimal user experience.

3.5 Using CSS frameworks to style Web pages

CSS frameworks are powerful tools for Web developers because they provide a
comprehensive collection of pre-written code libraries. These libraries contain a wide
range of reusable CSS classes and components that allow developers to style Web
pages in an efficient and streamlined manner. Using CSS frameworks offers numerous
advantages and can greatly simplify the design process.

23
One of the main benefits of using a CSS framework is the time savings it brings. Instead
of writing CSS styles every time, developers can simply apply the framework's desired
classes and components to the HTML elements of their Web pages. This allows them
to give a consistent and professional look quickly and easily to their websites, without
having to start from scratch each time. The framework provides a solid foundation, so
to speak, on which developers can build, allowing them to concentrate on
developing the functionality and interaction of the Web site.

Another advantage of CSS frameworks is their ability to create responsive Web pages.
With the rise of mobile devices, it has become essential to design Web sites that can
adapt to different screen sizes. CSS frameworks provide built-in functionality and rules
that developers can use to make their Web sites responsive. By simply adding the
appropriate classes, developers can have elements on the page scaled, hidden or
rearranged depending on the screen size. This ensures that the Web site looks
consistent and attractive regardless of the device being used.

In addition, CSS frameworks promote consistency in the design and user experience
of a Web site. Because developers use the same set of styles and components, a
unified look is created. This makes it easier for users to navigate the Web site because
they are familiar with the way certain elements look and work. A consistent user
experience adds to the professionalism and credibility of a Web site, and can increase
overall user satisfaction.

While CSS frameworks offer many advantages, it is important to use them with care
and attention. It is critical for developers to be aware of the possibility of over-reliance
on a framework, which can lead to generic and unoriginal designs. A good practice
is to adapt the framework to the specific needs of the project and add unique design
elements to set the Web site apart from others. By finding the right balance between
using a framework and showing creativity, developers can create Web sites that are
both efficient and unique.

In short, CSS frameworks are valuable tools for Web developers because they provide
reusable CSS classes and components to style Web pages. They help streamline the
design process and enable developers to create attractive and responsive Web sites
quickly and efficiently. While it is important to be cautious about overusing frameworks,
they can still be a valuable addition to a developer's toolbox if applied properly.

24
4 Advanced CSS techniques
4.1 Introduction to advanced CSS techniques
Advanced CSS techniques allow Web designers to go beyond the basics of CSS to
create more complex and innovative Web designs. These techniques include
advanced selectors, pseudo-classes and pseudo-elements, combined properties and
values, and the use of CSS grid and flexbox for advanced layouts.

Advanced selectors, such as the nth-child selector and attribute selector, allow
designers to target and style specific elements on a page based on their position or
attributes. Pseudo-classes and pseudo-elements, such as :hover, :before and :after,
provide additional options for adding interactive and visual effects to elements.

Combining properties and values allows designers to define complex styles by

combining several CSS properties together. This includes using inheritance, setting
fallback values and applying different properties depending on the context.

CSS grid and flexbox are advanced layout techniques that give Web designers more
control over the positioning and alignment of elements on a page. CSS grid can be
used to create complex grid structures in which the placement of elements can be
precisely determined. Flexbox provides flexible layouts where elements can be
stretched, aligned and reorganized based on available space.

Understanding and mastering advanced CSS techniques enables Web designers to

create unique and personalized Web designs that stand out from standard solutions.
These techniques allow designers to implement complex animations, responsive
layouts and advanced visual effects, making Web sites more attractive and
interactive.

In short, advanced CSS techniques allow Web designers to go beyond the basics of
CSS to create more complex and innovative Web designs. By using advanced
selectors, combined properties and values, CSS grid and flexbox, designers can create
unique and visually appealing Web sites that stand out from the crowd. Mastering
these techniques is essential for Web developers to improve their skills and deliver high-
quality Web designs to their clients.

4.2 Animations in CSS

Animations in CSS are one of the most exciting and visually appealing ways to make
a Web site stand out. They add a dynamic element to a Web page and capture the

25
user's attention. By using CSS animations, developers can enhance the user
experience and leave a memorable impression.

Creating animations in CSS begins with defining keyframes. Keyframes are specified
points in time at which a CSS property is set to a specific value. By specifying multiple
keyframes and determining the duration and timing of the animation, developers can
create complex and smooth movements.

There are several types of animations that can be created with CSS. One common
animation technique is transition animation. This animation allows a smooth transition
between two states of an element, such as changing the background color or
transparency. With transition animations, designers can add subtle effects that
enhance interaction with the Web site.

Another powerful type of animation in CSS is transformation animation. This technique

allows designers to manipulate the position, size, rotation and skew of an element. By
using transformation animations, developers can create surprising and creative effects
that capture the user's attention.

The animation property in CSS provides extensive control over animation. Developers
can specify the type of animation, its duration, timing and delay. In addition, other
properties such as the animation fill mode can be set, which determines how an
element should be shaped before and after the animation. This gives designers the
flexibility to achieve the desired effects.

However, it is important to use animations in moderation and apply them only when
they add value to the user experience. Overuse of animations can be distracting and
reduce the usability of a Web site. It is essential to strike a balance between visual
appeal and functionality.

With the right balance between animation and functionality, CSS animations can be
a powerful tool for creating engaging and interactive user experiences. They add an
extra dimension to design and make Web pages more vibrant. By applying advanced
techniques and experimenting with different properties and values, developers can
create unique animations that reinforce brand identity and set the Web site apart from
the competition.

In short, CSS animations offer developers the ability to bring Web pages to life and
create an engaging user experience. By using keyframes, transition animations and
transformation effects, designers can implement complex movements and

26
interactions. However, it is important to use animations wisely and strike the balance
between visual appeal and functionality. With carefully designed CSS animations,
Web sites can stand out and engage users in a dynamic and engaging way.

4.3 Flexbox layouts in CSS

Flexbox formatting in CSS is one of the most popular advanced techniques used by
Web developers to create dynamic and responsive layouts. It is a layout model that
provides flexibility and efficiency in arranging elements on a Web page. With Flexbox,
developers can easily and intuitively divide space between items in a container and
easily align them according to their needs. Today, this technique is widely supported
by all modern browsers, making it an indispensable part of every Web developer's
toolkit.

One of the main advantages of using Flexbox is the simplification of the process of
creating responsive layouts. Previously, it was challenging to create a design that
automatically adapted to different screen sizes and devices. Traditional CSS layouts
often required complex calculations and media queries to meet these requirements.
With Flexbox, on the other hand, developers can easily create a flexible layout that
automatically adapts to different screen sizes and orientations. This is made possible
by the flexible nature of Flexbox items, which can be wrapped and rearranged as the
size of the container changes. This makes creating responsive designs significantly
easier and more intuitive.

Another key advantage of Flexbox is its ability to provide powerful alignment options.
With Flexbox, developers can align items along the horizontal and vertical axis and
evenly distribute the available space between them. This gives designers complete
control over the position and alignment of elements in a layout. This allows developers
to easily create visually appealing and balanced designs that are easy to navigate.
Moreover, Flexbox can also be used to create more complex layouts, such as nested
grids and asymmetrical designs. Such complex layouts would have required significant
amounts of custom CSS and JavaScript in the past, but with Flexbox, they can now be
achieved in a much simpler and more efficient way.

Learning and mastering Flexbox is an essential step for any Web developer who wants
to take his or her CSS skills to the next level. With Flexbox, developers can create flexible
and responsive layouts that work seamlessly across different devices and screen sizes.
Its powerful alignment and distribution capabilities allow designers to bring their vision
to life and enhance the user experience. Flexbox provides better control over the

27
presentation of a Web page and enables the creation of consistent and attractive
designs.

There are several concepts and properties that are important to understand when
working with Flexbox. One of the core concepts is the container-item model, where
an element set as a flex container acts as a parent to the flex items placed within it.
These flex items are the direct children of the flex container and can have various
properties that determine their behavior within the layout. Some of the most important
properties are "flex-direction," which can be used to determine the direction of the
main axis, and "flex-wrap," which can be used to determine whether the flex items
should be wrapped or not.

Another important property of Flexbox is "justify-content," which can be used to

determine the alignment of flex items along the major axis. This property provides
several values, such as "flex-start," "flex-end," "center" and "space-between," that help
designers achieve the desired alignment. A similar property is "align-items," which can
be used to determine the alignment of flex-items along the transverse axis. This
property also provides values such as "flex-start," "flex-end," "center" and "stretch" to
achieve the desired alignment.

In addition to these features, Flexbox also offers more advanced options, such as
"align-self," which allows individual flex items to be aligned within the layout, and "flex,"
which allows the flexible growth factor and shrinkage factor of flex items to be
determined. These features allow designers to make specific adjustments and achieve
a high degree of flexibility when designing complex layouts.

Understanding and mastering Flexbox requires practice and experience. Fortunately,

there are numerous online resources and tutorials available to help developers learn
Flexbox and improve their skills. It is also important to experiment and play with Flexbox
features to get a good understanding of how they work together and how they can
be applied to different design situations.

In conclusion, Flexbox in CSS provides a powerful and flexible way to create dynamic
and responsive layouts. It simplifies the process of creating responsive layouts and
offers extensive options for element alignment and distribution. With Flexbox,
developers can create visually appealing and balanced designs that are easy to
navigate on different devices and screen sizes. By learning and mastering Flexbox,

28
web developers can take their CSS skills to the next level and build effective, modern
and responsive websites.

4.4 Using CSS frameworks

Advanced CSS techniques are crucial for any Web developer who wants to create a
visually stunning Web site. These techniques go beyond the basics of CSS and allow
for more complex and dynamic designs. In addition to the basics of CSS, there are
several advanced techniques, including the use of CSS frameworks.

CSS frameworks are pre-written CSS code libraries that provide a comprehensive set
of pre-designed elements and styles that developers can use in their Web site designs.
By importing the framework into their project, developers can easily use the
components already built, saving a significant amount of time and effort. Some
popular CSS frameworks widely used in the industry include Bootstrap, Foundation and
Materialize.

One of the main benefits of using a CSS framework is the consistency it provides for the
entire Web site. Each element within the framework is already designed to work
together, creating a cohesive look and feel. This can be particularly useful for
developers who are not proficient in design or who simply do not have the time to
develop their own custom styles. In addition, CSS frameworks are often responsive,
meaning they are designed to work seamlessly on all devices and screen sizes. This
makes the website look great on desktops as well as tablets and mobile devices.

So using CSS frameworks is a valuable technique for Web developers who want to
create sophisticated and visually appealing Web sites. They provide pre-designed
elements and styles that can save time and effort, while ensuring a consistent and
responsive design. Popular frameworks such as Bootstrap, Foundation and Materialize
are widely used in the industry and serve as an excellent starting point for developers
looking to incorporate advanced CSS techniques into their projects.

In addition to CSS frameworks, there are many other advanced CSS techniques that
Web developers can explore and apply. Some examples include CSS Grid, which
provides a powerful grid layout system, and CSS Animations and Transitions, which can
be used to create vibrant and interactive animations. There are also techniques such
as Flexbox, CSS Variables and CSS Media Queries, which allow developers to have
even more control and adaptability over the design and behavior of Web pages.

29
Mastering advanced CSS techniques requires practice and experience. It is important
to experiment, practice and keep learning to understand and apply the full potential
of these techniques in Web development projects. Fortunately, there are numerous
online resources, tutorials and documentation available that can help developers
learn and master these techniques.

All in all, advanced CSS techniques are essential for creating modern, dynamic and
visually appealing Web sites. By using CSS frameworks and exploring other advanced
techniques, Web developers can take full advantage of CSS's capabilities and create
unique and impressive user experiences.

4.5 Best practices for advanced CSS techniques

Advanced CSS techniques are used to create visually appealing and interactive Web
sites. These techniques require a better understanding of CSS and its capabilities. Best
practices for advanced CSS techniques can help students create efficient and
maintainable code.

A best practice for advanced CSS techniques is to use a preprocessor such as Sass or
Less. Preprocessors allow the use of variables, mixins and functions, which can help
reduce code repetition and make it easier to maintain. For example, variables allow
colors, fonts and other reusable values to be defined and used throughout style sheets.
This ensures consistency and makes it easy to make global changes.

Mixins are another useful tool that preprocessors provide. They allow developers to
define pieces of reusable code and apply them to different places in style sheets. This
can be useful for defining repeating style elements, such as vendor prefixes for CSS
properties, and reducing the amount of code that needs to be written.

Functions in preprocessors allow developers to perform calculations and generate

dynamic values. This allows, for example, colors to be adjusted based on predefined
rules or calculations. This gives developers more flexibility and control over the style of
a Web site.

Another best practice is to use a modular approach to styling. This involves breaking
down styles into smaller modules that can be reused and combined to create different
styles. Dividing styles into modules makes the code modular and easier to understand
and maintain. This also makes it easier to make changes and add new styles without
affecting the existing code.

30
A popular way to implement a modular approach to styling is to use a CSS
methodology such as BEM (Block, Element, Modifier) or SMACSS (Scalable and
Modular Architecture for CSS). These methodologies allow developers to structure and
organize styles in a way that is easy to understand and maintain. They also promote a
consistent and predictable style approach throughout the project.

Using a CSS framework can also be a useful best practice for working with advanced
CSS techniques. CSS frameworks, such as Bootstrap, Foundation and Materialize,
provide a set of pre-designed components and styles that developers can use in their
projects. These frameworks can provide a good foundation and an efficient way to
apply styles quickly and consistently. However, it is important to note that using a CSS
framework also requires some learning curve and customization, and it can be limiting
if you want full control and customization options.

Finally, it is important to keep accessibility in mind when using advanced CSS

techniques. This means ensuring that Web sites are accessible to all users, including
people with disabilities. Best practices for accessibility include using semantic HTML,
providing alt text for images and using color contrasts that are easy to read for people
with color disabilities.

Using semantic HTML elements, such as <header>, <nav>, <main>, <section> and
<footer>, helps create meaningful structure in the HTML code, which is important for
screen readers and other assistive technologies. Proper use of alt text for images
ensures that people with visual impairments understand what is in the image, even if
they cannot see the image itself. Ensuring adequate color contrast is essential to
ensure that text is readable by people with color disabilities, such as color blindness.

There are also other aspects of accessibility to consider, such as providing an

alternative textual display for non-text elements such as graphs and charts, ensuring a
clear and consistent focus indicator for interactive elements, and using Accessible
Rich Internet Applications (ARIA) attributes to provide additional information to
assistive technologies.

By following these best practices, students will be able to create visually appealing
and accessible websites using advanced CSS techniques. Understanding and
applying these best practices will not only result in better-designed websites, but also
contribute to a positive user experience for all users, regardless of their abilities or

31
limitations. It is important to keep learning and challenging yourself to improve your
CSS skills and keep up with evolving Web standards and techniques.

5 Examples of CSS code

5.1 Font change
5.1.1 For chapters
h1 {

font-family: "Arial", sans-serif;

font-weight: bold;
font-size: 24px;
}

5.1.2 For text in the paragraphs

p {
font-family: "Georgia", serif;
font-size: 16px;

line-height: 1.5;

5.1.3 For links

a {
font-family: "Helvetica", sans-serif;

font-weight: bold;

font-size: 14px;
color: blue;

text-decoration: none;
}

5.2 Changing text size

5.2.1 For chapters
h1 {

font-size: 24px;
}

5.2.2 For text in the paragraphs

p {
font-size: 16px;

32
}

5.2.3 For links

a {
font-size: 14px;

5.3 Changing color

5.3.1 For chapters
h1 {

color: #FF0000; /* Rood */

}

5.3.2 For text in the paragraphs

p {

color: #333333; /* Donkergrijs */

}

5.3.3 For links

a {
color: #0000FF; /* Blauw */

5.4 Changing background color

5.4.1 For chapters
h1 {

background-color: #f2f2f2;
}

5.4.2 For text in the paragraphs

p {
background-color: #ffffff;

5.4.3 For links

a {

background-color: #ffcc00;

color: #ffffff;
text-decoration: none;

33
5.5 Bold text for links
5.5.1 For chapters
a {

font-family: "Helvetica", sans-serif;

font-size: 14px;
color: blue;

text-decoration: none;
}

a strong {
font-weight: bold;

5.6 Text alignment of bullets

5.6.1 For unordered lists
ul {
list-style-position: inside;

list-style-type: disc;
}

5.6.2 For ordered lists

ol {
list-style-position: outside;

list-style-type: decimal;
}

5.6.3 For custom listings

.custom-list {
list-style-position: inside;

list-style-type: square;

5.7 Distinctive style for quoted text

blockquote {

font-family: "Times New Roman", serif;

34
 font-style: italic;

font-size: 18px;

border-left: 2px solid #999;

padding-left: 10px;

margin: 10px 0;
}

6 Names you can use in CSS to address things in

your HTML/XML code
6.1 Elements
a (anchor)

h1, h2, h3, h4, h5, h6 (heads)

p (paragraph)

span (tension element)

div (division element)

img (image)

ul, ol (disordered and ordered lists)

li (list item)

input (input field)

button (button)

table (table)

tr (table row)

td (table cell)

6.2 Pseudo-classes
:hover (when the mouse hovers over an element)

:active (when an element is pressed)

:focus (when an element gets the focus)

:visited (visited links)

:first-child (the first child of a parent element)

:last-child (the last child of a parent element)

35
 :nth-child(n) (the n-th child of a parent element)

6.3 Pseudo-elements
::before (add content before an element)

::after (add content after an element)

::first-letter (the first letter of a paragraph)

::first-line (the first line of a paragraph)

6.4 Classes and IDs

.class (class selector)

#id (ID-selector)

7 Names you can use in CSS to change the style

7.1 Features
CSS properties are like instructions that specify how a specific element or group of
elements on a Web page should look. These properties can be set with different values
to change the appearance of the content. Each CSS property has an associated
name and a set of values that indicate how that property should be applied.

color (text color)

font-family (font family)

font-size (font size)

font-weight (font weight)

text-align (text align)

background-color (background color)

margin (outer margin)

padding (filling)

border (edge)

width (width)

height (height)

display (display setting)

position (position)

float (alignment)

36
 opacity (opacity)

transition (transition effects)

box-shadow (box shadow)

border-radius (edge radius)

z-index (stacking order)

7.2 Values
CSS values are divided into several categories, such as length units, color values, text
and font properties, position properties and more. The following is a deeper
explanation of some of these categories:

1. Length units: This category includes values that define the size and dimensions
of elements. Examples include:

• Pixels (px): A fixed number of pixels, for example font-size: 16px.

• Percent (%): A percentage of a parent container, such as width: 50%.

• EM: Relative unit based on the element's current font size.

• REM: Relative unit based on the root font size of the document.

2. Color values: Allows developers to define colors for text, backgrounds, borders
and more. There are several ways to specify colors:

• Hexadecimal codes: For example, color: #FF5733 for orange.

• RGB: For example background-color: rgb(255, 120, 0) for the same

orange color.

• RGBA: A variant of RGB that supports transparency, such as

background-color: rgba(255, 120, 0, 0.8).

3. Text and font properties: This category includes values that affect the display of
text:

• Font-family: Specifies the font to be used, such as font-family: Arial, sans-

serif.

• Font-size: Determines the size of the text, for example font-size: 18px.

37
 • Font-weight: Indicates the thickness of the text, such as font-weight: bold.

4. Position and layout values: Allows you to define the position and layout of
elements:

• Position: Specifies how an element should be positioned, such as

position: relative or position: absolute.

• Display: Determines the display behavior of an element, such as display:

block or display: inline.

5. Background properties: Allows you to set background styles:

• Background-color: Determines the background color of an element.

• Background-image: Allows you to set an image as the background.

6. Transition and animation values: These values allow developers to apply

transition effects and animations to elements.

7. Bordereigenschappen: Hiermee kunt u de stijl, breedte en kleur van randen

rond elementen aanpassen.

8. Box model values: These values define the dimensions of an element's box
model, including margins, padding and border.

CSS values can be explicitly defined in style sheets attached to HTML documents. They
can also be included inline within HTML elements, although this is less common
because of the separation of presentation and structure that CSS enables. CSS values
can also be conditionally applied based on media queries to create responsive
designs that adapt to different screen sizes and orientations.

solid (full line)

dashed (dotted line)

none (none)

block (block view)

inline (inline view)

inline-block (inline block view)

flex (flexible display)

relative (relatieve positionering)

38
absolute (absolute positioning)

center (center)

left (align left)

right (align right)

justify (filling)

underline (underline)

italic (italicize)

bold (bold)

39