WEB PROGRAMMING (CSC2248)

Unit 1: Client-side technologies (Part 2:

Cascading Style Sheets)

Combinations: MCsE & PCsE

Year 2, Semester 2
2024-2025 academic year
Module Facilitation Team:
1. Dr Mathias NDUWINGOMA
2. Albert NGIRUWONSANGA

MARCH 10, 2025

University of Rwanda-College of Education

Table of Contents
Unit 1: Client-side technologies (Part 2: CSS) ................................................................................3
2.1. What is CSS? .....................................................................................................................3
2.2. CSS Syntax ........................................................................................................................3
Example Explained .............................................................................................................4
2.3. Advantages of CSS .............................................................................................................4
2.4. Ways to Insert CSS .............................................................................................................5
2.4.1. External CSS ...............................................................................................................5
2.4.2. Internal CSS ................................................................................................................6
2.4.3. Inline CSS ...................................................................................................................7
2.4.4. Online CSS ..................................................................................................................8
2.4.5. Key considerations for CSS ..........................................................................................8
2.4.5.1. Multiple Style Sheets .............................................................................................8
2.4.5.2. Cascading Order ...................................................................................................9
2.5. CSS Comments ............................................................................................................... 10
2.6. CSS Selectors .................................................................................................................. 11
2.6.1. The CSS element Selector .......................................................................................... 11
2.6.1.1. Select element based on name ........................................................................... 11
2.6.1.2. The CSS id Selector ............................................................................................. 11
2.6.1.3. The CSS class Selector ........................................................................................ 12
2.6.1.4. The CSS Universal Selector.................................................................................. 13
2.6.1.5. The CSS Grouping Selector .................................................................................. 13
2.6.2. Pseudo-class selectors (select elements based on a certain state) ............................. 14
2.6.3. Pseudo-elements selectors (select and style a part of an element).............................. 15
2.6.4. Attribute selectors (select elements based on an attribute or attribute value) .............. 17
2.7. HTML and CSS Comments ............................................................................................... 19
2.8. Commonly used properties in CSS and some of their values.............................................. 20
2.9. DO IT YOURSELVES!......................................................................................................... 21
2.10. Using Flexbox Layout in CSS ........................................................................................... 25
2.10.1. Key Concepts of Flexbox: ......................................................................................... 25
2.11. em, pixels and their equivalent in cm .............................................................................. 30
References ................................................................................................................................ 32

Page 2 of 32
Unit 1: Client-side technologies (Part 2: CSS)

2.1. What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a
document written in HTML. It controls the layout, design, colors, fonts, and overall appearance of
web pages.

CSS allows developers to separate the structure (HTML) from the design, making web pages more
accessible and easier to maintain. With CSS, you can define how elements should be displayed on
the screen, in print, or on other media types. It supports features like responsiveness, animations,
transitions, and positioning.

CSS works by targeting HTML elements and applying specific styles to them. Styles can be:
1. Defined inline within HTML elements,
2. Embedded within a <style> tag in the HTML header, or
3. Linked externally via a separate .css file.

The cascading nature of CSS means that styles can inherit properties from parent elements, and
you can control how conflicting rules are applied based on specificity and importance. CSS plays
a crucial role in modern web development by enabling the creation of visually appealing and user-
friendly websites.

When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet.

2.2. CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

Page 3 of 32
The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.

• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
Example

In this example all <p> elements will be center-aligned, with a red text color:

p{
color: red;
text-align: center;
}

Example Explained

• p is a selector in CSS (it points to the HTML element you want to style: <p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value.

2.3. Advantages of CSS

The advantage of CSS is that it can be used at varying levels of specificity. For example, you can
put all your styles into a separate file and link to that file from your web page.

That way, if you want to change the appearance of your site, you can simply edit your CSS file
and make changes that span every page that links to your style sheet. Or if you prefer, you can
include styles at the top of your page so that they apply only to that page. You can also include
styles inside the tags themselves using the style attribute.

Page 4 of 32
2.4. Ways to Insert CSS

There are different ways of inserting a style sheet or applying a style sheet to an HTML file. We
will discuss the following:
1. External CSS
2. Internal CSS
3. Inline CSS
4. Online CSS

2.4.1. External CSS

With an external style sheet, you can change the look of an entire website by changing just one
file! Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.

Example
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor and must be saved with a .css extension.
The external .css file should not contain any HTML tags. Here is how the "mystyle.css" file looks
like:
"mystyle.css"
body {
background-color: lightblue;
}

Page 5 of 32
h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value and the unit (such
as margin-left: 20 px;). The correct way is margin-left: 20px;

2.4.2. Internal CSS

An internal style sheet may be used if one single HTML page has a unique style. The internal style
is defined inside the <style> element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Page 6 of 32
2.4.3. Inline CSS

An inline style may be used to apply a unique style for a single element. To use inline styles, add
the style attribute to the relevant element. The style attribute can contain any CSS property.

Example
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly.

More on Inline CSS (including Styles in Tags)

You’ve already seen how HTML pages are created using tags. An attribute is an additional bit of
information that somehow affects the behavior of a tag. Attributes are included inside the opening
tag. Here’s an example:

<tag attribute="value">
Some attributes can be used with nearly any tag; others are highly specific. One attribute that can
be used with nearly any tag is style. By including the style attribute in a tag, you can include one
or more style rules within a tag itself. Here’s an example using the <h1> tag:

<h1 style="font-family: algerian; color:green; ">Heading</h1>

Page 7 of 32
2.4.4. Online CSS

The Online CSS is a method used to apply CSS styles to an HTML file, enhancing its visual
appearance. Unlike local CSS, it requires an internet connection to function, as the styles are
typically linked from an external source. To implement this, the CSS code is placed within the
<head></head> tags of the HTML document, ensuring that the styles are applied to the page when
it is loaded in a browser. This allows for easy and centralized management of design elements
across multiple web pages.

The following are two examples of online CSS:

1) <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstra
p.min.css" rel="stylesheet">

2) <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

Did you know?

You can find more CSS styles from https://www.jsdelivr.com/ by searching for example
water CSS in the search box and hit enter key of your keyboard.

2.4.5. Key considerations for CSS

You can consider the following while applying CSS to your HTML documents.

2.4.5.1. Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the
value from the last read style sheet will be used.

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

Page 8 of 32
Then, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
color: orange;
}

Example

If the internal style is defined after the link to the external style sheet, the <h1> elements will be
"orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Example

However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.4.5.2. Cascading Order

What style will be used when there is more than one style specified for an HTML element? All the
styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number
one has the highest priority:

Page 9 of 32
 1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority and will override external and internal styles and browser
defaults.

2.5. CSS Comments

Comments are used to explain the code and may help when you edit the source code at a later date.
Comments are ignored by browsers. A CSS comment is placed inside the <style> element, and starts
with /* and ends with */:

Example
/* This is a single-line comment */
p {
color: red;
}

You can add comments wherever you want in the code:

Example

p {
color: red; /* Set text color to red */
}

Comments can also span multiple lines:

Example
/* This is
a multi-line
comment */

p {
color: red;
}

Page 10 of 32
2.6. CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide
CSS selectors into various categories, some of them are hereafter highlighted:

1. Simple selectors (select elements based on name, id, class)

2. Pseudo-class selectors (select elements based on a certain state)
3. Pseudo-elements selectors (select and style a part of an element)
4. Attribute selectors (select elements based on an attribute or attribute value)

Each of above CSS selector category is briefly explained hereafter:

2.6.1. The CSS element Selector

The CSS simple selectors can select element based on name, id or class. For more details about
each of them, you can go through the following 3 sections.

2.6.1.1. Select element based on name

The element selector selects HTML elements based on the element name.

p{
text-align: center;
color: red;
}

2.6.1.2. The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of an
element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example
The CSS rule below will be applied to the HTML element with id="para1" attribute:

Page 11 of 32
#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

2.6.1.3. The CSS class Selector

The class selector selects HTML elements with a specific class attribute. To select elements with
a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" attribute will be red and center-aligned:

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only <p> elements with class="center" will be center-aligned:

p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.

Example
In this example the <p> element will be styled according to class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!

Page 12 of 32
2.6.1.4. The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:

*{
text-align: center;
color: blue;
}

2.6.1.5. The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions. Look at the
following CSS code (the h1, h2, and p elements have the same style definitions):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code. To group selectors, separate each
selector with a comma.

Example
In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

Page 13 of 32
 CSS Simple Selectors are briefly highlighted in Figure 1.

Figure 1: CSS simple selectors

2.6.2. Pseudo-class selectors (select elements based on a certain state)

Pseudo-class selectors are helpful for styling elements based on interactions or their current state
without needing JavaScript! The following example uses this type of selectors

• a:hover: This targets links when they are hovered over by the mouse and changes their
color to red.
• p:focus: This targets the paragraph when it gets focus (you can click on the paragraph to
focus it), and it changes the background color to yellow.
• a:visited: This targets links that the user has already clicked on and changes their color to
purple.

Example:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Pseudo-class Selector Example</title>
7 <style>
8 /* Change the color of links when hovered over */
9 a:hover {
10 color: red;
11 }
12
13 /* Style the first paragraph when it is focused */
14 p:focus {

Page 14 of 32
15 background-color: yellow;
16 }
17
18 /* Style the visited links */
19 a:visited {
20 color: purple;
21 }
22 </style>
23 </head>
24 <body>
25
26 <a href="https://www.example.com">Visit Example</a>
27 <p tabindex="0">Click to focus this paragraph and change its background color.</p>
28
29 </body>
30 </html>

Note:
1. The <p tabindex="0"> element is a paragraph with a tabindex attribute set to 0.
2. tabindex="0": This attribute makes the paragraph (<p>) element focusable, meaning that it
can be selected and interacted with when navigating through the page using the "Tab" key
on the keyboard. The 0 value places the element in the natural tab order, allowing users to
focus on it after focusing on other focusable elements like links or form controls.

2.6.3. Pseudo-elements selectors (select and style a part of an element)

Pseudo-elements allow for more specific styling of parts of an element without needing extra
markup!

Example:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Pseudo-element Selector Example</title>
7 <style>
8 /* ::before: Inserts content before the element */
9 h1::before {

Page 15 of 32
10 content: "Important: ";
11 font-weight: bold;
12 color: red;
13 }
14
15 /* ::after: Inserts content after the element */
16 h1::after {
17 content: " - End of Title";
18 font-style: italic;
19 color: blue;
20 }
21
22 /* ::first-letter: Styles the first letter of the element */
23 p::first-letter {
24 font-size: 2em;
25 color: green;
26 font-weight: bold;
27 }
28
29 /* ::first-line: Styles the first line of the element */
30 p::first-line {
31 text-transform: uppercase;
32 font-size: 1.2em;
33 color: orange;
34 }
35 </style>
36 </head>
37 <body>
38 <h1>Web Development is Fun!</h1>
39 <p>This is an example of using pseudo-elements in CSS. The first letter and first line will be
40 styled separately using ::first-letter and ::first-line. Additional content will be added before and
41 after the title using ::before and ::after.</p>
42 </body>
43 </html>

Page 16 of 32
 The Table 1 briefly explains the role of each selector.

Table 1: Explanation of pseudo-element selectors

h1::before
The ::before pseudo-element inserts content before the actual content of the <h1> element. In
this example, it adds the text "Important: " in red and bold before the heading text.
h1::after
The ::after pseudo-element inserts content after the content of the <h1> element. In this
example, it adds the text " - End of Title" in blue and italicized.
p::first-letter
The ::first-letter pseudo-element selects the first letter of a paragraph and applies custom
styles. In this case, it makes the first letter larger (2em), green, and bold.
p::first-line
The ::first-line pseudo-element styles the first line of text within a paragraph. Here, the first
line is transformed to uppercase, made larger (1.2em), and colored orange.

2.6.4. Attribute selectors (select elements based on an attribute or

attribute value)

Attribute selectors allow you to target elements based on the presence or value of attributes,
offering great flexibility in styling without needing to add extra classes or IDs.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Attribute Selector Example</title>
7 <style>
8 /* Select all anchor tags with an href attribute */
9 a[href] {
10 color: blue;
11 text-decoration: none;
12 }
13
14 /* Select all anchor tags with a specific href value */
15 a[href="https://www.example.com"] {
16 color: green;
17 font-weight: bold;
18 }
19
20 /* Select all input fields with type="text" */
21 input[type="text"] {
22 background-color: lightyellow;
23 border: 1px solid #ccc;
24 padding: 8px;
25 }
26
27 /* Select all elements with a "data-info" attribute */
28 [data-info] {
29 border: 2px dashed #333;
30 padding: 5px;
31 background-color: #f0f0f0;
32 }
33
34 /* Select all elements with a "data-info" attribute containing the value "important" */
35 [data-info="important"] {
36 background-color: yellow;
37 font-weight: bold;
38 }
39 </style>
40 </head>
41 <body>
42
43 <a href="https://www.example.com">Visit Example</a><br>
44 <a href="https://www.otherlink.com">Visit Other Link</a><br>
45
46 <input type="text" placeholder="Enter your name"><br>
47 <input type="password" placeholder="Enter your password"><br>
48
49 <div data-info="important">This div has important information.</div>
50 <div data-info="general">This div has general information.</div>
51 </body>
52 </html>

Page 18 of 32
The Table 2 provides brief explanation of the Attribute Selectors used in the previous example.

Table 2: Sample attributes selectors

a[href]
This selector targets all <a> elements that have an href attribute, regardless of its value. The
style changes the text color to blue and removes the underline from the links.
a[href="https://www.example.com"]
This selector targets all <a> elements that have an href attribute with a value of exactly
"https://www.example.com". It changes the link's color to green and makes it bold.
input[type="text"]
This selector targets all <input> elements that have a type of attribute equal to "text". It applies
a light-yellow background, adds a border, and adds padding to text input fields.
[data-info]
This selector targets any element with a data-info attribute, regardless of its value. It adds a
dashed border, padding, and a light background color.
[data-info="important"]
This selector targets any element with a data-info attribute set to "important". It changes the
background color to yellow and makes the text bold.

2.7. HTML and CSS Comments

From the HTML session, you learned that you could add comments to your HTML source by using
the <!-- ... --> syntax.

In the following example, we use a combination of HTML and CSS comments:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading</h2>

<!-- These paragraphs will be red -->

<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>

</body>
</html>

2.8. Commonly used properties in CSS and some of their values

1) border-width:
− thin
− medium
− thick

2) border-style:
− None
− Hidden
− Dotted
− Dashed
− Solid
− Double
− Groove

3) border-color:
− Lightblue
− Red
− Mistyrose

4) text-decoration:
− underline
− overline
− line-through
− blink
− none

5) font-style:
− normal
− italic

Page 20 of 32
 − oblique
6) font-weight:
− normal
− bold
− bolder
− lighter
− 100
− 900
7) line-height:
− 2
− 1.5
8) font-family:
− Arial
− Times New Roman

2.9. DO IT YOURSELVES!

The following examples reflect on various ways of using CSS in a web page. Kindly consider
checking the results they give and adapt to them in the web pages that you are designing.

Do it yourselves-Example 1: Using CSS at the top of the page

<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<style type="text/css">

body{
margin:100px 260px 80px 100px; /*top right bottom left margins*/
padding-left:20em;
}
p{
width:19em;
position:absolute;
font-family:Arial, Calibri,monotype corsiva;
font-weight:bold;

Page 21 of 32
 font-size:15px;
color:normal;
border-width:thick;
border-style:groove;
text-decoration:line-through;
font-style:italic;
font-weight:bolder;
background-color:silver;
left:2em;
}
</style>
</head>
<body>
<p> Manual Information processing has certain limitations whereas computerized databases and
software can increase productivity. This module addresses advanced issues in relational database
design and software engineering. It is aimed to help students to analyze the real-life problems
and explore the possibilities how a computerized system can help in solving the problems. This
module will also cover Programming in Visual Basic <br>
Database and Internet programming<br>
Database, Visual Basic and Software Engineering<br>
Artificial Intelligence</p>

Numeric types allow you to specify a display size, which affects the way MySQL displays results.
The display size bears no relation to the internal storage provided by each data type. In addition,
the floating types allow you to optionally specify the number of digits that follow the decimal
point. In such cases, the digits value should be an integer from 0 to 30 that is at most two less than
the display size. If you do make the digits value greater than two less than the display size, the
display size will automatically change to two more than the digits value.
<p1>
<h1>Appendix C. phpMyAdmin</h1>
About database performance in your applications (and if you're reading this book, you probably
do), benchmarking needs to become part of your development testing process. When you're testing
an upgrade to MySQL or some MySQL configuration changes, run the benchmark tests you
developed while building the application. Look at the results. Make sure they don't surprise
</body>

Page 22 of 32
</html>

Do it yourselves-Example 2

<!DOCTYPE html>
<html>
<head>
<title>CSS Examples</title>
<style type="text/css">
.dropcap {font-size: 420%; font-family: Hervetica}
</style>
</head>
<body>
<span class="dropcap">O</span>nce upon a time...
</body>
</html>

Do it yourselves-Example 3: Using CSS from an external file “EX1.css”

Codes for EX1.css

body{
background-image:Penguins.jpg;
}
h1{
color:blue;
background-color:wheat;
font-size:40;
}
p{
color:black;
background-color:silver;
font-size:28;
font-family:monospace;
margin: .5em;
padding:1em;
border:thin solid brown;
white-space: normal;
}

NB: This file is to be saved as EX1.css

Page 23 of 32
Codes for EX1.html

<!DOCTYPE html>
<html>
<head>
<title>C plus plus</title>
<link rel="stylesheet" type="text/css" href="EX1.css"/>
</head>
<body background="Penguins.jpg">
<h1>Introduction</h1>
<p>
C++ is an object-oriented language and is one of the most frequently used languages for
development due to its efficiency, relative portability, and its large number of libraries. C++ was
created to add OO programming to another language, C.
</body>
</html>

Do it yourselves-Example 4: controlling the page layout

<!DOCTYPE html>
<html>
<head>
<title>Use of Div tag to set page width</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#left
{
width:300px;
margin:30px;
border:thin solid red;
float:left }
#right
{
width:950px;
margin:30px 0 0 0;
border:thick dotted green;
float:right;
}
</style>
<body>
<div id="left">
Page 24 of 32
Comments <p>
You can put comments into HTML pages to describe the page itself or to provide some kind of
indication of the status of the page. Some source code control programs store the page status in
comments, for example. Text in comments is ignored when the HTML file is parsed.
</div>
<div id="right">
Lists
<p>Although the tags and the list items can be formatted any way you like in your HTML code, I
prefer to arrange the tags so that the list tags are on their own lines and each new item starts on a
new line. This way, you can easily select the whole list and the individual elements.</p>
<p>The list tags can be :</p>
<ul>
<li>Ordered list which uses ol tag</li>
<li>Unordered list which uses ul tag</li>
</ul>
</div>
</body>
</html>

2.10. Using Flexbox Layout in CSS

Flexbox (short for Flexible Box) is a layout model in CSS designed to provide an efficient way to
align and distribute space among items within a container, even when their size is unknown or
dynamic. It makes building complex layouts much easier and more flexible compared to traditional
methods like floats or positioning.

2.10.1. Key Concepts of Flexbox:

1. Flex Container: The parent element that holds the flex items. To enable Flexbox on a
container, you apply the display: flex; property to it.
.container {
display: flex;
}
2. Flex Items: The child elements within the flex container. These are the elements you want
to align or distribute space within the container.
.item {
flex: 1;

Page 25 of 32
 }
3. Main Axis & Cross Axis:
• Main Axis: The axis along which the flex items are laid out (either horizontally or
vertically depending on the flex-direction).
• Cross Axis: The axis perpendicular to the main axis (vertical if the main axis is
horizontal, and vice versa).
4. Flexbox Properties for the Container:
• flex-direction: Defines the direction in which the flex items are placed within the
container. Options include:
✓ row: Horizontal (default)
✓ column: Vertical
✓ row-reverse: Reverse horizontal
✓ column-reverse: Reverse vertical
• justify-content: Aligns items along the main axis. Options include:
✓ flex-start: Aligns items to the start of the container
✓ flex-end: Aligns items to the end
✓ center: Centers items
✓ space-between: Distributes items with equal space between them
✓ space-around: Distributes items with space around them
✓ space-evenly: Distributes items with equal space between and around them
• align-items: Aligns items along the cross axis (vertical by default). Options
include:
✓ flex-start: Aligns items to the start
✓ flex-end: Aligns items to the end
✓ center: Centers items
✓ stretch: Stretches items to fill the container
• align-content: Aligns rows (if there are multiple lines of flex items) along the cross
axis.
5. Flexbox Properties for the Items:
• flex: This is a shorthand for flex-grow, flex-shrink, and flex-basis. It defines how
items grow and shrink within the container:

Page 26 of 32
 ✓ flex-grow: Defines how much an item will grow relative to other items.
✓ flex-shrink: Defines how much an item will shrink relative to other items
when space is tight.
✓ flex-basis: Defines the initial size of an item before it starts growing or
shrinking.
• align-self: Allows individual items to override the align-items property and align
themselves differently along the cross axis.
• order: Controls the order of flex items, allowing you to change their visual
arrangement without affecting the HTML structure.

Example 1 of using Flexbox Layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
main {
flex: 1; /* Makes main content take the available space */
padding: 20px;
background-color: #f4f4f4;
}
footer {
background-color: #333;

Page 27 of 32
 color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>Flexbox Layout Example</h1>
</header>
<main>
<p>This is the main content area. It will take up the remaining space in the layout.</p>
</main>
<footer>
<p>Footer content</p>
</footer>
</body>
</html>

The CSS rules highlighted in the above example specify the characteristics of each element. For
example, the body element uses a vertical Flexbox layout that fills the entire height of the viewport,
without any margin. This is often used to create full-height layouts where child elements (like
header, main content, and footer) can be stacked vertically and arranged flexibly within the
available space. For details about some properties see the table below:

1. display: flex;
This sets the body element to use the Flexbox layout model. When you set an element to
display: flex, its children become flex items and can be arranged in a flexible, responsive
manner.
2. flex-direction: column;
By default, Flexbox arranges its items in a row (horizontally). However, setting flex-
direction: column changes the flex items' direction to vertical. This means the children of the
body element will be stacked vertically (one on top of the other), instead of horizontally.
3. height: 100vh;
This sets the height of the body element to 100% of the viewport height (the height of the
visible area of the browser window). vh stands for "viewport height," where 1vh equals 1% of
the height of the viewport. So, 100vh makes the body take up the entire vertical height of the
browser window.
4. margin: 0;

Page 28 of 32
 This removes any default margin that browsers may apply to the body element. Many
browsers have a default margin around the body, which can cause unintended spacing. Setting
margin: 0 eliminates that space, ensuring the content takes up the full height and width of the
window.
5. flex: 1;
This allows the <main> element to grow and take up any available space within a flex
container. It distributes the space equally, so if there is any extra room in the flex container, the
<main> element will fill it.
6. padding: 20px;
This adds padding of 20px inside the <main> element, creating space between its content and
its borders.
7. background-color: #f4f4f4;
This sets the background color of the <main> element to a light gray color (#f4f4f4).

Example 2 using Flexbox Layout

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh;
flex-direction:row;
}
.item {
width:400px;
height:200px;
background-color: #4CAF50;
text-align: center;
line-height:1.5;
color:white;
font-size: 18px;
}
</style>

Page 29 of 32
</head>
<body>
<div class="container">
<div class="item"><p>Item 1</p>
</div>
<div class="item"><p>Item 2</p>
</div>
<div class="item"><p>Item 3</p>
</div>
</div>
</body>
</html>

Reflection on Flexbox codes used in the Example 2:

• The .container is set to display: flex;, enabling the Flexbox layout.
• The justify-content: space-between; ensures there is space between the items.
• The align-items: center; aligns the items in the center of the container.
• Each .item has a set width and height, along with a background color for visibility.

2.11. em, pixels and their equivalent in cm

The "em" unit is a relative measurement in typography that is based on the font size. It is typically
used to define the size of text or other elements in CSS for web design. One em is equal to the
current font size. For example, if the font size is 16px, then 1em equals 16px.

The centimeter (cm), on the other hand, is an absolute unit of length, not related to the font size.

To convert em to cm, you need to know the font size in pixels (px) and the resolution of the display
or medium in dots per inch (DPI). Typically, web design assumes a standard of 96 DPI, where 1
inch equals 2.54 cm. Here's the process:

Conversion Formula:

1) 1 inch = 2.54 cm
2) 1 inch = 96 pixels (for standard web display)

Thus, to convert em to cm:

Page 30 of 32
 • Determine the number of pixels per em based on the font size.
• Convert pixels to inches by dividing the number of pixels by 96.
• Convert inches to cm by multiplying by 2.54.

Example:

If the font size is 16px:

• 1 em = 16px
• 16px / 96 = 0.1667 inches
• 0.1667 inches * 2.54 = 0.423 cm
• So, 1 em (if the font size is 16px) is approximately 0.423 cm.

Attention: This will change depending on the actual font size you're using, and different devices
may have different DPI settings, so the conversion is not always fixed.

What was the origin of "em"?

In typography, "em" is a relative unit of measurement that refers to the width of the capital
letter "M" in the current font. The width of "M" was historically considered to be the
reference for defining proportions in typesetting, as it is often the widest letter in many
fonts.

1 em is equal to the width of the capital letter "M" in the current font.

Page 31 of 32
References

Lemay, L., & Colburn, R. (2011). Web Publishing with HTML and CSS (in one hour a day). 800
East 96th Street, Indianapolis, Indiana 46240: Sams Publishing.
W3C. (1998, May 12). Cascading Style Sheets, level 2.
W3C. (2001, July 16). CSS Techniques for Web Content Accessibility Guidelines 2.0.

Page 32 of 32