1

Contents
1 Use CSS styles................................................................................................................................ 10

1.1 CSS Introduction.................................................................................................................... 10

1.2 CSS Syntax ............................................................................................................................. 10

1.2.1 HTML element selector (E)............................................................................................ 10

1.2.2 Class selector................................................................................................................. 10

1.2.3 ID selector ..................................................................................................................... 10

1.2.4 Grouping ....................................................................................................................... 10

1.2.5 CSS Combinator............................................................................................................. 11

1.2.6 Pseudo class (:) .............................................................................................................. 14

1.2.7 Pseudo Element (::) ....................................................................................................... 15

1.2.8 E[attribute] .................................................................................................................... 15

1.2.9 E[attribute=value] ......................................................................................................... 16

1.2.10 CSS Selectors ................................................................................................................. 16

1.3 Types of CSS .......................................................................................................................... 16

1.3.1 Inline CSS ....................................................................................................................... 16

1.3.2 Internal CSS ................................................................................................................... 16

1.3.3 External CSS................................................................................................................... 16

1.4 CSS Colors.............................................................................................................................. 17

1.4.1 Color name .................................................................................................................... 17

1.4.2 RGB value ...................................................................................................................... 17

1.4.3 Hexadecimal color......................................................................................................... 17

1.4.4 HSL value ....................................................................................................................... 18

1.4.5 Example of using color in CSS ....................................................................................... 18

1.5 CSS Backgrounds ................................................................................................................... 19

2
 1.5.1 Shorthand property ...................................................................................................... 19

1.6 CSS Box Model ...................................................................................................................... 19

1.6.1 CSS Borders ................................................................................................................... 20

1.6.2 CSS Margins ................................................................................................................... 20

1.6.3 CSS Padding ................................................................................................................... 20

1.6.4 CSS Height ..................................................................................................................... 20

1.6.5 CSS Width ...................................................................................................................... 21

1.7 CSS Outline ............................................................................................................................ 22

1.7.1 CSS Outline Style ........................................................................................................... 22

1.7.2 CSS Outline Width ......................................................................................................... 23

1.7.3 CSS Outline Color .......................................................................................................... 23

1.7.4 CSS Outline - Shorthand property ................................................................................. 24

1.7.5 CSS Outline Offset ......................................................................................................... 24

1.8 CSS Text ................................................................................................................................. 24

1.8.1 Text Color ...................................................................................................................... 25

1.8.2 Text Alignment and Text Direction ............................................................................... 25

1.8.3 Text Alignment .............................................................................................................. 25

1.8.4 Text Align Last ............................................................................................................... 26

1.8.5 Text Direction ................................................................................................................ 26

1.8.6 Vertical Alignment......................................................................................................... 26

1.8.7 Text Decoration............................................................................................................. 26

1.8.8 Add a Decoration Line to Text....................................................................................... 27

1.8.9 Specify a Color for the Decoration Line ........................................................................ 27

1.8.10 Specify a Style for the Decoration Line ......................................................................... 27

1.8.11 The Shorthand Property................................................................................................ 27

3
 1.8.12 Text Transformation ..................................................................................................... 28

1.8.13 Text Spacing .................................................................................................................. 28

1.9 CSS Fonts ............................................................................................................................... 30

1.9.1 Importance of selecting a Font ..................................................................................... 30

1.9.2 Generic Font Families.................................................................................................... 30

1.9.3 Difference Between Serif and Sans-serif Fonts............................................................. 30

1.9.4 Some Font Examples ..................................................................................................... 31

1.9.5 The CSS font-family Property ........................................................................................ 31

1.9.6 Font Style ...................................................................................................................... 31

1.9.7 Font Weight................................................................................................................... 32

1.9.8 Font Variant .................................................................................................................. 32

1.9.9 Font Size ........................................................................................................................ 32

1.9.10 Set Font Size With Pixels ............................................................................................... 33

1.9.11 Set Font Size With Em ................................................................................................... 33

1.9.12 Use a Combination of Percent and Em ......................................................................... 34

1.9.13 Responsive Font Size ..................................................................................................... 34

1.9.14 Google Fonts ................................................................................................................. 35

1.9.15 Use Multiple Google Fonts............................................................................................ 35

1.10 CSS Icons ............................................................................................................................... 36

1.10.1 How To Add Icons ......................................................................................................... 36

1.10.2 Font Awesome Icons ..................................................................................................... 36

1.10.3 Bootstrap Icons ............................................................................................................. 36

1.10.4 Google Icons .................................................................................................................. 36

1.11 CSS Links ................................................................................................................................ 37

1.11.1 Text Decoration............................................................................................................. 38

4
 1.11.2 Link Buttons .................................................................................................................. 38

1.12 CSS Lists ................................................................................................................................. 38

1.12.1 HTML Lists and CSS List Properties ............................................................................... 38

1.12.2 Different List Item Markers ........................................................................................... 39

1.12.3 An Image as The List Item Marker ................................................................................ 39

1.13 CSS Tables ............................................................................................................................. 39

1.13.1 Table Borders ................................................................................................................ 39

1.13.2 Full-Width Table ............................................................................................................ 39

1.13.3 Collapse Table Borders.................................................................................................. 40

1.13.4 Table Width and Height ................................................................................................ 40

1.13.5 CSS Table Alignment ..................................................................................................... 40

1.13.6 CSS Table Style .............................................................................................................. 41

1.13.7 CSS Responsive Table .................................................................................................... 42

1.14 CSS Display ............................................................................................................................ 42

1.14.1 The display Property ..................................................................................................... 42

1.14.2 Block-level Elements ..................................................................................................... 42

1.14.3 Inline Elements.............................................................................................................. 43

1.14.4 Display: none;................................................................................................................ 43

1.14.5 Override The Default Display Value .............................................................................. 43

1.14.6 Hide an Element - display:none or visibility:hidden?.................................................... 43

1.14.7 Using width, max-width and margin: auto; .................................................................. 44

1.15 CSS Position ........................................................................................................................... 44

1.15.1 The position Property ................................................................................................... 45

1.15.2 position: static; .............................................................................................................. 45

1.15.3 position: relative; .......................................................................................................... 45

5
 1.15.4 position: fixed; .............................................................................................................. 45

1.15.5 position: absolute; ........................................................................................................ 46

1.15.6 position: sticky; ............................................................................................................. 46

1.15.7 Positioning Text In an Image ......................................................................................... 47

1.16 CSS Overflow ......................................................................................................................... 47

1.16.1 overflow-x and overflow-y ............................................................................................ 48

1.16.2 CSS Float ........................................................................................................................ 48

1.17 CSS Blocks.............................................................................................................................. 49

1.17.1 The display: inline-block Value...................................................................................... 49

1.17.2 Using inline-block to Create Navigation Links............................................................... 50

1.18 CSS Alignment ....................................................................................................................... 50

1.18.1 CSS Layout - Horizontal & Vertical Align ....................................................................... 50

1.18.2 Center Align Elements ................................................................................................... 50

1.18.3 Center Align Text ........................................................................................................... 51

1.18.4 Center an Image ............................................................................................................ 51

1.18.5 Left and Right Align - Using position ............................................................................. 51

1.18.6 Left and Right Align - Using float................................................................................... 52

1.18.7 The clearfix Hack ........................................................................................................... 52

1.18.8 Center Vertically - Using padding.................................................................................. 52

1.18.9 Center Vertically - Using line-height ............................................................................. 53

1.18.10 Center Vertically - Using position & transform ......................................................... 53

1.18.11 Center Vertically - Using Flexbox .............................................................................. 54

1.19 CSS Opacity ........................................................................................................................... 54

1.19.1 Transparent Image ........................................................................................................ 54

1.19.2 Transparent Hover Effect .............................................................................................. 54

6
 1.19.3 Transparent Box ............................................................................................................ 55

1.19.4 Transparency using RGBA ............................................................................................. 55

1.19.5 Text in Transparent Box ................................................................................................ 56

1.20 CSS Navigation bar ................................................................................................................ 56

1.20.1 Navigation Bar = List of Links ........................................................................................ 56

1.20.2 CSS Vertical Navigation Bar ........................................................................................... 57

1.20.3 Vertical Navigation Bar Examples ................................................................................. 59

1.20.4 Active/Current Navigation Link ..................................................................................... 60

1.20.5 Full-height Fixed Vertical Navbar .................................................................................. 61

1.20.6 Horizontal Navigation Bar ............................................................................................. 61

1.20.7 Inline List Items ............................................................................................................. 62

1.20.8 Floating List Items ......................................................................................................... 62

1.20.9 Horizontal Navigation Bar Examples ............................................................................. 63

1.20.10 Active/Current Navigation Link ................................................................................. 64

1.21 CSS Drop Downs .................................................................................................................... 64

1.21.1 Right-Align Links ............................................................................................................ 65

1.21.2 Border Dividers ............................................................................................................. 66

1.21.3 Fixed Navigation Bar ..................................................................................................... 67

1.21.4 Sticky Navbar................................................................................................................. 68

1.21.5 Responsive Topnav ....................................................................................................... 69

1.21.6 Responsive Sidenav ....................................................................................................... 70

1.21.7 Dropdown Navbar ......................................................................................................... 70

1.22 CSS Image Gallery.................................................................................................................. 72

1.23 CSS Forms .............................................................................................................................. 73

1.23.1 Styling Input Fields ........................................................................................................ 73

7
 1.23.2 Padded Inputs ............................................................................................................... 73

1.23.3 Bordered Inputs ............................................................................................................ 73

1.23.4 Colored Inputs ............................................................................................................... 74

1.23.5 Focused Inputs .............................................................................................................. 74

1.23.6 Input with icon/image ................................................................................................... 74

1.23.7 Animated Search Input ................................................................................................. 75

1.23.8 Styling Textareas ........................................................................................................... 75

1.23.9 Styling Select Menus ..................................................................................................... 75

1.23.10 Styling Input Buttons................................................................................................. 76

1.24 CSS Counters ......................................................................................................................... 76

1.24.1 Automatic Numbering With Counters .......................................................................... 76

1.24.2 Nesting Counters........................................................................................................... 77

1.25 CSS Tooltips ........................................................................................................................... 77

1.25.1 Basic Tooltip .................................................................................................................. 78

1.25.2 Positioning Tooltips ....................................................................................................... 79

1.25.3 Tooltip Arrows............................................................................................................... 80

1.26 CSS Buttons ........................................................................................................................... 81

1.26.1 Basic Button Styling....................................................................................................... 81

1.26.2 Hoverable Buttons ........................................................................................................ 81

1.26.3 Disabled Buttons ........................................................................................................... 82

1.26.4 Button Groups ............................................................................................................... 82

1.26.5 Animated Buttons ......................................................................................................... 83

1.27 CSS Transitions and Animation ............................................................................................. 84

1.27.1 CSS Transitions .............................................................................................................. 84

1.27.2 CSS Animations ............................................................................................................. 87

8
1.28 CSS 2D and 3D transformation ............................................................................................. 91

1.28.1 CSS 2D Transforms ........................................................................................................ 91

1.28.2 CSS 3D Transforms ........................................................................................................ 92

1.29 CSS text Effects...................................................................................................................... 93

1.30 Object Fit ............................................................................................................................... 95

1.30.1 Using object-fit: cover; .................................................................................................. 95

1.30.2 Using object-fit: contain;............................................................................................... 96

1.30.3 Using object-fit: fill; ....................................................................................................... 96

1.30.4 Using object-fit: none; .................................................................................................. 96

1.30.5 Using object-fit: scale-down; ........................................................................................ 96

1.31 CSS Flexbox ........................................................................................................................... 96

1.31.1 CSS Flexbox Layout Module .......................................................................................... 96

1.32 Exercises ................................................................................................................................ 97

9
1 Use CSS styles
1.1 CSS Introduction

CSS stands for Cascading Style Sheets. A language describes the presentation of a web page. CSS can
be used to control the layout, colours, fonts, and other aspects of the page.

1.2 CSS Syntax

CSS follows a specific syntax for styling HTML elements. Here are the key components of CSS syntax:

1.2.1 HTML element selector (E)

The most basic way to apply styles is by selecting HTML elements directly. For example, to style all <p>
elements, you can use:

p{
/* Your styles here */
}

1.2.2 Class selector

Class selectors allow you to style elements based on their class attribute. They are denoted by a period
followed by the class name. For example:

.button {
/* Your styles here */
}

1.2.3 ID selector

ID selectors are used to style a specific HTML element with a unique ID attribute. They are denoted by
a hash symbol followed by the ID name. For example

#header {
/* Your styles here */
}

1.2.4 Grouping

You can apply the same styles to multiple selectors by grouping them together. For example:

h1, h2, h3 {
/* Your styles here */
} 10
1.2.5 CSS Combinator

CSS combinators help you target elements based on their relationship to other elements. There are
several types of combinators

1.2.5.1 Descendant selector (space)

This selects an element that is a descendant of another element. For example:

<style>
div p {
color: #009900;
font-size: 32px;
font-weight: bold;
margin: 0px;
text-align: center;
}
</style>
<body>
<div>Descendant selector property</div>
<div>
<div>child div content</div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<p>Hello</p>
<p>World</p>
</body>

11
1.2.5.2 Child selector (>)

This selects an element that is a direct child of another element. For example

<style>
div > p {
color: #009900;
font-size: 32px;
font-weight: bold;
margin: 0px;
text-align: center;
}
</style>
<body>
<div>Child selector property</div>
<div>
<div>child div content</div>
<p>This is a child also, but a paragraph</p>
</div>
<p>Hello</p>
<p>World</p>
</body>

12
1.2.5.3 Adjacent sibling selector (+)

The Adjacent sibling selector is used to select the element that is adjacent or the element that is next
to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.

<style>
div + p {
color: #009900;
font-size: 32px;
font-weight: bold;
margin: 0px;
text-align: center;
}
</style>
<body>
<div>Adjacent sibling selector property</div>
<p>First paragraph next to a div</p>
<div>
<div>child div content</div>
<p>Second paragraph next to a div</p>
</div>
<p>Third paragraph next to a div</p>
<p>Fourth paragraph next to a paragraph [<i>not affected by this
CSS</i>]</p>
</body>

13
1.2.5.4 General sibling selector (~)

The general sibling selector is used to select the element that follows the first selector element and
also shares the same parent as the first selector element. This can be used to select a group of
elements that share the same parent element. In other words, this selects elements that are siblings
of an element.

<style>
div ~ p {
color: #009900;
font-size: 32px;
font-weight: bold;
margin: 0px;
text-align: center;
}
</style>
<body>
<div>General sibling selector property</div>
<p>First paragraph</p>
<div>
<div>child div content</div>
<p>Second paragraph</p>
</div>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
</body>

1.2.6 Pseudo class (:)

A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS
selector to add an effect to existing elements based on their states. For Example, changing the style
of an element when the user hovers over it, or when a link is visited. All of these can be done using
Pseudo Classes in CSS. Note that pseudo-class names are not case-sensitive.

Bellow is the syntax:

selector: pseudo-class{
property: value;
}

14
There are many Pseudo-classes in CSS but the ones that are most commonly used are as follows :hover
Pseudo-class: This pseudo-class is used to add a special effect to an element when our mouse pointer
is over it. The below example demonstrates that when your mouse enters the box area, its background
color changes from yellow to orange.

Example: This example shows the hover pseudo-class in CSS

<style>
.box {
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}
.box:hover {
background-color: orange;
}
</style>
<body>
<h2>:hover Pseudo-class</h2>
<div class="box">My color changes if you hover over me!</div>
</body>

1.2.7 Pseudo Element (::)

Pseudo-elements target specific parts of an element, such as the first line or first letter. For example:

p::first-line {
/* Your styles here */
}

Class exercises: https://www.geeksforgeeks.org/css-pseudo-elements/?ref=lbp

1.2.8 E[attribute]

This selects elements with a specific attribute. For example:

input[type="text"] {
/* Your styles here */
}

15
1.2.9 E[attribute=value]

This selects elements with a specific attribute and value. For example

1.2.10 CSS Selectors

Here is a must visit link: https://www.w3schools.com/cssref/trysel.php

a[href="https://example.com"] {
/* Your styles here */
}

1.3 Types of CSS

There are three main ways to apply CSS styles to HTML documents

1.3.1 Inline CSS

Inline CSS is applied directly to individual HTML elements using the "style" attribute. For example:

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

1.3.2 Internal CSS

Internal CSS is defined within the HTML document's <style> tag, usually in the <head> section. It
applies styles to the entire document. For example:

<style>
h1 {
color: green;
}
</style>

1.3.3 External CSS

External CSS is defined in a separate CSS file and linked to the HTML document using the <link> tag.
This allows you to maintain styles across multiple pages. For example:

<link rel="stylesheet" type="text/css" href="styles.css">

16
1.4 CSS Colors

Colors are an essential part of CSS. You can specify colors using various methods, including color
names, hexadecimal values, RGB values, or HSL values.

1.4.1 Color name

In CSS, for example a color can be specified by using a predefined color name:

1.4.2 RGB value

In CSS, a color can be specified as an RGB value, using this formula: rgb(red, green, blue). Each
parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

1.4.2.1 RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the
opacity for a color.

 An RGBA color value is specified with: rgba(red, green, blue, alpha)

 The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

1.4.3 Hexadecimal color

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color.

17
1.4.3.1 Three Digit HEX Value

Sometimes you will see a 3-digit hex code in the CSS source. The 3-digit hex code is a shorthand for
some 6-digit hex codes. The 3-digit hex code has the following form: #rgb

Where r, g, and b represent the red, green, and blue components with values between 0 and f.

The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each
component. So, if we have #ff00cc, it can be written like this: #f0c.

1.4.4 HSL value

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl(hue,
saturation, lightness)

 Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
 Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
 Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white

1.4.4.1 HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the
opacity for a color.

 An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha)

 The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

1.4.5 Example of using color in CSS

Example of using color in CSS:

p {
color: red; /* Using color name */
background-color: #00FF00; /* Using hexadecimal value */
border: 2px solid rgb(255, 0, 0); /* Using RGB value */
}

18
1.5 CSS Backgrounds

The CSS background properties are used to add background effects for elements. It allows you to
control background properties like color, images, and positioning. For instance:

body {
background-color: #F0F0F0;
background-image: url('background.jpg');
background-size: cover;
}

1.5.1 Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property.
This is called a shorthand property. For example:

body {
/*Instead of writing those bellow four line of code*/
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
/*You can write this bellow single line of codes*/
background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

It does not matter if one of the property values is missing, as long as the other ones are in this order.

More Exercises: https://www.w3schools.com/css/css_background.asp

1.6 CSS Box Model

The CSS box model defines how elements are rendered on a web page. It consists of content, padding,
borders, and margins. Let's explore each aspect

Explanation of the different parts:

19
  Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

1.6.1 CSS Borders

Borders can be added around elements. You can specify their width, style, and color. For example

div {
border: 2px solid #333;
}

1.6.2 CSS Margins

Margins create space around an element, pushing other elements away. You can set margins for top,
right, bottom, and left. For example

p {
margin: 10px 20px;
}

1.6.3 CSS Padding

Padding creates space within an element, separating its content from its border. You can set padding
for top, right, bottom, and left. For example:

div {
padding: 15px;
}

1.6.4 CSS Height

You can control the height of an element using the height property. For example:

img {
height: 200px;
}

20
1.6.5 CSS Width

You can control the width of an element using the width property. For example

.container {
width: 80%;
}

Important: When you set the width and height properties of an element with CSS, you just set
the width and height of the content area. To calculate the total width and height of an element, you
must also include the padding and borders.

Exercise: Consider below code snippets, calculate the

a) total width of an element
b) total height of an element

a) Total width of an element

 320px (width of content area)
 + 20px (left padding + right padding)
 + 10px (left border + right border)
 = 350px (total width)
a) Total height of an element
 50px (height of content area)
 + 20px (top padding + bottom padding)
 + 10px (top border + bottom border)
 = 80px (total height)

21
1.7 CSS Outline

An outline is a line drawn outside the element's border. Look at bellow image

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border,
and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the
element's total width and height is not affected by the width of the outline.

CSS has the following outline properties:

o outline-style
o outline-color
o outline-width
o outline-offset
o outline

1.7.1 CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

o dotted - Defines a dotted outline

o dashed - Defines a dashed outline
o solid - Defines a solid outline
o double - Defines a double outline
o groove - Defines a 3D grooved
outline
o ridge - Defines a 3D ridged outline
o inset - Defines a 3D inset outline
o outset - Defines a 3D outset outline
o none - Defines no outline
o hidden - Defines a hidden outline

22
The following example shows the different outline-style values:

p.dotted {outline-style: dotted;}

p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Note: None of other outline properties will have ANY effect unless the outline-style property is set!

1.7.2 CSS Outline Width

The outline-width property specifies the width of the outline, and can have one of the following
values:

o thin (typically 1px)

o medium (typically 3px)
o thick (typically 5px)
o A specific size (in px, pt, cm, em, etc)

The following example shows some outlines with different widths:

p {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin; /** medium, thick, 4px etc*/
}

1.7.3 CSS Outline Color

The outline-color property is used to set the color of the outline. The color can be set by:

o name - specify a color name, like "red"

o HEX - specify a hex value, like "#ff0000"
o RGB - specify a RGB value, like "rgb(255,0,0)"
o HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
o invert - performs a color inversion (which ensures that the outline is visible, regardless of color
background)

23
The following example shows some different outlines with different colors. Also notice that these
elements also have a thin black border inside the outline:

p {
border: 2px solid black;
outline-style: solid;
outline-color: red;/* change here. Ex: rgb(255, 0, 0); #ff0000;*/
}

1.7.4 CSS Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

o outline-width
o outline-style (required)
o outline-color

The outline property is specified as one, two, or three values from the list above. The order of the
values does not matter. The following example shows some outlines specified with the shorthand
outline property:

p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
1.7.5 CSS Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The
space between an element and its outline is transparent. The following example specifies an outline
15px outside the border edge:

p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

1.8 CSS Text

CSS has a lot of properties for formatting text.

24
1.8.1 Text Color

The color property is used to set the color of the text. The color is specified by:

o a color name - like "red"

o a HEX value - like "#ff0000"
o an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values. The default text color for a page
is defined in the body selector.

body {
color: blue;
}
h1 {
color: green;
}

Important: High contrast is very important for people with vision problems. So, always ensure that
the contrast between the text color and the background color (or background image) is good!

1.8.2 Text Alignment and Text Direction

In this chapter you will learn about the following properties:

o text-align
o text-align-last
o direction
o unicode-bidi
o vertical-align

1.8.3 Text Alignment

The text-align property is used to set the horizontal alignment of a text. A text can be left or right
aligned, centered, or justified. The following example shows center aligned, and left and right
aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if
text direction is right-to-left):

h1 {
text-align: center; /*left, right */
}

When the text-align property is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and newspapers):

25
 div {
text-align: justify;
}

1.8.4 Text Align Last

The text-align-last property specifies how to align the last line of a text. Align the last line of text in
three <p> elements:

p.a {
text-align-last: right; /*center, justify */
}

1.8.5 Text Direction

The direction and unicode-bidi properties can be used to change the text direction of an element:

p {
direction: rtl;
unicode-bidi: bidi-override;
}

1.8.6 Vertical Alignment

The vertical-align property sets the vertical alignment of an element. Set the vertical alignment of an
image in a text:

img.a {
vertical-align: baseline; /*text-bottom, text-top, sub, super */
}

1.8.7 Text Decoration

In this chapter you will learn about the following properties:

o text-decoration-line
o text-decoration-color
o text-decoration-style
o text-decoration-thickness
o text-decoration

26
1.8.8 Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both over and
under a text.

Note: It is not recommended to underline text that is not a link, as this often confuses the reader.

h1 {
text-decoration-line: overline; /*line-through, underline, overline
underline*/
}

1.8.9 Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.

h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

1.8.10 Specify a Style for the Decoration Line

The text-decoration-style property is used to set the style of the decoration line.

h1 {
text-decoration-line: underline;
text-decoration-style: solid;/*double, dotted, dashed, wavy, wavy*/
}

1.8.11 The Shorthand Property

The text-decoration property is a shorthand property for:

o text-decoration-line (required)
o text-decoration-color (optional)
o text-decoration-style (optional)
o text-decoration-thickness (optional)

27
 p {
text-decoration: underline red double 5px;
}

1.8.12 Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used
to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:

p {
text-transform: uppercase;/*lowercase, capitalize*/
}

1.8.13 Text Spacing

In this chapter you will learn about the following properties:

o text-indent
o letter-spacing
o line-height
o word-spacing
o white-space

1.8.13.1 Text Indentation

The text-indent property is used to specify the indentation of the first line of a text

p {
text-indent: 50px;
}

1.8.13.2 Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text. The following
example demonstrates how to increase or decrease the space between characters

h1 {
letter-spacing: 5px; /* add -2px; to see changes*/
}

28
1.8.13.3 Line Height

The line-height property is used to specify the space between lines:

p {
line-height: 0.8; /*add 1.8 to see*/
}

1.8.13.4 Word Spacing

The word-spacing property is used to specify the space between the words in a text. The following
example demonstrates how to increase or decrease the space between words

p {
word-spacing: 10px; /*-2px;*/
}

1.8.13.5 White Space

The white-space property specifies how white-space inside an element is handled. This example
demonstrates how to disable text wrapping inside an element:

p {
white-space: nowrap;
}

1.8.13.6 Text Shadow

The text-shadow property adds shadow to text. In its simplest use, you only specify the horizontal
shadow (2px) and the vertical shadow (2px):

h1 {
text-shadow: 2px 2px 5px red;
/* Replace each here
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
*/
}

29
1.9 CSS Fonts

1.9.1 Importance of selecting a Font

Choosing the right font has a huge impact on how the readers experience a website. The right font
can create a strong identity for your brand. Using a font that is easy to read is important. The font
adds value to your text. It is also important to choose the correct color and text size for the font.

1.9.2 Generic Font Families

In CSS there are five generic font families:

o Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.
o Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
o Monospace fonts - here all the letters have the same fixed width. They create a mechanical
look.
o Cursive fonts imitate human handwriting.
o Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

1.9.3 Difference Between Serif and Sans-serif Fonts

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

30
1.9.4 Some Font Examples

Generic Font Family Examples of Font Names

Times New Roman

Serif Georgia
Garamond

Arial
Sans-serif Verdana
Helvetica

Courier New
Monospace Lucida Console
Monaco

Brush Script MT
Cursive
Lucida Handwriting

Copperplate
Fantasy
Papyrus

1.9.5 The CSS font-family Property

In CSS, we use the font-family property to specify the font of a text.

p {
font-family: "Times New Roman", Times, serif;
/* Try to replace the above with bellow alternatives */
/* font-family: Arial, Helvetica, sans-serif;
font-family: "Lucida Console", "Courier New", monospace; */
}

Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".

1.9.6 Font Style

The font-style property is mostly used to specify italic text. This property has three values:

o normal - The text is shown normally

o italic - The text is shown in italics

31
 o oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

p {
font-style: normal;
/*You can use italic, oblique also*/
}
1.9.7 Font Weight

The font-weight property specifies the weight of a font

p {
font-weight: normal;
/*You can use bold*/
}

1.9.8 Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font. In
a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted
uppercase letters appears in a smaller font size than the original uppercase letters in the text.

p {
font-variant: normal;
/*You can use small-caps*/
}

1.9.9 Font Size

The font-size property sets the size of the text. Being able to manage the text size is important in web
design. However, you should not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and
<p> for paragraphs.

The font-size value can be an absolute, or relative size.

1.9.9.1 Absolute size

o Sets the text to a specified size

o Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
o Absolute size is useful when the physical size of the output is known

1.9.9.2 Relative size

o Sets the size relative to surrounding elements

o Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).

32
1.9.10 Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

p {
font-size: 14px;
}

1.9.11 Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of
1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em;
/* 40px/16=2.5em */
}
h2 {
font-size: 1.875em;
/* 30px/16=1.875em */
}
p {
font-size: 0.875em;
/* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

33
1.9.12 Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the <body> element

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>
Specifying the font-size in percent and em displays the same size
in all major browsers, and allows all browsers to resize the text!
</p>
</body>
</html>

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom
or resize the text!

1.9.13 Responsive Font Size

The text size can be set with a vw unit, which means the "viewport width". That way the text size will
follow the size of the browser window.

34
 <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize a browser window to see how the text size
scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw
will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the
viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw
is 0.5cm.

1.9.14 Google Fonts

If you do not want to use any of the standard fonts in HTML, you can use Google Fonts. Google Fonts
are free to use, and have more than 1000 fonts to choose from. Here is a link to follow
https://www.w3schools.com/css/css_font_google.asp

<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>

1.9.15 Use Multiple Google Fonts

To use multiple Google fonts, just separate the font names with a pipe character (|), like this:

<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

35
1.10 CSS Icons

Icons can easily be added to your HTML page, by using an icon library.

1.10.1 How To Add Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like <i> or <span>). All the icons
in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow,
etc.)

1.10.2 Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head>
section of your HTML page:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"
crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>

1.10.3 Bootstrap Icons

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
s">

1.10.4 Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page

<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
36
1.11 CSS Links

With CSS, links can be styled in many different ways. They can be styled with any CSS property (e.g.
color, font-family, background, etc.). In addition, links can be styled differently depending on what
state they are in. Follow this link: https://www.w3schools.com/css/css_list.asp

The four links states are:

o a:link - a normal, unvisited link

o a:visited - a link the user has visited
o a:hover - a link when the user mouses over it
o a:active - a link the moment it is clicked

/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

When setting the style for several link states, there are some order rules:

o a:hover MUST come after a:link and a:visited

o a:active MUST come after a:hover

37
1.11.1 Text Decoration

The text-decoration property is mostly used to remove underlines from links

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}

1.11.2 Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to
display links as boxes/buttons

a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

1.12 CSS Lists

1.12.1 HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

o unordered lists (<ul>) - the list items are marked with bullets
o ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

o Set different list item markers for ordered lists

o Set different list item markers for unordered lists
o Set an image as the list item marker
o Add background colors to lists and list items

38
1.12.2 Different List Item Markers

The list-style-type property specifies the type of list item marker. The following example shows some
of the available list item markers

ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}

1.12.3 An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker

ul {
list-style-image: url('sqpurple.gif');
}

1.13 CSS Tables

1.13.1 Table Borders

To specify table borders in CSS, use the border property. The example below specifies a solid border
for <table>, <th>, and <td> elements

table, th, td {
border: 1px solid;
}

1.13.2 Full-Width Table

The table above might seem small in some cases. If you need a table that should span the entire screen
(full-width), add width: 100% to the <table> element

table {
width: 100%;
}
39
1.13.3 Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border

table {
border-collapse: collapse;
}

1.13.4 Table Width and Height

The width and height of a table are defined by the width and height properties

table {
width: 100%;
}

th {
height: 70px;
}

To create a table that should only span half the page, use width: 50%

1.13.5 CSS Table Alignment

1.13.5.1 Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th>
or <td>. By default, the content of <th> elements are center-aligned and the content of <td> elements
are left-aligned. To center-align the content of <td> elements as well, use text-align: center

td {
text-align: center;
/*You can add left instead of center to see the change*/
}

1.13.5.2 Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in
<th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td> elements

td {
height: 50px;
vertical-align: bottom;
40
}
1.13.6 CSS Table Style

1.13.6.1 Table Padding

To control the space between the border and the content in a table, use the padding property on <td>
and <th> elements

th, td {
padding: 15px;
text-align: left;
}

1.13.6.2 Horizontal Dividers

Add the border-bottom property to <th> and <td> for horizontal dividers

th, td {
border-bottom: 1px solid #ddd;
}

1.13.6.3 Hoverable Table

Use the :hover selector on <tr> to highlight table rows on mouse over

tr:hover {background-color: coral;}

1.13.6.4 Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd)
table rows

tr:nth-child(even) {background-color: #f2f2f2;}

1.13.6.5 Table Color

The example below specifies the background color and text color of <th> elements

th {
background-color: #04AA6D;
color: white;
}

41
1.13.7 CSS Responsive Table

1.13.7.1 Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full
content. Add a container element (like <div>) with overflow-x:auto around the <table> element to
make it responsive

<div style="overflow-x:auto;">

<table>
/* ... table content here ... */
</table>

</div>

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even
though "overflow:scroll" is set).

1.14 CSS Display

The display property is the most important CSS property for controlling layout.

1.14.1 The display Property

The display property specifies if/how an element is displayed. Every HTML element has a default
display value depending on what type of element it is. The default display value for most elements is
block or inline.

1.14.2 Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).

Examples of block-level elements:

o <div>
o <h1> - <h6>
o <p>
o <form>
o <header>
o <footer>
o <section>

42
1.14.3 Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary. Examples
of inline elements:

o <span>
o <a>
o <img>

1.14.4 Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and
recreating them. The <script> element uses display: none; as default.

1.14.5 Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this. Changing
an inline element to a block element, or vice versa, can be useful for making the page look a specific
way, and still follow the web standards. A common example is making inline <li> elements for
horizontal menus

li {
display: inline;
}

Note: Setting the display property of an element only changes how the element is displayed, NOT
what kind of element it is. So, an inline element with display: block; is not allowed to have other block
elements inside it.

The following example displays <span> elements as block elements

span {
display: block;
/*try to replace span by a (anchor tag) to see changes*/
}

1.14.6 Hide an Element - display:none or visibility:hidden?

Hiding an element can be done by setting the display property to none. The element will be hidden,
and the page will be displayed as if the element is not there

h1 {
display: none;
}

43
visibility:hidden; also hides an element. However, the element will still take up the same space as
before. The element will be hidden, but still affect the layout

h1 {
visibility: hidden;
}

1.14.7 Using width, max-width and margin: auto;

As mentioned in the previous chapter; a block-level element always takes up the full width available
(stretches out to the left and right as far as it can).

Setting the width of a block-level element will prevent it from stretching out to the edges of its
container. Then, you can set the margins to auto, to horizontally center the element within its
container. The element will take up the specified width, and the remaining space will be split equally
between the two margins.

div {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

Note: The problem with the <div> above occurs when the browser window is smaller than the width
of the element. The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows. This
is important when making a site usable on small devices.

div {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

Tip: Resize the browser window to less than 500px wide, to see the difference between the two divs!

1.15 CSS Position

The position property specifies the type of positioning method used for an element (static, relative,
fixed, absolute or sticky).

44
1.15.1 The position Property

The position property specifies the type of positioning method used for an element. There are five
different position values:

o static
o relative
o fixed
o absolute
o sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently depending
on the position value.

1.15.2 position: static;

HTML elements are positioned static by default. Static positioned elements are not affected by the
top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according
to the normal flow of the page

div {
position: static;
border: 3px solid #73AD21;
}

1.15.3 position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by
the element.
div {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

1.15.4 position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled. The top, right, bottom, and left properties are used to
position the element.

45
A fixed element does not leave a gap in the page where it would normally have been located. Notice
the fixed element in the lower-right corner of the page. Here is the CSS that is used

div {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

1.15.5 position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead
of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body,
and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>

1.15.6 position: sticky;

An element with position: sticky; is positioned based on the user's scroll position.

46
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned
relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed)

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see
example below). You must also specify at least one of top, right, bottom or left for sticky positioning
to work.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll
position.

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

1.15.7 Positioning Text In an Image

How to position text over an image

.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000"
height="300">
<div class="topleft">Top Left</div>
</div>
1.16 CSS Overflow

The CSS overflow property controls what happens to content that is too big to fit into an area.

The overflow property specifies whether to clip the content or to add scrollbars when the content of
an element is too big to fit in the specified area. The overflow property has the following values:

47
 o visible - Default. The overflow is not clipped. The content renders outside the element's box
o hidden - The overflow is clipped, and the rest of the content will be invisible
o scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
o auto - Similar to scroll, but it adds scrollbars only when necessary

div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;/*hidden, scroll, auto*/
}

1.16.1 overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the overflow of content just
horizontally or vertically (or both):

o overflow-x specifies what to do with the left/right edges of the content.

o overflow-y specifies what to do with the top/bottom edges of the content

div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}

1.16.2 CSS Float

o The CSS float property specifies how an element should float.

o The CSS clear property specifies what elements can float beside the cleared element and on
which side.

img {
float: right; /*try to use left or none to see the change*/
}
<p><img src="pineapple.jpg" alt="Pineapple"
style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

48
1.17 CSS Blocks

1.17.1 The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block allows to set a width
and height on the element. Also, with display: inline-block, the top and bottom margins/paddings
are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-
break after the element, so the element can sit next to other elements. The following example
shows the different behaviour of display: inline, display: inline-block and display: block

span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
<h2>display: inline</h2>
<div>Aliquam erat volutpat. <span class="a">Aliquam</span> <span
class="a">venenatis</span> gravida nisl sit amet facilisis.</div>
<h2>display: inline-block</h2>
<div>Aliquam erat volutpat. <span class="b">Aliquam</span> <span
class="b">venenatis</span> gravida nisl sit amet facilisis.</div>
<h2>display: block</h2>
<div>Aliquam erat volutpat. <span class="c">Aliquam</span> <span
class="c">venenatis</span> gravida nisl sit amet facilisis.</div>

49
1.17.2 Using inline-block to Create Navigation Links

One common use for display: inline-block is to display list items horizontally instead of vertically. The
following example creates horizontal navigation links:

.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}

.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}

<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>

1.18 CSS Alignment

1.18.1 CSS Layout - Horizontal & Vertical Align

1.18.2 Center Align Elements

To horizontally center a block element (like <div>), use margin: auto;

50
Setting the width of the element will prevent it from stretching out to the edges of its container. The
element will then take up the specified width, and the remaining space will be split equally between
the two margins:

.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}

Note: Center aligning has no effect if the width property is not set (or set to 100%).

1.18.3 Center Align Text

To just center the text inside an element, use text-align: center;

.center {
text-align: center;
border: 3px solid green;
}

Tip: For more examples on how to align text, see https://www.w3schools.com/css/css_text.asp

1.18.4 Center an Image

To center an image, set left and right margin to auto and make it into a block element

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}

1.18.5 Left and Right Align - Using position

One method for aligning elements is to use position: absolute;

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

51
1.18.6 Left and Right Align - Using float

Another method for aligning elements is to use the float property:

.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}

1.18.7 The clearfix Hack

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of
its container. You can use the "clearfix hack" to fix this (see example below).

Then we can add the clearfix hack to the containing element to fix this problem:

.clearfix::after {
content: "";
clear: both;
display: table;
}

1.18.8 Center Vertically - Using padding

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom
padding:

.center {
padding: 70px 0;
border: 3px solid green;
}

To center both vertically and horizontally, use padding and text-align: center:

52
 .center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}

1.18.9 Center Vertically - Using line-height

Another trick is to use the line-height property with a value that is equal to the height property

.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}

/* If the text has multiple lines, add the following: */

.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

1.18.10Center Vertically - Using position & transform

If padding and line-height are not options, another solution is to use positioning and the transform
property

.center {
height: 200px;
position: relative;
border: 3px solid green;
}

.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Tip: You will learn more about the transform property in our 2D Transforms Chapter.

53
1.18.11Center Vertically - Using Flexbox

You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier
versions

.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}

1.19 CSS Opacity

The opacity property specifies the opacity/transparency of an element.

1.19.1 Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower the value, the more transparent

img {
opacity: 0.5;
}

1.19.2 Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on mouse-
over:

img {
opacity: 0.5;
}

54
1.19.3 Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child
elements inherit the same transparency. This can make the text inside a fully transparent element
hard to read

div {
opacity: 0.3;
}

1.19.4 Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color
values. The following example sets the opacity for the background color and not the text

div {
background: rgb(76, 175, 80);
padding: 10px;
}
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80, 0.6);
}
<h1>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>
<p>With RGBA color values:</p>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>
55
1.19.5 Text in Transparent Box

div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

1.20 CSS Navigation bar

Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML
menus into good-looking navigation bars.

1.20.1 Navigation Bar = List of Links

A navigation bar needs standard HTML as a base. In our examples, we will build the navigation bar
from a standard HTML list. A navigation bar is a list of links, so using the <ul> and <li> elements makes
perfect sense

56
 <ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

o list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
o Set margin: 0; and padding: 0; to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation
bars, which you will learn more about in the next chapters

1.20.2 CSS Vertical Navigation Bar

To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code
from the previous page

57
 <style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

 display: block; - Displaying the links as block elements makes the whole link area clickable
(not just the text), and it allows us to specify the width (and padding, margin, height, etc. if
you want)
 width: 60px; - Block elements take up the full width available by default. We want to specify
a 60 pixels width

You can also set the width of <ul>, and remove the width of <a>, as they will take up the full width
available when displayed as block elements. This will produce the same result as our previous
example

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}

58
1.20.3 Vertical Navigation Bar Examples

Create a basic vertical navigation bar with a gray background color and change the background color
of the links when the user moves the mouse over them

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */

li a:hover {
background-color: #555;
color: white;
}

59
1.20.4 Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she is on

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

60
1.20.5 Full-height Fixed Vertical Navbar

Create a full-height, "sticky" side navigation

<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
1.20.6
<div Horizontal Navigation Bar
style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>

61
There are two ways to create a horizontal navigation bar. Using inline or floating list items.

1.20.7 Inline List Items

One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the
"standard" code from the previous page:

ul {
list-style-type: none;
margin: 0;
}

li {
display: inline;
}
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before
<li><a href="#contact">Contact</a></li>
and <li><a
after eachhref="#about">About</a></li>
list item, to display them on one line
</ul>
1.20.8 Floating List Items

Another way of creating a horizontal navigation bar is to float the <li> elements, and specify a layout
for the navigation links:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: #dddddd;
}

Example explained:

o float: left; - Use float to get block elements to float next to each other
o display: block; - Allows us to specify padding (and height, width, margins, etc. if you want)
o padding: 8px; - Specify some padding between each <a> element, to make them look good
o background-color: #dddddd; - Add a gray background-color to each <a> element

62
Tip: Add the background-color to <ul> instead of each <a> element if you want a full-width background
color:

1.20.9 Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and change the background
color of the links when the user moves the mouse over them

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

li a:hover {
background-color: #111;
}

63
1.20.10Active/Current Navigation Link

Add an "active" class to the current link to let the user know which page he/she is on

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
1.21 CSS Drop Downs
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>

64
1.21.1 Right-Align Links

Right-align links by floating the list items to the right (float:right;)

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
</body>

65
1.21.2 Border Dividers

Add the border-right property to <li> to create link dividers:

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a href="#about">About</a></li>
</ul>
</body>

66
1.21.3 Fixed Navigation Bar

Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the
page

<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-
color:#1abc9c;height:1500px;">
<p>Please put a lot of text here so that the scrolbar appear...</p>
</div>
</body>

67
1.21.4 Sticky Navbar

Add position: sticky; to <ul> to create a sticky navbar. A sticky element toggles between relative and
fixed, depending on the scroll position. It is positioned relative until a given offset position is met in
the viewport - then it "sticks" in place (like position:fixed)

<style>
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<body>
<div class="header">
<h2>Scroll Down</h2>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<p>Put lot of text here.... until the scrollbar appear</p>
</body>

68
1.21.5 Responsive Topnav

How to use CSS media queries to create a responsive top navigation.

<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #04AA6D;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="right"><a href="#about">About</a></li>
</ul>
<div style="padding:0 16px;">
<p>Put a lot of text and Resize the browser window to see the
effect.</p>
</div>
</body>

69
1.21.6 Responsive Sidenav

How to use CSS media queries to create a responsive side navigation.

<style>
body {margin: 0;}
ul.sidenav {list-style-type: none;margin: 0;padding: 0;width:
25%;background-color: #f1f1f1;position: fixed;height: 100%;overflow:
auto;}
ul.sidenav li a {display: block;color: #000;padding: 8px 16px;text-
decoration: none;}
ul.sidenav li a.active {background-color: #4CAF50;color: white;}
ul.sidenav li a:hover:not(.active) {background-color: #555;color: white;}
div.content {margin-left: 25%;padding: 1px 16px;height: 1000px;}
@media screen and (max-width: 900px) {
ul.sidenav { width: 100%; height: auto; position: relative; }
ul.sidenav li a {float: left;padding: 15px; }
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {text-align: center;float: none;}
}
</style>
<body>
<ul class="sidenav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="content">
<h2>Put here lot of text until the scrollbar appear</h2>
</div>
</body>

1.21.7 Dropdown Navbar

How to add a dropdown menu inside a navigation bar.

70
<style>
body { background-color:white;}
ul { list-style-type: none; margin: 0; padding: 0; overflow:
hidden; background-color: #38444d;}
li { float: left;}
li a, .dropbtn { display: inline-block; color: white; text-align:
center; padding: 14px 16px; text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn { background-color: red;}
li.dropdown { display: inline-block;}
.dropdown-content { display: none; position: absolute; background-
color: #f9f9f9;
min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-
index: 1;}
.dropdown-content a { color: black; padding: 12px 16px; text-
decoration: none;
display: block; text-align: left;}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content { display: block;}
</style>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>

71
1.22 CSS Image Gallery

CSS can be used to create an image gallery.

<style>
div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width:
180px;}
div.gallery:hover { border: 1px solid #777;}
div.gallery img { width: 100%; height: auto;}
div.desc { padding: 15px; text-align: center;}
</style>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600"
height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>

72
1.23 CSS Forms

The look of an HTML form can be greatly improved with CSS

1.23.1 Styling Input Fields

Use the width property to determine the width of the input field

input {
width: 100%;
}

The example above applies to all <input> elements. If you only want to style a specific input type, you
can use attribute selectors:

o input[type=text] - will only select text fields

o input[type=password] - will only select password fields
o input[type=number] - will only select number fields
o etc.

1.23.2 Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin, to add
more space outside of them

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

Note that we have set the box-sizing property to border-box. This makes sure that the padding and
eventually borders are included in the total width and height of the elements. Read more about the
box-sizing property in our CSS Box Sizing chapter here https://www.w3schools.com/css/css3_box-
sizing.asp

1.23.3 Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to
add rounded corners

73
 input[type=text] {
border: 2px solid red;
border-radius: 4px;
}

If you only want a bottom border, use the border-bottom property

input[type=text] {
border: none;
border-bottom: 2px solid red;
}

1.23.4 Colored Inputs

Use the background-color property to add a background color to the input, and the color property to
change the text color

input[type=text] {
background-color: #3CBC8D;
color: white;
}

1.23.5 Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You
can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus

input[type=text]:focus {
background-color: lightblue;
/* border: 3px solid #555; */
}

1.23.6 Input with icon/image

If you want an icon inside the input, use the background-image property and position it with the
background-position property. Also notice that we add a large left padding to reserve the space of
the icon

input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
74
1.23.7 Animated Search Input

In this example we use the CSS transition property to animate the width of the search input when it
gets focus. You will learn more about the transition property later, in our CSS Transitions chapter
https://www.w3schools.com/css/css3_transitions.asp

input[type=text] {
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}

1.23.8 Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the "grabber" in the
bottom right corner)

textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}

1.23.9 Styling Select Menus

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

75
1.23.10Styling Input Buttons

input[type=button], input[type=submit], input[type=reset] {

background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

For more information about how to style buttons with CSS, read
https://www.w3schools.com/css/css3_buttons.asp

1.24 CSS Counters

CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to
track how many times they are used). Counters let you adjust the appearance of content based on its
placement in the document.

1.24.1 Automatic Numbering With Counters

CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track
how many times they are used).

To work with CSS counters we will use the following properties:

o counter-reset - Creates or resets a counter

o counter-increment - Increments a counter value
o content - Inserts generated content
o counter() or counters() function - Adds the value of a counter to an element

To use a CSS counter, it must first be created with counter-reset.

76
The following example creates a counter for the page (in the body selector), then increments the
counter value for each <h2> element and adds "Section <value of the counter>:" to the beginning of
each <h2> element

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>

1.24.2 Nesting Counters

The following example creates one counter for the page (section) and one counter for each <h1>
element (subsection). The "section" counter will be counted for each <h1> element with "Section
<value of the section counter>.", and the "subsection" counter will be counted for each <h2> element
with "<value of the section counter>.<value of the subsection counter>"

The example can be found on https://www.w3schools.com/css/css_counters.asp

1.25 CSS Tooltips

A tooltip is often used to specify extra information about something when the user moves the mouse
pointer over an element.

77
1.25.1 Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element

<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Go back to the tutorial and continue reading on how
to position the tooltip in a desirable way.</p>
</body>

HTML: Use a container element (like <div>) and add the "tooltip" class to it. When the user mouse
over this <div>, it will show the tooltip text.

The tooltip text is placed inside an inline element (like <span>) with class="tooltiptext".

CSS: The tooltip class use position:relative, which is needed to position the tooltip text
(position:absolute). Note: See examples below on how to position the tooltip.

78
The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover
(see below). We have also added some basic styles to it: 120px width, black background color, white
text color, centered text, and 5px top and bottom padding.

The CSS border-radius property is used to add rounded corners to the tooltip text.

The :hover selector is used to show the tooltip text when the user moves the mouse over the <div>
with class="tooltip".

1.25.2 Positioning Tooltips

In this example, the tooltip is placed to the right (left:105%) of the "hoverable" text (<div>). Also
note that top:-5px is used to place it in the middle of its container element. We use the
number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding,
also increase the value of the top property to ensure that it stays in the middle (if this is something
you want). The same applies if you want the tooltip placed to the left.

.tooltip .tooltiptext {
top: -5px;
left: 105%; /* right: 105%; when you want right position*/
}

If you want the tooltip to appear on top or on the bottom, see examples below. Note that we use
the margin-left property with a value of minus 60 pixels. This is to center the tooltip above/below the
hoverable text. It is set to the half of the tooltip's width (120/2 = 60).

/* Top Tooltip */
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Bottom Tooltip */
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px;
/* Use half of the width (120/2 = 60), to center the tooltip */
}

79
1.25.3 Tooltip Arrows

To create an arrow that should appear from a specific side of the tooltip, add "empty" content after
tooltip, with the pseudo-element class ::after together with the content property. The arrow itself is
created using borders. This will make the tooltip look like a speech bubble.

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

Position the arrow inside the tooltip: top: 100% will place the arrow at the bottom of the
tooltip. left: 50% will center the arrow.

Note: The border-width property specifies the size of the arrow. If you change this, also change
the margin-left value to the same. This will keep the arrow centered.

The border-color is used to transform the content into an arrow. We set the top border to black, and
the rest to transparent. If all sides were black, you would end up with a black square box.

This example demonstrates how to add an arrow to the top of the tooltip. Notice that we set the
bottom border color this time

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

For more information refer to the following link https://www.w3schools.com/css/css_tooltip.asp

80
1.26 CSS Buttons

1.26.1 Basic Button Styling

.button {
background-color: #4CAF50; /* Green */
border: none; /*border-radius: 2px; border: 2px solid #4CAF50;*/
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}

o Use the background-color property to change the background color of a button

o Use the font-size property to change the font size of a button
o Use the padding property to change the padding of a button
o Use the border-radius property to add rounded corners to a button
o Use the border property to add a colored border to a button

1.26.2 Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect

.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}

Use the box-shadow property to add shadows to a button

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0
rgba(0,0,0,0.19);
}

81
1.26.3 Disabled Buttons

Use the opacity property to add transparency to a button (creates a "disabled" look).

Tip: You can also add the cursor property with a value of "not-allowed", which will display a "no
parking sign" when you mouse over the button

.disabled {
opacity: 0.6;
cursor: not-allowed;
}

1.26.4 Button Groups

Remove margins and add float:left to each button to create a button group

<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
.btn-group .button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Button Groups</h2>
<p>Remove margins and float the buttons to create a button group:</p>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
<p style="clear:both"><br>Remember to clear floats after, or else will
this p element also float next to the buttons.</p>
</body>

82
Use display:block instead of float:left to group the buttons below each other, instead of side by side

1.26.5 Animated Buttons

<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
<button class="button" style="vertical-align:middle"><span>Hover
</span></button>

To read more about button with CSS, follow this link

https://www.w3schools.com/css/css3_buttons.asp

83
1.27 CSS Transitions and Animation

1.27.1 CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration. Let us learn
about the following properties:

o transition
o transition-delay
o transition-duration
o transition-property
o transition-timing-function

1.27.1.1 How to Use CSS Transitions?

To create a transition effect, you must specify two things:

o the CSS property you want to add an effect to

o the duration of the effect

Note: If the duration part is not specified, the transition will have no effect, because the default value
is 0. The following example shows a 100px * 100px red <div> element. The <div> element has also
specified a transition effect for the width property, with a duration of 2 seconds

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value. Now, let us
specify a new value for the width property when a user mouses over the <div> element

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

div:hover {
width: 300px;
}

Notice that when the cursor mouses out of the element, it will gradually change back to its original
style

84
1.27.1.2 Change Several Property Values

The following example adds a transition effect for both the width and height property, with a duration
of 2 seconds for the width and 4 seconds for the height

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}

div:hover {
width: 300px;
height: 300px;
}

1.27.1.3 Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

 ease - specifies a transition effect with a slow start, then fast, then end slowly (this is
default)
 linear - specifies a transition effect with the same speed from start to end
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start and end
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

The following example shows some of the different speed curves that can be used

<style>
div {
width: 100px; height: 100px; background: red; transition: width 2s;
}
#div1 {transition-timing-function: linear;/* ease, ease-in, ease-out,
ease-in-out */}
div:hover {width: 300px; }
</style>
<div id="div1">Text here</div><br>

1.27.1.4 Delay the Transition Effect

The transition-delay property specifies a delay (in seconds) for the transition effect.

85
The following example has a 1 second delay before starting

div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}

div:hover {
width: 300px;
}

1.27.1.5 Transition + Transformation

The following example adds a transition effect to the transformation

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}

1.27.1.6 More Transition Examples

The CSS transition properties can be specified one by one, like this

div {/* CSS transition properties can be specified one by one */

transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div {/* by using the shorthand property transition */
transition: width 2s linear 1s;
}

For further reading visit https://www.w3schools.com/css/css3_transitions.asp

86
1.27.2 CSS Animations

In this chapter you will learn about the following properties:

o @keyframes
o animation-name
o animation-duration
o animation-delay
o animation-iteration-count
o animation-direction
o animation-timing-function
o animation-fill-mode
o animation

1.27.2.1 What are CSS Animations?

An animation lets an element gradually change from one style to another. You can change as many
CSS properties you want, as many times as you want. To use CSS animation, you must first specify
some keyframes for the animation. Keyframes hold what styles the element will have at certain
times.

1.27.2.2 The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from
the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will last
for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to
"yellow"

<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
<div></div>

87
Note: The animation-duration property defines how long an animation should take to complete. If
the animation-duration property is not specified, no animation will occur, because the default value
is 0s (0 seconds).

In the example above we have specified when the style will change by using the keywords "from"
and "to" (which represents 0% (start) and 100% (complete)). It is also possible to use percent. By
using percent, you can add as many style changes as you like.

The following example will change the background-color of the <div> element when the animation is
25% complete, 50% complete, and again when the animation is 100% complete

<style>
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */

div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
</style>
<div></div>

1.27.2.3 Delay an Animation

The animation-delay property specifies a delay for the start of an animation. The following example
has a 2 seconds delay before starting the animation

<style>
div {
width: 100px; height: 100px; background-color: red; position: relative;
animation-name: example; animation-duration: 4s; animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
<div></div> 88
Negative values are also allowed. If using negative values, the animation will start as if it had already
been playing for N seconds. In the following example, the animation will start as if it had already been
playing for 2 seconds

<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
<div></div>

1.27.2.4 Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation should run. The
following example will run the animation 3 times before it stops

<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

89
The following example uses the value "infinite" to make the animation continue for ever

<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
<div></div>

1.27.2.5 Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property specifies whether an animation should be played forwards,

backwards or in alternate cycles.

The animation-direction property can have the following values:

 normal - The animation is played as normal (forwards). This is default

 reverse - The animation is played in reverse direction (backwards)
 alternate - The animation is played forwards first, then backwards
 alternate-reverse - The animation is played backwards first, then forwards

The following example will run the animation in reverse direction (backwards)

div {
width: 100px; height: 100px; position: relative; background-color: red;
animation-name: example; animation-duration: 4s;
animation-direction: reverse;/*use alternate insted of reverse to make the
animation run forwards first, then backwards and then the value "alternate-
reverse" to make the animation run backwards first, then forwards*/
}

Read more about animation on https://www.w3schools.com/css/css3_animations.asp

90
1.28 CSS 2D and 3D transformation

1.28.1 CSS 2D Transforms

CSS transforms allow you to move, rotate, scale, and skew elements. We are going to learn about the
following CSS property "transform"

1.28.1.1 CSS 2D Transforms Methods

With the CSS transform property you can use the following 2D transformation methods:

o translate()
o rotate()
o scaleX()
o scaleY()
o scale()
o skewX()
o skewY()
o skew()
o matrix()

The translate() method moves an element from its current position (according to the parameters
given for the X-axis and the Y-axis).

The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its
current position

<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px, 100px);
}
</style>
<div>Text here</div>

1.28.1.2 The rotate() Method

91
The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
The following example rotates the <div> element clockwise with 20 degrees

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</body>
</html>

Using negative values will rotate the element counter-clockwise. The following example rotates the
<div> element counter-clockwise with 20 degrees: transform: rotate(-20deg);

For more on transform read https://www.w3schools.com/css/css3_2dtransforms.asp

1.28.2 CSS 3D Transforms

CSS also supports 3D transformations

1.28.2.1 CSS 3D Transforms Methods

With the CSS transform property you can use the following 3D transformation methods:

o rotateX()
o rotateY()
o rotateZ()

The rotateX() method rotates an element around its X-axis at a given degree

92
 <style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateX(150deg);
}
</style>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</body>

1.28.2.2 The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given

degree: transform: rotateY(150deg);

1.28.2.3 The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given

degree: transform: rotateZ(90deg);

To read more about 3dtransforms follow https://www.w3schools.com/css/css3_3dtransforms.asp

1.29 CSS text Effects

CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes. In this chapter you will learn
about the following properties:

o text-overflow: specifies how overflowed content that is not displayed should be signaled to
the user
o word-wrap
o word-break
o writing-mode

93
 <style>
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}

</style>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</body>

You can display the overflowed content when hovering over the element using

div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}
div.test:hover {
overflow: visible;
}
</style>
<div class="test" style="text-overflow:ellipsis;">This is some long text that
will not fit in the box</div>
<div class="test" style="text-overflow:clip;">This is some long text that
will not fit in the box</div>

94
1.29.1.1 CSS Word Wrapping

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line.
To do so use word-wrap: break-word;

1.29.1.2 CSS Word Breaking

The CSS word-break property specifies line breaking rules. To do so use: word-break: break-all;

1.29.1.3 CSS Writing Mode

The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically. To
do so use writing-mode: horizontal-tb; or writing-mode: vertical-rl;

1.30 Object Fit

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its
container. This property tells the content to fill the container in a variety of ways; such as "preserve
that aspect ratio" or "stretch up and take up as much space as possible"

Here is where the object-fit property comes in. The object-fit property can take one of the following
values:

 fill - This is default. The image is resized to fill the given dimension. If necessary, the image
will be stretched or squished to fit
 contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
 cover - The image keeps its aspect ratio and fills the given dimension. The image will be
clipped to fit
 none - The image is not resized
 scale-down - the image is scaled down to the smallest version of none or contain

1.30.1 Using object-fit: cover;

If we use object-fit: cover; the image keeps its aspect ratio and fills the given dimension

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 200px;height: 300px;object-fit: cover;
}
</style>
</head>
<body>
<h2>Using object-fit: cover</h2>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

95
1.30.2 Using object-fit: contain;

If we use object-fit: contain; the image keeps its aspect ratio, but is resized to fit within the given
dimension

1.30.3 Using object-fit: fill;

If we use object-fit: fill; the image is resized to fill the given dimension. If necessary, the image will
be stretched or squished to fit.

1.30.4 Using object-fit: none;

If we use object-fit: none; the image is not resized

1.30.5 Using object-fit: scale-down;

If we use object-fit: scale-down; the image is scaled down to the smallest version of none or contain

1.31 CSS Flexbox

1.31.1 CSS Flexbox Layout Module

Before the Flexbox Layout module, there were four layout modes:

o Block, for sections in a webpage

o Inline, for text
o Table, for two-dimensional table data
o Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without
using float or positioning.

<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
<div class="flex-container">
<div>1</div>

96
1.32 Exercises

Question (1) How can you style paragraphs inside a <div> element
using the descendant selector?
 Purpose: Assess understanding of styling nested elements using CSS descendant
selectors.
Question (2) How do you style only the immediate children <li>
elements of an unordered list?
 Purpose: Test knowledge of styling specific child elements within a parent container.
Question (3) How can you style the first <p> element that directly
follows an <h2> element?
 Purpose: Assess understanding of styling elements based on their relationship with other
elements.
Question (4) How can you style all <p> elements that follow an <h2>
element, regardless of being adjacent or not?
 Purpose: Gauge knowledge of styling elements based on their relationship with other
elements without adjacency constraints.
Question (5) How can you style a link differently when it's being
hovered over by the mouse?
 Purpose: Test understanding of applying hover effects to links using CSS.
Question (6) How can you insert content before every <p> element
using a pseudo-element?
 Purpose: Assess understanding of using pseudo-elements to add content to HTML
elements.
Question (7) How can you add a decorative symbol after every <h3>
element?
 Purpose: Test knowledge of adding decorative content after specific HTML elements.
Question (8) How can you style the first letter of every paragraph
differently?
 Purpose: Assess understanding of styling specific text within elements using CSS.
Question (9) How can you style the text that gets selected by the
user?
 Purpose: Gauge knowledge of styling selected text using CSS.

97
Question (10) How can you style the placeholder text in an input
field?
 Purpose: Test understanding of styling placeholder text within input elements.
Question (11) How can you style all <a> elements with a target
attribute set to _blank?
 Purpose: Assess understanding of styling links with specific attributes using CSS.
Question (12) How can you style <input> elements with a type
attribute set to submit?
 Purpose: Test knowledge of styling input elements based on their type attribute.
Question (13) How can you style all elements with an href attribute
starting with "https://"?
 Purpose: Assess understanding of styling elements with specific attribute values using
CSS.
Question (14) How can you style all <img> elements with a src
attribute ending with ".png"?
 Purpose: Test knowledge of styling elements based on specific attribute values.
Question (15) How can you style all <a> elements with an href
attribute containing "example"?
 Purpose: Assess understanding of styling elements based on partial attribute values.
Question (16) How can you apply a solid red border with a width of 2
pixels to a <div> element?
 Purpose: Test knowledge of applying border styles to elements using CSS.
Question (17) How do you create a dashed border with a 3-pixel width
for the top border only?
 Purpose: Assess understanding of creating specific border styles for different sides of an
element.
Question (18) What's the syntax to set different styles for each side of
a border?
 Purpose: Gauge knowledge of syntax for setting border styles individually for each side of
an element.
Question (19) How can you create a border with rounded corners?
 Purpose: Test understanding of creating borders with rounded edges using CSS.
Question (20) How would you create a double border with different
colors for the inner and outer border?
 Purpose: Assess understanding of creating double borders with distinct styles using CSS.

98
Question (21) How can you set equal margins of 20 pixels for all sides
of an element?
 Purpose: Test knowledge of setting uniform margins for an element using CSS.
Question (22) What's the syntax for setting different margins for each
side of an element?
 Purpose: Assess understanding of setting margins individually for each side of an
element.
Question (23) How do you center an element horizontally using
margins?
 Purpose: Gauge knowledge of centering elements horizontally using CSS margins.
Question (24) What's the shorthand property for setting individual
margins for an element?
 Purpose: Test understanding of shorthand properties for setting margins in CSS.
Question (25) How would you collapse the top margin of a heading
with the bottom margin of a paragraph?
 Purpose: Assess understanding of collapsing margins between adjacent elements.
Question (26) How do you apply a padding of 15 pixels to all sides of a
<div> element?
 Purpose: Test knowledge of applying padding uniformly to an element using CSS.
Question (27) What's the syntax for setting different padding values
for each side of an element?
 Purpose: Assess understanding of setting padding individually for each side of an
element.
Question (28) How can you achieve equal padding on all sides of an
element using the shorthand property?
 Purpose: Gauge knowledge of shorthand properties for setting uniform padding in CSS.
Question (29) How do you remove all padding from an element?
 Purpose: Test understanding of removing padding from an element using CSS.
Question (30) What's the effect of negative padding on an element?
 Purpose: Assess understanding of the effect of negative padding values on element
layout.
Question (31) How can you set the height of a <div> element to be
200 pixels?
 Purpose: Test knowledge of setting the height of elements using CSS.
Question (32) What's the difference between setting height in pixels
versus percentage?

99
 Purpose: Assess understanding of differences between setting height in pixels versus
percentage.
Question (33) How do you make an element's height automatically
adjust to fit its content?
 Purpose: Test knowledge of making an element's height responsive to its content using
CSS.
Question (34) What happens if you set a negative height value for an
element?
 Purpose: Assess understanding of the effect of negative height values on element layout.
Question (35) How would you ensure that a <div> element always
takes up the full height of its container?
 Purpose: Test knowledge of ensuring full-height elements within their containers using
CSS.
Question (36) How can you set the width of a <div> element to be 300
pixels?
 Purpose: Assess understanding of setting the width of elements using CSS.
Question (37) What's the difference between setting width in pixels
versus percentage?
 Purpose: Test understanding of differences between setting width in pixels versus
percentage.
Question (38) How do you make an element's width automatically
adjust to fit its content?
 Purpose: Gauge knowledge of making an element's width responsive to its content using
CSS.
Question (39) How would you ensure that a <div> element always
takes up the full width of its container?
 Purpose: Test knowledge of ensuring full-width elements within their containers using
CSS.
Question (40) How can you set the text color of a paragraph to be
blue?
 Purpose: Assess understanding of setting text color using CSS.
Question (41) What's the property to make text bold in CSS?
 Purpose: Test knowledge of specifying font weight for text using CSS.
Question (42) How do you italicize text using CSS?
 Purpose: Gauge understanding of specifying font style for text using CSS.

100
Question (43) What's the shorthand property for setting font size,
family, and style together?
 Purpose: Assess understanding of shorthand properties for specifying font properties in
CSS.
Question (44) How can you align text to the center within its
containing element?
 Purpose: Test knowledge of aligning text horizontally using CSS.
Question (45) How can you set a background image using CSS?
 Purpose: Assess understanding of setting background images for elements using CSS.
Question (46) How can you create a gradient background in CSS?
 Purpose: Test knowledge of creating gradient backgrounds for elements using CSS.
Question (47) How can you set a fixed background image that doesn't
scroll with the content?
 Purpose: Assess understanding of fixing background images relative to the viewport
using CSS.
Question (48) How can you position a background image within its
container?
 Purpose: Test knowledge of positioning background images within element containers
using CSS.
Question (49) How can you repeat a background image only
horizontally?
 Purpose: Assess understanding of repeating background images along a single axis using
CSS.
Question (50) What are the components of the CSS box model?
 Purpose: Test knowledge of the conceptual components of the CSS box model.
Question (51) How can you make sure that an element's total width
includes padding and border, but not margin?
 Purpose: Assess understanding of the box-sizing property and its effect on element sizing
in CSS.
Question (52) How can you set different values of padding for all four
sides of an element?
 Purpose: Test knowledge of setting padding individually for each side of an element in
CSS.
Question (53) How can you create a box with rounded corners using
CSS?
 Purpose: Assess understanding of creating rounded corners for elements using CSS.

101
Question (54) How can you specify the width of an element excluding
padding and border?
 Purpose: Test knowledge of calculating the content width of elements in CSS.
Question (55) How can you add an outline to an element in CSS?
 Purpose: Assess understanding of adding outlines to elements for visual emphasis using
CSS.
Question (56) Can you specify different outline styles?
 Purpose: Test knowledge of specifying different outline styles for elements in CSS.
Question (57) How can you make sure the outline doesn't affect the
element's dimensions?
 Purpose: Assess understanding of controlling the impact of outlines on element layout in
CSS.
Question (58) Can you make the outline appear only on one side of the
element?
 Purpose: Test knowledge of specifying outline styles for individual sides of elements in
CSS.
Question (59) How can you remove the outline when an element is
clicked?
 Purpose: Assess understanding of removing outlines from elements based on user
interactions using CSS.
Question (60) How can you specify a font family for an element in
CSS?
 Purpose: Test knowledge of specifying font families for text using CSS.
Question (61) How can you set the font size in CSS?
 Purpose: Assess understanding of setting font sizes for text using CSS.
Question (62) How can you make text bold using CSS?
 Purpose: Test knowledge of specifying font weight for text using CSS.
Question (63) Can you use custom fonts in CSS?
 Purpose: Assess understanding of integrating custom fonts into CSS stylesheets.
Question (64) How can you style text to be italicized in CSS?
 Purpose: Test knowledge of specifying font style for text using CSS.
Question (65) How can you include icons in your HTML using CSS?
 Purpose: Assess understanding of using CSS to incorporate icons into HTML content.
Question (66) Can you change the color of an icon using CSS?

102
 Purpose: Test knowledge of changing the appearance of icons using CSS.
Question (67) How can you change the size of an icon using CSS?
 Purpose: Assess understanding of resizing icons using CSS.
Question (68) How can you add hover effects to icons in CSS?
 Purpose: Test knowledge of adding interactive hover effects to icons using CSS.
Question (69) How can you change the color of a link when it's
hovered over?
 Purpose: Assess understanding of applying hover effects to links using CSS.
Question (70) How can you remove the underline from a link?
 Purpose: Test knowledge of removing default text decoration from links using CSS.
Question (71) How can you style a visited link differently from an
unvisited link?
 Purpose: Assess understanding of styling visited links separately from unvisited links
using CSS.
Question (72) How can you remove the default bullets from an
unordered list?
 Purpose: Test knowledge of removing default list styles from unordered lists using CSS.
Question (73) How can you change the style of list items to squares?
 Purpose: Assess understanding of customizing list item markers using CSS.
Question (74) How can you align the content of list items
horizontally?
 Purpose: Test knowledge of aligning list item content horizontally using CSS.
Question (75) How can you add custom images as bullets for list
items?
 Purpose: Assess understanding of using custom images as list item markers in CSS.
Question (76) How can you remove the border from a table?
 Purpose: Test knowledge of removing borders from table elements using CSS.
Question (77) How can you alternate the background color of rows in
a table?
 Purpose: Assess understanding of styling alternating rows in tables using CSS.
Question (78) How can you align the text within table cells to the
center?
 Purpose: Test knowledge of aligning text horizontally within table cells using CSS.
Question (79) How can you add space between table cells?
 Purpose: Assess understanding of adding spacing between table cells using CSS.

103
Question (80) How can you style the header row of a table differently
from the rest of the rows?
 Purpose: Test knowledge of styling specific rows within tables differently using CSS.
Question (81) What is the default value of the display property for
most elements?
 Purpose: Assess understanding of the default display behavior of elements in CSS.
Question (82) How can you make an element take up only as much
width as necessary?
 Purpose: Test knowledge of making elements shrink-to-fit their content width using CSS.
Question (83) Differentiate between display:none and visibility: hidden
 Purpose: Assess understanding of the differences between hiding elements using CSS.
Question (84) How can you make elements flow horizontally next to
each other?
 Purpose: Test knowledge of creating horizontal layouts using CSS.
Question (85) How can you make an element behave like a table?
 Purpose: Assess understanding of using CSS to emulate table-like behavior for elements.
Question (86) What are the values for the position property?
 Purpose: Test knowledge of the different positioning schemes available in CSS.
Question (87) How can you position an element relative to its normal
position?
 Purpose: Assess understanding of positioning elements relative to their default position
using CSS.
Question (88) How can you position an element relative to its closest
positioned ancestor?
 Purpose: Test knowledge of positioning elements relative to their nearest positioned
ancestor using CSS.
Question (89) How can you fix an element to a specific position on the
viewport?
 Purpose: Assess understanding of fixing elements in a specific position on the viewport
using CSS.
Question (90) How can you make an element stick to a position within
its container when scrolling?
 Purpose: Test knowledge of creating elements with fixed positions within scrolling
containers using CSS.
Question (91) What happens when an element's content overflows its
specified size?

104
 Purpose: Assess understanding of how browsers handle overflow content when it
exceeds specified dimensions.
Question (92) How can you make the content of an element scrollable
when it overflows?
 Purpose: Test knowledge of making overflowing content scrollable within its container
using CSS.
Question (93) How can you hide the overflowing content of an
element?
 Purpose: Assess understanding of hiding overflow content within its container using CSS.
Question (94) How can you display only the horizontal overflow of an
element?
 Purpose: Test knowledge of displaying only horizontal overflow content within its
container using CSS.
Question (95) What does the float property do?
 Purpose: Assess understanding of the float property and its effect on element positioning
in CSS.
Question (96) How can you float an element to the left?
 Purpose: Test knowledge of floating elements to the left within their containing block
using CSS.
Question (97) How can you create a multi-column layout using floats?
 Purpose: Assess understanding of creating multi-column layouts using CSS floats.

105