0% found this document useful (0 votes)

13 views

Css Manual

Uploaded by

ephyjacksonchinom

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

13 views

Css Manual

Uploaded by

ephyjacksonchinom

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 145

SOFTWARE ACADEMY

CSS MANUAL

08069268340 | info@softwareacademy.ng Page | 1

MODULE 1

08069268340 | info@softwareacademy.ng Page | 2

CHAPTER 1

INTRODUCTION TO CSS
What is CSS
CSS stands for Cascading Style Sheets. CSS is created and maintained through a
group of people within the W3C called the CSS Working Group. The CSS
Working Group creates documents called specifications. When a specification has
been discussed and officially ratified by the W3C members, it becomes a
recommendation.
It is used to style or design a web page. CSS describes how HTML elements are
to be displayed on screen , paper, or in other media view. CSS handles the look
and feel part of a web page.
Using CSS, you can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background images
or colors are used, layout designs,variations in display for different devices and
screen sizes as well as a variety of other effects.
Advantages of CSS

 CSS saves time − You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and
apply it to as many Web pages as you want.

 Pages load faster − If you are using CSS, you do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply it to all
the occurrences of that tag. So less code means faster download times.

 Easy maintenance − To make a global change, simply change the style,

and all elements in all the web pages will be updated automatically.

08069268340 | info@softwareacademy.ng Page | 3

 Superior styles to HTML − CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.

 Multiple Device Compatibility − Style sheets allow content to be

optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.

 Global web standards − Now HTML attributes are being deprecated and
it is being recommended to use CSS. So its a good idea to start using CSS
in all the HTML pages to make them compatible to future browsers.

Anatomy of CSS
CSS consists of "style rules". Each style rule consists of a "selector" and
"declarations" of property-value pairs:

08069268340 | info@softwareacademy.ng Page | 4

CSS declarations sit inside curly brackets and each is made up of two parts: a
property and a value, separated by a colon. You can specify several properties in
one declaration, each separated by a semi-colon.
Where to put CSS
 Internal CSS (embedded)
 Inline CSS
 External CSS (link)

Types of CSS
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached
with element is known as inline CSS. This kind of style is specified within an
HTML tag using the style attribute.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:brown; font-style: italic;">An example with inline
CSS</h1>
<p>
<p style="font-weight:bolder; color:blue;">Lorem ipsum dolor, sit
amet consectetur adipisicing elit!</p>
</p>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 5

Internal or Embedded CSS : This can be used when a single HTML document
must be styled uniquely. The CSS rule set should be within the HTML file in the
head section i.e the CSS is embedded within the HTML file.
Example
Code

<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal or Embedded CSS</title>
<style>
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: darkgreen;
}
p{
font-size:larger;
font-style:italic;
}
</style>
</head>
<body>
<h1>An example with embedded CSS</h1>
<p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit!</p>
</p>
</body>
</html>

08069268340 | info@softwareacademy.ng Page | 6

Result

External CSS : External CSS contains separate CSS file which contains only style
property with the help of tag attributes (For example class, id, heading, … etc).
CSS property written in a separate file with .css extension and should be linked to
the HTML document using link tag. This means that for each element, style can be
set only once and that will be applied across web pages.
href
This specifies the path to the CSS file (which is often placed in a folder called css
or
styles).
rel
This specifies the relationship between the HTML page and the file it is linked to.
The
value should be stylesheet when linking to a CSS file.

Example: create a new file and save it with file extension .css , for example ,
here we’ll be using home.css as our css file .
HTML
<!DOCTYPE html>

08069268340 | info@softwareacademy.ng Page | 7

<html lang="en">
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>An example with external CSS</h1>

<p>Here we are using external CSS, and the name of the file is
home.css. Let's check it out <br> above the HEAD tag , we linked a file there
representing the CSS file
</p>

</body>
</html>

CSS- home.css
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: darkgreen;
}
p{
font-size:larger;
font-style:italic;
color:darkgoldenrod;
}

Result

CSS Selectors
There are different ways of selecting HTML elements while using CSS styles to
style the page.

08069268340 | info@softwareacademy.ng Page | 8

1. Universal Selector
2. Type Selector
3. Class Selector
4. Id Selector
5. Child Selector
6. Descendant Selector
7. Adjacent Sibling Selector
8. General Sibling Selector

Universal Selector
The Universal Selector is a way of targeting every single element in a page, using
the star selector (*)

<h1>Welcome to our Website</h1>

<h2>Here are the things we do</h2>

<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Web Online and Digital Marketing</li>
<li>Computer Graphics</li>
</ul>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
eius ducimus sint enim aut quos odio. Explicabo,
</p>

*{
margin:0;
list-style-type:none;
color:red;
}

08069268340 | info@softwareacademy.ng Page | 9

Type Selector
The type selector is a way of selecting the element type that is the element itself.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Type Selector </title>
<style>
/* using the element tag to style with CSS */
h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: crimson;
}
p{
font-style: oblique;
color: brown;
}
</style>
</head>
<body>
<h1>An example using the type selector to style element(s) </h1>

<p>Here we are using external CSS , and the name of the file is home.css.
Let's check it out <br>
above the HEAD tag, we linked a file there representing the css file
</p>

</body>
</html>

08069268340 | info@softwareacademy.ng Page | 10

Result

Class Selector
The use of Class Selector is a way of grouping elements with the same class
attribute value. To use the class selector in CSS , (.) is used to classify a class in
CSS. So it would be the .classname .
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Class Selector </title>
<style>
/* using the class attribute to style with CSS */
.first{
color: brown;
font-style: italic;
}
.second{
color: chocolate;
font-family: 'Courier New', Courier, monospace;
}

</style>
</head>
<body>
<h1 class="first">This is first class heading</h1>
<h1 class="second">This is second class heading</h1>
<h1 class="first">This is first class heading</h1>
<h1 class="second">This is second class heading</h1>

</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 11

Id Selector
The Id Selector is used to group an element in HTML. It is a way of giving a
specific element a unique style. Note that no two elements will have the same id ,
that is an id for an element. ( # ) sign is used to denote an id in CSS.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title> Id Selector </title>
<style>
/* using the id attribute to style with CSS */
#first{
color: brown;
font-style: italic;
}
#second{
color:darkred;
font-size: larger;
font-weight: bolder;
}

</style>
</head>
<body>
<h1 id="first">This is first id heading</h1>
<p id="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nobis nulla maiores voluptatem,<br> unde at

08069268340 | info@softwareacademy.ng Page | 12

numquam illo ipsam velit ratione porro quis nemo id voluptates assumenda
provident, temporibus dolor eligendi perspiciatis.
</p>

</body>
</html>

Result

Child Selector
The Child Selector is way of targeting an element that is the direct child of
another element using greater than sign (>).

<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Online Marketing</li>
<li>Advancec Excel</li>
</ul>
</li>
<li>Contact</li>
</ul>

08069268340 | info@softwareacademy.ng Page | 13

.menu > li{
list-style-type: square;
}

Descendant Selector
Matches an element that is a descendent of another specified element (not just a
direct child of that element).

Example
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Services
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Online Marketing</li>
<li>Advancec Excel</li>
</ul>
</li>
<li>Contact</li>
</ul>

08069268340 | info@softwareacademy.ng Page | 14

.menu li{
list-style-type: square;
}

Result

Adjacent Sibling Selector

Matches an element that is the next sibling of another using the plus symbol (+).
The code below will target the first element after the <h1> element (but not
other <p> element).

<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
soluta explicabo officia
corrupti rerum facilis cumque ea iure architecto libero incidunt nulla
similique tempore aperiam, odio
possimus labore esse, aspernatur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
soluta explicabo officia
corrupti rerum facilis cumque ea iure architecto libero incidunt nulla
similique tempore aperiam,
odio possimus labore esse, aspernatur.

08069268340 | info@softwareacademy.ng Page | 15

</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
soluta explicabo officia corrupti
rerum facilis cumque ea iure architecto libero incidunt nulla similique
tempore aperiam, odio possimus
labore esse, aspernatur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Distinctio soluta explicabo officia corrupti rerum facilis cumque ea
iure architecto
libero incidunt nulla similique tempore aperiam, odio possimus labore
esse, aspernatur.
</p>

h1 + p{
color:red;
font-style:italic;
}

08069268340 | info@softwareacademy.ng Page | 16

General Sibling Selector
This type of selector matches an element that is a sibling of another using the tilde
symbol (~), although it does not have to be the directly preceding element.
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
soluta explicabo officia
corrupti rerum facilis cumque ea iure architecto libero incidunt nulla
similique tempore aperiam, odio
possimus labore esse, aspernatur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
soluta explicabo officia
corrupti rerum facilis cumque ea iure architecto libero incidunt nulla
similique tempore aperiam,
odio possimus labore esse, aspernatur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
soluta explicabo officia corrupti
rerum facilis cumque ea iure architecto libero incidunt nulla similique
tempore aperiam, odio possimus
labore esse, aspernatur.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Distinctio soluta explicabo officia corrupti rerum facilis cumque ea
iure architecto
libero incidunt nulla similique tempore aperiam, odio possimus labore
esse, aspernatur.
</p>

h1 ~ p{
color:red;
font-style:italic;
width:500px;
}

08069268340 | info@softwareacademy.ng Page | 17

Attribute Selector
The [attribute] selector is used to select elements with a specified attribute. The
following example selects all <a> elements with a target attribute:
<a href="#" target="_blank">Facebook</a>

a[target]{
color:green;
text-transform: uppercase;
font-weight: bold;
}

Attribute Value Selector

The [attribute="value"] selector is used to select elements with a specified
attribute and value.
The following example will select all input tag whose type attribute have the value
of text:

08069268340 | info@softwareacademy.ng Page | 18

Enter Username<br>
<input type="text" name="username" placeholder="Enter Username">

input[type="text"]{
width:350px;
height: 30px;
}

CSS Rules
If there are two or more rules that applies to the same element, it is important to
know which would take precedence.
Last Rule
If the two selectors are identical, the latter of the two will take precedence.
Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Last Rule </title>
<style>
p{
background-color: darkblue;
}
p{
background-color: darkmagenta;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam perspiciatis exercitationem nulla saepe

08069268340 | info@softwareacademy.ng Page | 19

sit, quia iusto nesciunt cum eaque ipsa eius voluptatibus aperiam consequatur
perferendis?
</p>
</body>
</html>

Result

Specificity
Specificity Selector is used specify an element having two selectors but the one
selector is more specific than the others , the one with more specific rule will
take precedence over more general ones.
Example
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Specificity Rule </title>
<style type="text/css">
#content span{
color: orange;
}

.emphasis{
color: red;
}
</style>
</head>

08069268340 | info@softwareacademy.ng Page | 20

<body>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud <span class="emphasis">exercitation ullamco laboris nisi ut
aliquip</span> ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

</div>
</body>
</html>

Result

Important
You can add !important after any property value to indicate that it should be
considered more important than other rules that apply to the same element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Important Rule </title>
<style>
#content span{
color: orange;
}

.emphasis{
color: red !important;
}

</style>

08069268340 | info@softwareacademy.ng Page | 21

</head>
<body>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniaquis nostrud <span class="emphasis">exercitation ullamco laboris nisi ut
aliquip</span> ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>

</div>
</body>
</html>

Result

Initial Rule
The initial keyword is used to set a CSS property to its default value . It can be
used for any CSS property and any HTML element .
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Initial Rule </title>
<style>
p{
font-size: 20px;
}

p{
font-size: initial;
}
</style>

08069268340 | info@softwareacademy.ng Page | 22

</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam perspiciatis <br> exercitationem nulla
saepe sit,quia iusto nesciunt cum eaque ipsa eius voluptatibus aperiam
consequatur perferendis?
</p>
</body>
</html>

Result

Pseudo Classes
Pseudo class selectors are CSS selectors with a colon preceding them. A pseudo-
class is similar to a class in HTML, but it’s not specified explicitly in the markup.
Examples :link , :hover , :active , :focus , :firstchild , :lastchild etc .

:link
This allows you to set styles for links that have not yet been visited.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Classes </title>
<style>
li a:link{
color: crimson;

08069268340 | info@softwareacademy.ng Page | 23

text-decoration:underline;
font-weight: bolder;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
</ul>

</body>
</html>

Result

:hover
This is applied when a user hovers over an element with a pointing device such as
a mouse. This has commonly been used to change the appearance of links and
buttons when a user places their cursor over them.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Classes </title>
<style>
li a:link{
color: crimson;
text-decoration:underline;
font-weight: bolder;
}
li a:hover{

08069268340 | info@softwareacademy.ng Page | 24

color: blue;
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
</ul>

</body>
</html>

Result

:active
This is applied when an element link is being activated by a user; for example,
when a button is being pressed or a link being clicked.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Classes </title>
<style>
li a:link{

08069268340 | info@softwareacademy.ng Page | 25

color: yellowgreen;
}
li a:active{
color: green;
font-style: italic;
font-size: xx-large;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
</ul>

</body>
</html>

Result

:nth-child
This has the ability to do things like select even/odd elements.
Code
<!DOCTYPE html>
<html lang="en">
<head>

08069268340 | info@softwareacademy.ng Page | 26

<title>Pseudo Classes </title>
<style>
li:nth-child(even){
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<ul class="links">
<li>Home</li>
<li>About</li>
<li>Blog</li>
</ul>

</body>
</html>

Result

:focus
This is applied when an element has focus. Any element that you can interact
with, such as a link you can click on or any form control can have focus.
Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Classes </title>
<style>

08069268340 | info@softwareacademy.ng Page | 27

li a{
color: yellowgreen;
}
li a:focus{
color: green;
font-style: italic;
font-size: xx-large;
}
</style>
</head>
<body>
<ul class="links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
</ul>

</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 28

Chapter 2

Fonts and Text Properties

CSS Fonts is a module of CSS that defines font-related properties and how font
resources are loaded. It lets you define the style of a font, such as its family, size
and weight, line height, and the glyph variants to use when multiple are available
for a single character.
Font Family
The font-family property specifies the font of an element. It can have multiple
fonts as a backup system i.e. if the browser doesn’t support one font then the
other can be used. In other words, this property is used to specifies the family-
name &/or generic-family, based on the priority from the list, for the selected
element.
The font-family can be categorized into 2 types:
 family-name: It contains the name of a font-family, such as “times”,
“courier”, “arial”, etc.
 generic-family: It contains name of a generic-family, such as”serif”, “sans-
serif”, “cursive”, “fantasy”, “monospace”.

Font Weight
The font-weight CSS property sets the weight (or boldness) of the font. The
weights available depend on the font-family that is currently set.
The font weight can be specified with the following;
 the keyword value – “bold”, “light”, “bolder”, “lighter”
 the numeric value – 100 – 900
 the global values – “initial” , “unset”, “inherit”, “revert”, “revert-layer”

Font Style

08069268340 | info@softwareacademy.ng Page | 29

The font-style CSS property sets whether a font should be styled with a normal,
italic, or oblique face from its font-family. We have the values as ;
 italic
 normal
 oblique
Text Decoration
Text decoration is a way of decorating text in HTML with the use of CSS. It
specifies the design of the text either it should be ;
 underlined
 solid
 line-through
 none
 or even the color e.t.c.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Decoration </title>
<style>

p{
text-decoration: line-through
}
p{
text-decoration:underline;
}
</style>
</head>
<body>
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam persp
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti
fugiat optio iusto corrupti nemo consectetur.
</p>
</body>
</html>

08069268340 | info@softwareacademy.ng Page | 30

Result

Text Align
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 property can take one of
four values: left , center , right , justify.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Align </title>
<style>

h2{
text-align: right;
}
p{
text-align: center;
}

</style>
</head>
<body>
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam persp
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam persp
</p>

</body>

08069268340 | info@softwareacademy.ng Page | 31

</html>

Result

Text Transform
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.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Transform </title>
<style>

h2{
text-transform: uppercase;
}
p{
text-transform:lowercase;
}

</style>
</head>
<body>
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam persp
</h2>

08069268340 | info@softwareacademy.ng Page | 32

<p>
Lorem Ipsum Dolor Sit amet Consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam persp
</p>

</body>
</html>

Result

Text Indent
The text-indent property allows you to indent the first line of text within an
element.
The value can be in em, px, %.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Indent </title>
<style>

h2{
text-indent: 10em;
}
p{
text-indent: 130px;
}
</style>
</head>
<body>
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam persp
</h2>
<p>

08069268340 | info@softwareacademy.ng Page | 33

Lorem Ipsum Dolor Sit amet Consectetur adipisicing elit. Veniam,
incidunt! Quos deserunt tempore nam persp
</p>

</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 34

Chapter 3

Padding and Margin

Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
For example
<!DOCTYPE html>
<html lang="en">
<head>
<title> Padding </title>
<style>
.box{
padding: 10px;
width: 300px;
height: 300px;
background-color:red;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Exercitationem sequi voluptates porro placeat eligendi veritatis esse
velit, at labore eius sint corporis, quisquam ullam, atque temporibus
eos rerum mollitia vitae.
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 35

Margin
The CSS margin properties are used to create space around elements, outside of
any defined borders.
For example
<!DOCTYPE html>
<html lang="en">
<head>
<title> Margin </title>
<style>
.box1, .box2{
width: 300px;
height: 300px;
background-color:red;
}
.box1{
margin-bottom:10px;
margin-left:5px;

08069268340 | info@softwareacademy.ng Page | 36

}
</style>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Exercitationem sequi voluptates porro placeat eligendi veritatis esse
velit, at labore eius sint corporis, quisquam ullam, atque temporibus
eos rerum mollitia vitae.
</div>
<div class="box2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Exercitationem sequi voluptates porro placeat eligendi veritatis esse
velit, at labore eius sint corporis, quisquam ullam, atque temporibus
eos rerum mollitia vitae.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorem sequi accusantium eligendi, voluptatem incidunt beatae tempore
illo dicta facere .
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 37

Centering an element
To make an element to be at the center of its parent element you just have to give the child
element of margin-right:auto and margin-left:auto or margin:auto

08069268340 | info@softwareacademy.ng Page | 38

css

html

Table Styling

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pseudo Classes </title>
<style>
body{
background: black;
font-family: arial, verdana, sans-serif;
}

#container{
background: white;
width: 850px;
margin: auto;
padding-top: 20px;
}

08069268340 | info@softwareacademy.ng Page | 39

#container table{
width: 750px;
margin: auto;
border-collapse: collapse;
}

#container table tr{

height: 45px;
color: black;
}

#container table th,

#container table td{
border: 1px solid black;
text-align: center;
}

#container table tr:hover{

background: yellow;
}

#container table tr:nth-child(even){

background: red;
}
/*
#container table tr:nth-child(odd){
background: blue;
}*/
</style>
</head>
<body>
<div id="container">
<table>
<tr>
<th>S/N</th>
<th> Menu</th>

08069268340 | info@softwareacademy.ng Page | 40

<th> Amount </th>
</tr>
<tr>
<td>1</td>
<td>BEANS PORRIDGE</td>
<td>$2000</td>
</tr>
<tr>
<td>2</td>
<td>BEANS (PLAIN)</td>
<td>$1500</td>
</tr>
<tr>
<td>3</td>
<td>WHITE RICE</td>
<td>$2500</td>
</tr>
<tr>
<td>4</td>
<td>JOLLOF RICE</td>
<td>$2500</td>
</tr>
<tr>
<td>5</td>
<td>FRESH BREAD</td>
<td>$2500</td>
</tr>
<tr>
<td>6</td>
<td>BOILED PLAINTAIN + EFO RIRO</td>
<td>$2500</td>
</tr>
<tr>
<td>7</td>
<td>YAM FRIES</td>
<td>$2500</td>
</tr>
<tr>

08069268340 | info@softwareacademy.ng Page | 41

<td>8</td>
<td>WHITE RICE + PLAINTAIN + BEEF</td>
<td>$2500</td>
</tr>
</table>
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 42

Classwork
Instruction
Center the parent (red background) element and give it a width of 700px and the white
background a width of 620px, center the div as well. Give the parent element a padding-top
and bottom as well.

08069268340 | info@softwareacademy.ng Page | 43

MODULE 2

08069268340 | info@softwareacademy.ng Page | 44

Chapter 4

Font-family

The font-family property specifies the font for an element.

The font-family property allows you to specify the typeface that should be used
for any text inside the element(s) to which a CSS rule applies. Since typeface of
font are external file to the html file, font-family declared in css must be installed
on user’s computer for them to display. With the advent of CSS3 there are fix to
this, which will be explained later. The value for font-family is a list of typeface
separated by comma. The browser picks the font to use from left to right
depending on the one installed on the user’s computer
There are two types of font family names:
 family-name - The name of a font-family, like "times", "courier", "arial",
etc.
 generic-family - The name of a generic-family, like "serif", "sans-serif",
"cursive", "fantasy", "monospace".
Css syntax

font-family: family-name|generic-family|initial|inherit;

Example
font-family:'Courier New', Courier, monospace;
font-family: Verdana, Geneva, Tahoma, sans-serif;

Start with the font you want, and always end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available.
Note: Separate each value with a comma.
Note: If a font name contains white-space, it must be quoted. Single quotes must
be used when using the "style" attribute in HTML.

08069268340 | info@softwareacademy.ng Page | 45

Google Fonts
Google Fonts is a computer font and web font service owned by Google. This
includes free and open source font families, an interactive web directory for
browsing the library, and APIs for using the fonts via CSS and Android.
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.
Example
<html>
<head>
<meta charset="utf-8">
<title>Using Google Fonts</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
font-weight: bolder;
}
</style>
</head>
<body>
<div>Making the Web Beautiful! Using the Google font</div>
</body>
</html>

Result

Web Fonts

08069268340 | info@softwareacademy.ng Page | 46

Web fonts are fonts especially created for websites. They're usually on a web
server.
Web fonts allow Web designers to use fonts that are not installed on the user's
computer. When you have found/bought the font you wish to use, just include the
font file on your web server, and it will be automatically downloaded to the user
when needed. Your "own" fonts are defined within the CSS @font-face rule.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fonts</title>
<style type="text/css">

@font-face {
font-family: 'amaranthBold';
src: url('fonts/amaranth-regular-webfont.eot');
src: url('fonts/amaranth-regular-webfont.eot?#iefix')
format('embedded-opentype'),
url('fonts/amaranth-regular-webfont.woff2') format('woff2'),
url('fonts/amaranth-regular-webfont.woff') format('woff'),
url('fonts/amaranth-regular-webfont.ttf')
format('truetype'),
url('fonts/amaranth-regular-webfont.svg#amaranthregular')
format('svg');
font-weight: normal;
font-style: normal;

@font-face {
font-family:'amaranthregular';
src: url('fonts/amaranth-bold-webfont.eot');
src: url('fonts/amaranth-bold-webfont.eot?#iefix')
format('embedded-opentype'),
url('fonts/amaranth-bold-webfont.woff2') format('woff2'),
url('fonts/amaranth-bold-webfont.woff') format('woff'),
url('fonts/amaranth-bold-webfont.ttf') format('truetype'),
url('fonts/amaranth-bold-webfont.svg#amaranthregular')
format('svg');
font-weight: normal;
font-style: normal;

08069268340 | info@softwareacademy.ng Page | 47

}

h1{
font-family: 'amaranthBold', sans-serif;
}

h2{
font-family: 'amaranthregular', sans-serif ;
}

</style>
</head>
<body>
<h1>Heading Fonts 1</h1>
<h2>Heading Fonts 2</h2>
</body>
</html>

Result

The view of the sidebar is shown below;

08069268340 | info@softwareacademy.ng Page | 48

Font Icons
Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers.
Icon fonts are typefaces that use tiny images rather than letterforms.
To insert an icon, add the name of the icon class to any inline HTML element.
The <i> and <span> elements are widely used to add icons.
All the icons in the icon libraries below, are scalable vector icons that can be
customized with CSS (size, color, shadow, etc.). we have different icons ;
 the bootstrap icons
 google icons
 font awesome icons and so on .
So under font icons we are making use of font awesome icons as an example
below;
<!DOCTYPE html>
<html>

08069268340 | info@softwareacademy.ng Page | 49

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Font awesome icon</title>
<link rel="stylesheet" type="text/css" href="css/all.min.css">
</head>
<body>

<i class="fa-solid fa-users" style="font-size: 34px;

color:darkgreen"></i>
<i class="fa-solid fa-car" style="font-size: 34px;"></i>
<i class="fa-regular fa-thumbs-up" style="font-size: 34px;
color:blue"></i>
<i class="fa-solid fa-dollar" style="font-size: 34px; color:dimgrey"></i>
</body>
</html>

Result

The view of my sidebar

08069268340 | info@softwareacademy.ng Page | 50

Web Developer Tools
Web developer tools, also called DevTools, are programs that allow professionals
to create software and debug and test their code on web development projects.
These tools also help individuals review the user interface of a web application or
website. While these tools may not help developers build an application or
website, they allow them to review the security and aesthetic features and design
custom website elements. They may be available to web developers as add-ons
and built-in features in web browsers. When choosing a program, professionals
may consider various factors, including ease of use, scalability, security,
functionality and cost.
Example of Web Developer Tools ;
1. WhatFont,
2. ColorZilla

08069268340 | info@softwareacademy.ng Page | 51

3. Awesome Screenshot
4. Google chrome inspect element

WhatFont
WhatFont makes it so easy to inspect any font on a website, with just one click.
The extension is available for both Chrome and Safari, as well as a bookmarklet.
Once installed, all you need to do is click the extension’s icon in your browser’s
toolbar, and then click the font you wish to view. Simple. Awesome Screenshot:
For screenshoting stuff

ColorZilla
ColorZilla is a browser extension that allows you to find out the exact color of
any object within your web browser. This is especially handy if you want to match
elements your page to an image's color.

Awesome Screenshot
Awesome ScreenShot makes screen capture and annotation effortless! Click the
camera icon, and Awesome Screenshot takes a snap of the whole page on your
screen or any portion. You can also upload an image from your computer, drag
and drop, or paste from your clipboard to your account.

Google chrome inspect element

Inspect Element is a feature of Chrome Developer Tools that allows you to
inspect and modify a page’s frontend web elements. With this tool, it’s possible to
change the appearance and content of a web page by editing its CSS and HTML
files.
To easily inspect an element on Chrome, right-click on a page element and select
Inspect or use Ctrl+Shift+C shortcut for Windows and Command+Shift+C for
Mac – this will open Developer Tools. Then use Ctrl+F or Command+F to search
for anything within the source code of the page.

08069268340 | info@softwareacademy.ng Page | 52

CHAPTER 5

Color
Color The color property allows you to specify the color of text inside an
element . You can specify any color in CSS in one of three ways: RGB, Color
Names, Hex Codes
Color names
There are 147 predefined color names that are recognized by browsers.
For example: DarkCyan
.article {
color: darkcyan;
}

HEX CODES
These are six-digit codes that represent the amount of red, green and blue in a
color, preceded by a pound or hash # sign.
For example: #ee3e80
h1{
color: #ee3e80;
}

RGB VALUES
These express colors in terms of how much red, green and blue are used to
make it up. For example: rgb(100,50,100)
html:
<h1>Heading 1</h1>
<div class="article">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et
aliquid quisquam magnam, eveniet, reiciendis quas fugit eos
repellat vitae libero recusandae iure iste ab, quia illo modi
quo
quasi molestiae?
</div>

CSS:

08069268340 | info@softwareacademy.ng Page | 53

body{
color:rgb(100, 50, 100);
}

Result

Opacity (rgba)
The CSS3 rgba property allows you to specify a color, just like you would with an
RGB value, but adds a fourth value to indicate opacity. This value is known as an
alpha value and is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity
and 0.15 is 15% opacity). The rgba value will only affect the element on which it is
applied (not child elements).
html:
<div class="post">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugiat numquam atque, corrupti animi velit facilis consequatur,
eaque ad natus, modi corporis quasi repudiandae sapiente
pariatur, amet dolorem asperiores itaque adipisci.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugiat numquam atque, corrupti animi velit facilis consequatur,
eaque ad natus, modi corporis quasi repudiandae sapiente
pariatur, amet dolorem asperiores itaque adipisci.
</p>
</div>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugiat numquam atque, corrupti animi velit facilis consequatur,
eaque ad natus, modi corporis quasi repudiandae sapiente

08069268340 | info@softwareacademy.ng Page | 54

pariatur, amet dolorem asperiores itaque adipisci.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Fugiat numquam atque, corrupti animi velit facilis consequatur,
eaque ad natus, modi corporis quasi repudiandae sapiente
pariatur, amet dolorem asperiores itaque adipisci.
</p>
</div>

CSS
body{
background-image:url("images/back.jpg");
background-repeat: no-repeat;
background-size:cover;
}
.post{
width:600px;
margin:auto;
padding:10px;
background-color:rgb(4, 69, 107);
color:#fff;
margin-bottom: 20px;
}
.article{
width:600px;
margin:auto;
padding:10px;
background-color:rgba(4, 69, 107, 0.6);/*this is opacity
(rgba)*/
color:#fff;
}

Result

08069268340 | info@softwareacademy.ng Page | 55

08069268340 | info@softwareacademy.ng Page | 56
Chapter 5

Backgrounds
The background property in CSS allows you to control the background of any
element (what paints underneath the content in that element). Background plays
an important role in the visual presentation of a web page.
CSS provide several properties for styling the background of an element, including
coloring the background, placing images in the background and managing their
positioning, etc. The background properties are background-color, background-
image, background-repeat, background-attachment and background-position.

Background-Color
The background-color property is used to set the background color of an
element.
The following example demonstrates how to set the background color of the
whole page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Color</title>
<style>
p{
background-color:chocolate;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Accusamus voluptatem est quasi? Possimus, quaerat veniam tenetur quibusdam
dolorum pariatur <br> fugit perspiciatis, assumenda dolore, necessitatibus
nihil. Hic exercitationem corrupti voluptatem voluptates. <br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Accusamus fugiat repellendus facere dolor harum nostrum iste, necessitatibus
neque nisi voluptates <br> modi quaerat voluptas placeat? Eius molestiae nemo
ratione quo distinctio!
</p>

08069268340 | info@softwareacademy.ng Page | 57

</body>
</html>

Result

Background-Image
The background-image property set an image as a background of an HTML
element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
<style>
body{
background-image: url(images/tree.png);
font-size: 5rem;
}
</style>
</head>
<body>
<p>
A body with a background Image
</p>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 58

Background-Size
The background-size property specifies the size of the background images.
There are four different syntaxes you can use with this property: the keyword
syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the
image (height becomes "auto"), the two-value syntax (first value: width of the
image, second value: height), and the multiple background syntax (separated with
comma).
Example
background size cover ensures that images cover the whole space.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Cover</title>
<style type="text/css">

body{
background-image: url('images/back.jpg');
background-repeat: no-repeat;
background-size: cover;

</style>
</head>
<body>
<h2> Backgroung Size cover</h2>
</body>
</html>

08069268340 | info@softwareacademy.ng Page | 59

Result

Background-contain
Background size contain ensures that image fits inside a bus even though the
image is bigger than the box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Size Contain</title>
<style type="text/css">
body{
background: #000;
}
#main{
width: 600px;
height: 700px;
background-image: url('images/back.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-color: #fff;
margin: auto;
}

08069268340 | info@softwareacademy.ng Page | 60

</style>
</head>
<body>
<div id="main">A Backgorund size of contain </div>
</body>
</html>

Result

Background Repeat
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
A background image can be repeated along the horizontal and vertical axes, or
not repeated at all.

Repeat
The background image is repeated both horizontally and vertically (the default
way it is shown if the background-repeat property isn’t used).
Example
<!DOCTYPE html>
<html>
<head>

08069268340 | info@softwareacademy.ng Page | 61

Result

Repeat-x
The image is repeated horizontally only.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Repeat X</title>

08069268340 | info@softwareacademy.ng Page | 62

Result

Repeat-y
The image is repeated vertically only.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Repeat Y</title>
<style type="text/css">
body{
background-image: url('images/tree.png');

08069268340 | info@softwareacademy.ng Page | 63

background-repeat: repeat-y;
font-weight:bolder;

}
</style>
</head>
<body>
<p>
A background image with repeats-y background
<p>
</body>
</html>

Result

No-repeat
The image is only shown once.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background No-Repeat</title>

08069268340 | info@softwareacademy.ng Page | 64

Result

08069268340 | info@softwareacademy.ng Page | 65

Background attachment
The background-attachment CSS property sets whether a background image's
position is fixed within the viewport, or scrolls with its containing block.
Fixed
The background is fixed relative to the viewport. Even if an element has a
scrolling mechanism, the background doesn't move with the element.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Attachment</title>
<style type="text/css">
body{
background: #000;
}
#main{
width: 600px;
height: 1000px;
background-image: url('images/tree.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
margin: auto;
}

</style>
</head>

08069268340 | info@softwareacademy.ng Page | 66

<body>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 67

Scroll
The background is fixed relative to the element itself and does not scroll with its
contents.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background Attachment</title>
<style type="text/css">
body{
background: #000;
}
#main{
width: 600px;
height: 1000px;
background-image: url('images/tree.png');
background-attachment: scroll;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;

08069268340 | info@softwareacademy.ng Page | 68

margin: auto;
}

</style>
</head>
<body>
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>

08069268340 | info@softwareacademy.ng Page | 69

Result
Check your browser for the result
Background Position
The background-position property sets the starting position of a background
image.
By default, a background-image is placed at the top-left corner of an element, and
repeated both vertically and horizontally. The first represents the horizontal
position and the second represents the vertical.
left top, left center, left bottom, center top, center center , center
bottom, right top, right center, right bottom, 50% 50%, 20px 30px.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Position </title>
<style>
body{
background-image: url(images/tree.png);
background-repeat: no-repeat;
color:darkred;
background-position: center top;

08069268340 | info@softwareacademy.ng Page | 70

}

</style>
</head>
<body>
<p>
welcome to the attachment view of a background , here we are using
the fixed attachment first <br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.

</p>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 71

Background Shorthand
To shorten the code, it is also possible to specify all the background properties in
one single property. This is called a shorthand property.
Instead of writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Attachment </title>
<style>
body{
background-image: url(images/tree.png);
background-attachment:fixed;
background-repeat: no-repeat;
color:darkred;
font-size: 120px;
}

</style>
</head>
<body>
<p>
welcome to the attachment view of a background , here we are using
the fixed attachment first <br>

08069268340 | info@softwareacademy.ng Page | 72

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore
quibusdam nam exercitationem accusantium perspiciatis vel dolores odio!
Voluptatibus sit expedita maiores dicta.
</h2>
</body>
</html>

Write this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Shorthand </title>
<style>
body{
color:darkred;
font-size: 70px;
background:url(images/tree.png) no-repeat fixed center top ;
}

08069268340 | info@softwareacademy.ng Page | 73

exercitationem accusantium perspiciatis vel dolores odio! Voluptatibus sit expedita
maiores dicta.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, laboriosam architecto dolore quibusdam nam
exercitationem accusantium perspiciatis vel dolores odio! Voluptatibus sit expedita
maiores dicta.

</p>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 74

Chapter 6

Display
The display CSS property sets whether an element is treated as a block or inline
element and the layout used for its children, such as flow layout, grid or flex. In
HTML, the default display property value is taken from the HTML specifications
or from the browser/user default style sheet.
We have different display values ;
1. Block
2. Inline
3. Inline-block
4. Flex
5. Grid
6. And many more .

Block level element

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).
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Block </title>
<style>
body{
background-color:crimson;
}
div{
background-color:coral;
}
h1{
background-color: blue;
}
</style>
</head>

08069268340 | info@softwareacademy.ng Page | 75

<body>
<h1> Block element </h1>
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>

</body>
</html>

Result

Inline element
An inline element does not start on a new line and only takes up as much width as
necessary.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline </title>
<style>
a{
background-color: blueviolet;
font-style: italic;
}
span{
text-transform: uppercase;
background-color: darkmagenta;
}
</style>

08069268340 | info@softwareacademy.ng Page | 76

</head>
<body>
<a href="#home ">Home </a>
<span> inline </span>

</body>
</html>

Result

Inline
This property is used to display an element as an inline element (like <span>). The
height and width properties are not effected on display:inline; property. It allows
only left and right side of margins, not top and bottom.

Block
This property means that the element is displayed as a block, as paragraphs and
headers have always been. A block has some whitespace above and below it and
tolerates no HTML elements next to it, except when ordered otherwise (by
adding a float declaration to another element, for instance).

Inline – block
This property is used to display an element as an inline-level block container. The
element itself is formatted as an inline element, but it can apply height and width
values. It is placed as an inline element (on the same line as adjacent content). It
looks like an inline element but it behaves as a block element and don’t force to
line break.

08069268340 | info@softwareacademy.ng Page | 77

Chapter 7

Position
The position property specifies the type of positioning method used for an
element (static, relative, fixed, absolute or sticky).
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.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position relative </title>
<style>
body{
background-color: deeppink;
}
.container{
background-color:#fff;
width:450px;
margin:auto;
}
#box1, #box2, #box3{

08069268340 | info@softwareacademy.ng Page | 78

}

</style>
</head>
<body>
<div class="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
<br>

</body>
</html>

Result

Position- absolute
If is positioned with absolute, that element is positioned in relation to the
browser window and not the parent element. Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position Absolute </title>
<style>
body{
background-color: deeppink;
}
.container{
background-color:#fff;

08069268340 | info@softwareacademy.ng Page | 79

width:450px;
margin:auto;
}
#box1, #box2, #box3{

background-color:darkmagenta;
width:120px;
height:120px;
color:#fff;
border:1px solid #000;
text-transform: uppercase;
font-size:19px;
text-align: center;
line-height:120px
}
#box1{
position: absolute;
top:30px;
left:70px;
}
</style>
</head>
<body>
<div class="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
</body>
</html>

</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 80

Relative-absolute
If you want an element to be positioned absolutely in relation to its parent
element or you want an element to move within its parent, give the parent a
position of relative and give the child element a position of absolute
Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Position relative </title>
<style>
body{
background-color: deeppink;
}
.container{
background-color:#fff;
width:450px;
margin:auto;
position: relative;
}
#box1, #box2, #box3{

background-color:darkmagenta;
width:120px;
height:120px;
color:#fff;
border:1px solid #000;
text-transform: uppercase;
font-size:19px;
text-align: center;
line-height:120px
}
#box2{
position: absolute;
top:50px;
right:70px;
}
</style>
</head>
<body>
<div class="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>

08069268340 | info@softwareacademy.ng Page | 81

</div>
<br>

</body>
</html>

Result

Fixed
If you want an element to remain fixed while a user scrolls down a long page,
simply the give the element a position of fixed.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position Fixed </title>
<style>
body{
background-color: deeppink;
}
.container{
background-color:#fff;
width:450px;
margin:auto;
position: relative;
}
#box1, #box2, #box3{

background-color:darkmagenta;
width:120px;
height:120px;
color:#fff;

08069268340 | info@softwareacademy.ng Page | 82

border:1px solid #000;
text-transform: uppercase;
font-size:19px;
text-align: center;
line-height:120px
}
#box2{
position: fixed;
top:50px;
right:70px;
}

</style>
</head>
<body>
<div class="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
<br>

</body>
</html>

Result

Z-index
The z-index property specifies the stack order of an element. An element with
greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
Code
<!DOCTYPE html>

08069268340 | info@softwareacademy.ng Page | 83

<html lang="en">
<head>
<title>Z-index</title>
<style>
body{
background-color: deeppink;
}
.container{
background-color:#fff;
width:450px;
height:400px;
position:relative;
margin:auto;
}
#box1, #box2, #box3{

background-color:darkmagenta;
width:120px;
height:120px;
color:#fff;
border:1px solid #000;
text-transform: uppercase;
font-size:19px;
text-align: center;
line-height:120px
}
#box1{
position:absolute;
z-index:2;
top:20px;
right:40px;
}
#box2{
position:absolute;
z-index:1;
top:100px;
right:50px;
}

</style>
</head>
<body>
<div class="container">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>

08069268340 | info@softwareacademy.ng Page | 84

</html>

Result

FLOAT
The CSS float property specifies how an element should float. The float CSS
property places an element on the left or right side of its container, allowing text
and inline elements to wrap around it.
Before float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Float</title>
<style type="text/css">
body{
background: #000;
margin: 0;
color: #fff;
}

#wrapper{
background: yellow;

08069268340 | info@softwareacademy.ng Page | 85

width: 1200px;
}

#innerRapper{
overflow: hidden;
}

#mainContent{
background: red;
width: 650px;
/*float: left;*/
}
#aside{
background: green;
width: 400px;
/*float: right;*/
}

#footer{
background: blue;
height: 100px;
}
</style>
</head>
<body>

<div id="wrapper">
<div id="innerRapper">
<div id="mainContent">
<h2>Main Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

08069268340 | info@softwareacademy.ng Page | 86

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="aside">
<h2>Aside Content</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

08069268340 | info@softwareacademy.ng Page | 87

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Result

After Float
It is obvious that the white containing element is missing in the below picture, this
can be solved by giving the containing element an overflow:hidden or
overflow:auto declaration.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

08069268340 | info@softwareacademy.ng Page | 88

<title>Float</title>
<style type="text/css">
body{
background: #000;
margin: 0;
color: #fff;
}

#wrapper{
background: yellow;
width: 1200px;
margin: auto;
}

#innerRapper{
overflow: hidden;
}

#mainContent{
background: red;
width: 650px;
/*float: left;*/
}

#mainContent, #aside{
float: left;
}

#aside{
background: green;
width: 400px;
/*float: right;*/
}

#footer{
background: blue;
height: 100px;
}
</style>
</head>
<body>

08069268340 | info@softwareacademy.ng Page | 89

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="aside">
<h2>Aside Content</h2>
<p>

08069268340 | info@softwareacademy.ng Page | 90

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 91

08069268340 | info@softwareacademy.ng Page | 92
Chapter 8

Border Radius ,Box sizing, Box Shadow

Border radius
The border-radius property defines the radius of the element's corners. This
property allows you to add rounded corners to elements!
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>border-radius</title>
<style>
.box{
width:200px;
height:200px;
background-color:darkorchid;
-webkit-border-radius:15px;
-moz-border-radius:15px;
-ms-border-radius:15px;
border-radius:15px;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius
iure sint modi dolorum reiciendis sed voluptas. Consequuntur consectetur
dolorem, aliquam rerum commodi iste, fuga cupiditate reprehenderit animi
maiores dolorum.
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 93

Box sizing
The CSS box-sizing property allows us to include the padding and border in an
element's total width and height.
Without the CSS box-sizing Property
By default, the width and height of an element is calculated like this:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
This means: When you set the width/height of an element, the element often
appears bigger than you have set (because the element's border and padding are
added to the element's specified width/height).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}

</style>
</head>
<body>
<div class="div1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<br>
<div class="div2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
maxime dolores itaque,

08069268340 | info@softwareacademy.ng Page | 94

</p>
</div>
</body>
</html>

Result

Whereas box-sizing solves the issues.

With the CSS box-sizing Property
The box-sizing property allows us to include the padding and border in an
element's total width and height.
If you set box-sizing: border-box; on an element, padding and border are included
in the width and height:
Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}

.div2 {
width: 500px;

08069268340 | info@softwareacademy.ng Page | 95

height: 100px;
border: 1px solid red;
box-sizing: border-box;
}

Result

Box shadow
The box-shadow property attaches one or more shadows to an element.
Example
<!DOCTYPE html>
<html lang="en">

08069268340 | info@softwareacademy.ng Page | 96

<head>
<title>Box Shadow</title>
<style>
.box {
width:250px;
height:250px;
padding:15px;
background-color:#fff;
border:solid 3px firebrick;
margin:auto;
-webkit-box-shadow:3px 4px 10px black;
-moz-box-shadow:3px 4px 10px black;
-ms-box-shadow:3px 4px 10px black;
box-shadow:3px 4px 10px black;
}
</style>
</head>
<body>
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
</body>
</html>

Result

Box model
In CSS, the term "box model" is used when talking about design and layout.

08069268340 | info@softwareacademy.ng Page | 97

The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content. The image below
illustrates the box model:

Explanation of the different parts:

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

08069268340 | info@softwareacademy.ng Page | 98

Margin - Clears an area outside the border. The margin is transparent

PADDING AND MARGIN

Padding
Padding is used to create space around an element's content, inside of any defined
borders.
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders. With CSS, you have full control over the
padding. There are properties for setting the padding for each side of an element
(top, right, bottom, and left).
That is ;
 padding-top
 padding-right
 padding-bottom
 padding-left
Example
Before padding

<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding</title>
<style>

.box1, .box2, .box3{

background-color:cyan;
border:1px solid black;
width:200px;
}
.box1{
margin-bottom:15px;
}
.box2{
margin-bottom:20px;
}
</style>

08069268340 | info@softwareacademy.ng Page | 99

</head>
<body>
<div class="box1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>
<div class="box2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>
<div class="box3">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>
</body>
</html>

Result

After padding

08069268340 | info@softwareacademy.ng Page | 100

<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding</title>
<style>

.box1, .box2, .box3{

background-color:cyan;
border:1px solid black;
width:200px;
}
.box1{
margin-bottom:15px;
padding:8px 20px;
}
.box2{
padding:10px;
margin-bottom:20px;
padding: 8px 4px 10px 20px;
}
</style>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>
<div class="box2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>
<div class="box3">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>

08069268340 | info@softwareacademy.ng Page | 101

</body>
</html>

Result

Padding Shorthand
Padding: 8px 20px
8px will affect the top and bottom padding and 20px will affect the left and right .
Padding padding: 15px
You use this shorthand when you want the sides whole of the box (padding-top,
padding-right, padding-bottom, padding-left) to have the same value for padding.
Padding: 8px 4px 10px 12px
Use this shorthand when you want different sides of a box to have different
values for padding. 8px 4px 10px 12px will affect the Top, Right, Bottom and Left
padding in that order.
To shorten the code, it is possible to specify all the padding properties in one
property.
The following individual padding properties:
 padding-top
 padding-right
 padding-bottom

08069268340 | info@softwareacademy.ng Page | 102

 padding-left
Example
Using the same style
<!DOCTYPE html>
<html lang="en">
<head>
<title>Padding</title>
<style>
.box {
padding: 12px 12px 10px 10px ;
border:12px double brown;
}
</style>
</head>
<body>
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<br>

</body>
</html>

Result

Margin
Margins are used to create space around elements, outside of any defined
borders.

08069268340 | info@softwareacademy.ng Page | 103

The CSS margin properties are used to create space around elements, outside of
any defined borders.
With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).
Example
Before margin

<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin</title>
<style>
.box {
border:6px dotted brown;
width: 500px;
}
</style>
</head>
<body>
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis placeat eaque
reiciendis exercitationem temporibus esse atque repellat ipsum quidem accusamus!
Corporis sed dicta commodi obcaecati, quisquam velit tenetur repudiandae amet?
</p>
</div>
</body>
</html>

Result

After Margin

Code
<!DOCTYPE html>

08069268340 | info@softwareacademy.ng Page | 104

<html lang="en">
<head>
<title>Margin</title>
<style>
.box {
border:6px dotted brown;
width: 500px;
margin-top: 80px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="box">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cumque,
et obcaecati ipsam maxime ut possimus, quo quos, neque ea voluptas omnis illo
eius optio fugiat itaque eum similique accusantium doloremque. Lorem ipsum
dolor sit amet consectetur, adipisicing elit. Nemo fugit excepturi repellat
animi rem, mollitia error explicabo ut asperiores dignissimos minima sequi
nisi ea officiis quia vero? Possimus, delectus maxime!
</p>
</div>
</body>
</html>

Result

Margin shorthand
Margin: 8px 20px
8px will affect the top and bottom margin and 20px will affect the left and right
margin
Margin: 15px

08069268340 | info@softwareacademy.ng Page | 105

You use this shorthand when you want the sides whole of the box (margin-top,
marginright, margin-bottom, margin-left) to have the same value for margin.
To shorten the code, it is possible to specify all the padding properties in one
property.
Margin: 8px 4px 10px 12px
Use this shorthand when you want different sides of a box to have different
values for margin. 8px 4px 10px 12px will affect the Top, Right, Bottom and Left
margin in that order.
The following individual margin properties:
 margin-top
 margin-right
 margin-bottom
 matgin-left
Example
Using the same style
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margin</title>
<style>
.box {
border:12px double brown;
margin: 50px 90px 100px 50px ;
}
</style>
</head>
<body>
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<br>

</body>
</html>

08069268340 | info@softwareacademy.ng Page | 106

Result

Borders
The CSS border properties allow you to specify the style, width, and color of an
element's border.
Example : here we are going to be working with the following properties of
borders
1. Border style
2. Border width
3. Border color

<!DOCTYPE html>
<html lang="en">
<head>
<title>border</title>
<style>
body{
background-color:grey;
}
#container{
background-color: #fff;
width:300px;
margin:auto;
}
section{
padding: 7px;
width: 200px;
border-width: 6px;

08069268340 | info@softwareacademy.ng Page | 107

margin-left: 6px;
border-style: solid;
border-color: brown;
}
</style>
</head>
<body>
<div id="container">
<section>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Exercitationem fuga ratione sit nihil commodi laudantium!
Ullam, quisquam dolorem molestias repudiandae quaerat quo quia cum
in reiciendis qui, id a eligendi.
</section>
</div>
</body>
</html>

Result

Border shorthand
There are many properties to consider when dealing with borders. To shorten
the code, it is also possible to specify all the individual border properties in one
property.
The border property is a shorthand property for the following individual border
properties:
 border-width
 border-style (required)

08069268340 | info@softwareacademy.ng Page | 108

 border-color
Example
Shorthand for one side
You can apply a border shorthand to each side of an element
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border Shorthand</title>
<style>

.box1{
width:200px;
border-top:9px purple groove;
border-right:10px brown dotted;
border-left:9px palevioletred dashed;
border-bottom:9px purple groove;
}
</style>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis
ullam dolor,
numquam sit exercitationem suscipit explicabo sequi quasi placeat
eligendi
vitae eveniet harum quibusdam aspernatur, hic minima? Cumque, molestiae
iste.
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 109

Border Shorthand for the four sides
The shorthand for the border on all the sides are shown below

<!DOCTYPE html>
<html lang="en">
<head>
<title>border</title>
<style>
div{
border: 10px dotted blue;
}

08069268340 | info@softwareacademy.ng Page | 110

</style>
</head>
<body>
<div>
<p>
welcome to the attachment view of a background , here we are using the
fixed attachment first <br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure, <br> laboriosam architecto dolore quibusdam
nam exercitationem accusantium perspiciatis vel dolores odio! Voluptatibus sit
expedita maiores dicta. <br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis
temporibus reiciendis assumenda, id iure,<br> laboriosam architecto dolore
quibusdtur, adipisicing elit. Officiis temporibus reiciendis assumenda, id iure,
laboriosam architecto dolore quibusdam <br> nam exercitationem accusantium
perspiciatis vel dolores odio! Voluptatibus sit expedita maiores dicta.

</p>
</div>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 111

MODULE 3

08069268340 | info@softwareacademy.ng Page | 112

Chapter 9

Flex Box
The Flexible Box Layout Module, makes it easier to design flexible responsive
layout structure without using float or positioning.
Flex Box Element
To start using the Flexbox model, you need to first define a flex container.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Box</title>
<style>
.flex-container{
display: flex;
background-color: chartreuse;
}
.flex-container > div{
font-size: xx-large;
background-color: white;
padding:20px ;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
</div>
</body>
</html>
Result

08069268340 | info@softwareacademy.ng Page | 113

Flex Container
The example above is an example of a flex container having a background-color of
chartreuse.

The flex container properties are:

 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content
Align-items
The align-items property is used to align the flex items. It has values like ; center,
flex-start, flex-end, baseline, stretch .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Align Items </title>
<style>
.flex-container{
display: flex;
background-color: chartreuse;
align-items: flex-end;
height: 300px;
}
.flex-container > div{
font-size: xx-large;
background-color: white;
padding:20px ;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
</div>
</body>
</html>

08069268340 | info@softwareacademy.ng Page | 114

Result

Justify content
This defines the alignment along the main axis. It helps distribute extra free space
leftover when either all the flex items on a line are inflexible, or are flexible but
have reached their maximum size. It also exerts some control over the alignment
of items when they overflow the line. It has values like ; center, flex-start, flex-
end, space-around, space space-between, space-evenly.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Justify Content </title>
<style>
.flex-container{
justify-content: center;
background-color: chartreuse;

display: flex;

}
.flex-container > div{
background-color: aliceblue;
margin: 10px;
padding: 20px;
font-size:x-large;
}
</style>
</head>
<body>
<div class="flex-container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>

08069268340 | info@softwareacademy.ng Page | 115

</div>

</body>
</html>

Result

Flex Direction
The flex-direction property defines in which direction the container wants to
stack the flex items. It has values like ; row , column , row-reverse, column-
reverse.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Direction </title>
<style>
.flex-container{
justify-content: center;
background-color: chartreuse;
display: flex;
flex-direction: row-reverse;

}
.flex-container > div{
background-color: aliceblue;
margin: 10px;
padding: 20px;
font-size:x-large;
}
</style>
</head>
<body>
<div class="flex-container">
<div>box 1</div>

08069268340 | info@softwareacademy.ng Page | 116

Result

Flex Wrap
The flex-wrap property specifies whether the flex items should wrap or not.
By default, flex items will all try to fit onto one line. You can change that and
allow the items to wrap as needed with this property. It has values like ; wrap,
nowrap, wrap-reverse.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Wrap </title>
<style>
.flex-container{
background-color: chartreuse;
display: flex;
flex-wrap: wrap;
}
.flex-container > div{
background-color: aliceblue;
margin: 10px;
padding: 20px;
font-size:x-large;
}
</style>
</head>
<body>
<div class="flex-container">
<div>box 1</div>

08069268340 | info@softwareacademy.ng Page | 117

<div>box 2</div>
<div>box 3</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
</div>

</body>
</html>

Result

Flex Flow
The flex-flow property is a shorthand property for setting both the flex-direction
and flex-wrap properties.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position Z-index </title>
<style>

08069268340 | info@softwareacademy.ng Page | 118

.flex-container{
background-color: chartreuse;
display: flex;
flex-flow: row-reverse wrap;
}
.flex-container > div{
background-color: aliceblue;
margin: 10px;
padding: 20px;
font-size:x-large;
}
</style>
</head>
<body>
<div class="flex-container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
</div>

</body>
</html>

Result

Align content
The align-content property is used to align the flex lines. It has values like ;
center, flex-start, flex-end, stretch , space-around, space-between.

08069268340 | info@softwareacademy.ng Page | 119

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Position Z-index </title>
<style>
.flex-container{
background-color: chartreuse;
display: flex;
align-content: stretch;
height: 170px;
}
.flex-container > div{
background-color: aliceblue;
margin: 10px;
padding: 20px;
font-size:x-large;
}
</style>
</head>
<body>
<div class="flex-container">
<div>box 1</div>
<div>box 2</div>
<div>box 3</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
<div>box addition</div>
</div>

</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 120

Flex Item
The flex item properties are:
 order
 flex-grow
 flex-shrink
 flex-basis
 flex
 align-self

Order
The order property specifies the order of the flex items. The order value must be
a number, default value is 0.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Item Order </title>
<style>
.flex-container{
background-color: blue;
display: flex;
justify-content: center;
}
.flex-container > div{
background-color: aliceblue;
margin: 10px;
padding: 30px;
font-size:xx-large;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="order:2 ;">3</div>
<div style="order:5;">1</div>
<div style="order:1;">4</div>
<div style="order:4;">2</div>
<div style="order:3;">5</div>
</div>

08069268340 | info@softwareacademy.ng Page | 121

</body>
</html>

Result

Flex-grow
The flex-grow property specifies how much a flex item will grow relative to the
rest of the flex items.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Grow</title>
<style>
.flex-container{
background-color:darkgray;
display: flex;
justify-content: center;
}
.flex-container > div{
background-color:chocolate;
margin: 10px;
padding: 30px;
font-size:xx-large;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="flex-grow: 2;">flex grow 2</div>
<div style="flex-grow: 5;"> flex grow 5</div>
<div style="flex-grow: 1;"> flex grow 1</div>
<div style="flex-grow: 4;">flex grow 4</div>

</div>

08069268340 | info@softwareacademy.ng Page | 122

</body>
</html>

Result

Flex-shrink
The flex-shrink property specifies how much a flex item will shrink relative to the
rest of the flex items.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Shrink </title>
<style>
.flex-container{
background-color:darkgray;
display: flex;
align-items: stretch;
}
.flex-container > div{
background-color:chocolate;
width: 500px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>

08069268340 | info@softwareacademy.ng Page | 123

Result

Flex-basis
The flex-basis property specifies the initial length of a flex item.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Shrink </title>
<style>
.flex-container{
background-color:darkgray;
display: flex;
align-items: stretch;
}
.flex-container > div{
background-color:chocolate;
width: 500px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>

08069268340 | info@softwareacademy.ng Page | 124

<h1>The default width of the boxes is 500px but the second has a flex-
basis of 200px</h1>
<div class="flex-container">
<div>1</div>
<div style="flex-basis: 200px">2</div>
<div>3</div>
<div>4</div>

</div>
</body>
</html>

Result

Flex
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-
basis properties.
Example: in order of flex-grow, flex-shrink and flex-basis.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex Shrink </title>
<style>
.flex-container{
background-color:darkgray;
display: flex;
align-items: stretch;
}
.flex-container > div{
background-color:chocolate;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}

08069268340 | info@softwareacademy.ng Page | 125

</style>
</head>
<body>
<h1>The default width of the boxes is 500px but the second has a flex-
basis of 200px</h1>
<div class="flex-container">
<div>1</div>
<div style="flex:0 0 200px">2</div>
<div>3</div>
<div>4</div>

</div>
</body>
</html>

Result

Align-Self
The align-self property specifies the alignment for the selected item inside the
flexible container.
The align-self property overrides the default alignment set by the container's align-
items property.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Align self </title>
<style>
.flex-container{
background-color:darkgray;
display: flex;
height: 200px;

08069268340 | info@softwareacademy.ng Page | 126

.flex-container > div{
background-color:chocolate;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;

}
</style>
</head>
<body>
<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle
of the container:</p>

<p>The align-self property overrides the align-items property of the

container.</p>
</body>
</html>

Result

08069268340 | info@softwareacademy.ng Page | 127

Chapter 10

Responsive Web Design - Introduction

What is Responsive Web Design?
Responsive web design makes your web page look good on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.

Designing For The Best Experience For All Users

Web pages can be viewed using many different devices: desktops, tablets, and
phones. Your web page should look good, and be easy to use, regardless of the
device.
Web pages should not leave out information to fit smaller devices, but rather
adapt its content to fit any device:

It is called responsive web design when you use CSS and HTML to resize, hide,
shrink, enlarge, or move the content to make it look good on any screen.

What is The Viewport?

The viewport is the user's visible area of a web page.

08069268340 | info@softwareacademy.ng Page | 128

The viewport varies with the device, and will be smaller on a mobile phone than
on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer
screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed
size web pages were too large to fit the viewport. To fix this, browsers on those
devices scaled down the entire web page to fit the screen.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the
viewport, through the <meta> tag.

You should include the following <meta> viewport element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and
scaling.

The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by
the browser.

Here is an example of a web page without the viewport meta tag, and the same
web page with the viewport meta tag:

08069268340 | info@softwareacademy.ng Page | 129

Responsive Web Design - Grid-View
What is a Grid-View?
Many web pages are based on a grid-view, which means that the page is divided
into columns:

Using a grid-view is very helpful when designing web pages. It makes it easier to
place elements on the page.

08069268340 | info@softwareacademy.ng Page | 130

A responsive grid-view often has 12 columns, and has a total width of 100%, and
will shrink and expand as you resize the browser window.
Building a Responsive Grid-View

Lets start building a responsive grid-view.

First ensure that all HTML elements have the box-sizing property set to border-
box. This makes sure that the padding and border are included in the total width
and height of the elements.

Add the following code in your CSS:

* {
box-sizing: border-box;
}

The following example shows a simple responsive web page, with two columns:

08069268340 | info@softwareacademy.ng Page | 131

.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

The example above is fine if the web page only contains two columns.

However, we want to use a responsive grid-view with 12 columns, to have more

control over the web page.

First we must calculate the percentage for one column: 100% / 12 columns =
8.33%.

Then we make one class for each of the 12 columns, class="col-" and a number
defining how many columns the section should span:

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Each column should have a padding of 15px:

Each row should be wrapped in a <div> and given a display:flex and flex-
wrap:wrap. The number of columns inside a row should always add up to 12:

08069268340 | info@softwareacademy.ng Page | 132

.row{
display: flex;
flex-wrap: wrap;
}

What is a Media Query?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain
condition is true.

If the browser window is 600px or smaller, the background color will be lightblue :
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

Add a Breakpoint
We use media query to make our website responsive by adding a breakpoint. We
can add a breakpoint where certain parts of the design will behave differently on
each side of the breakpoint.

08069268340 | info@softwareacademy.ng Page | 133

Use a media query to add a breakpoint at 768px:
When the screen (browser window) gets smaller than 768px, each column should
have a width of 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

Another Breakpoint

You can add as many breakpoints as you like.

We will also insert a breakpoint between tablets and mobile phones.

08069268340 | info@softwareacademy.ng Page | 134

We do this by adding one more media query (at 600px), and a set of new classes
for devices larger than 600px (but smaller than 768px):

Note that the two sets of classes are almost identical, the only difference is the
name (col- and col-s-):

/* For mobile phones: */

[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}

08069268340 | info@softwareacademy.ng Page | 135

.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

It might seem odd that we have two sets of identical classes, but it gives us the
opportunity in HTML, to decide what will happen with the columns at each
breakpoint:

HTML Example
For desktop:

The first and the third section will both span 3 columns each. The middle section
will span 6 columns.

For tablets:

The first section will span 3 columns, the second will span 9, and the third section
will be displayed below the first two sections, and it will span 12 columns:

Typical Device Breakpoints

08069268340 | info@softwareacademy.ng Page | 136

There are tons of screens and devices with different heights and widths, so it is
hard to create an exact breakpoint for each device. To keep things simple you
could target five groups:

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Orientation: Portrait / Landscape

Media queries can also be used to change layout of a page depending on the
orientation of the browser.

You can have a set of CSS properties that will only apply when the browser
window is wider than its height, a so called "Landscape" orientation:

The web page will have a lightblue background if the orientation is in landscape
mode:

@media only screen and (orientation: landscape) {

body {
background-color: lightblue;
}

08069268340 | info@softwareacademy.ng Page | 137

}

Hide Elements With Media Queries

Another common use of media queries, is to hide elements on different screen

sizes:

@media only screen and (max-width: 600px) {

div.example {
display: none;
}
}

Responsive Web Design - Images

Using The width Property

If the width property is set to a percentage and the height property is set to
"auto", the image will be responsive and scale up and down:

img {
width: 100%;
height: auto;
}

<img src="img_chania.jpg" width="460" height="345">

<p>Resize the browser window to see how the image will scale.</p>

08069268340 | info@softwareacademy.ng Page | 138

Notice that in the example above, the image can be scaled up to be larger than its
original size. A better solution, in many cases, will be to use the max-width
property instead.

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to,
but never scale up to be larger than its original size:

08069268340 | info@softwareacademy.ng Page | 139

img {
max-width: 100%;
height: auto;
}

<img src="img_chania.jpg" width="460" height="345">

<p>Resize the browser window to see how the image will scale when the width
is less than 460px.</p>

Background Images

Background images can also respond to resizing and scaling.

Here we will show three different methods:

1. If the background-size property is set to "contain", the background image will

scale, and try to fit the content area. However, the image will keep its aspect ratio
(the proportional relationship between the image's width and height):

08069268340 | info@softwareacademy.ng Page | 140

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}

2. If the background-size property is set to "100% 100%", the background image

will stretch to cover the entire content area:

08069268340 | info@softwareacademy.ng Page | 141

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}

3. If the background-size property is set to "cover", the background image will

scale to cover the entire content area. Notice that the "cover" value keeps the
aspect ratio, and some part of the background image may be clipped:

div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}

Different Images for Different Devices

A large image can be perfect on a big computer screen, but useless on a small
device. Why load a large image when you have to scale it down anyway? To

08069268340 | info@softwareacademy.ng Page | 142

reduce the load, or for any other reasons, you can use media queries to display
different images on different devices.

Here is one large image and one smaller image that will be displayed on different
devices:

body {
background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */

@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}

Responsive Web Design - Videos

Using The width Property

08069268340 | info@softwareacademy.ng Page | 143

If the width property is set to 100%, the video player will be responsive and scale
up and down:

video {
width: 100%;
height: auto;
}

Notice that in the example above, the video player can be scaled up to be larger
than its original size. A better solution, in many cases, will be to use the max-
width property instead.

Using The max-width Property

If the max-width property is set to 100%, the video player will scale down if it has
to, but never scale up to be larger than its original size:

video {
max-width: 100%;
height: auto;
}

Add a Video to the Example Web Page

We want to add a video in our example web page. The video will be resized to
always take up all the available space:

video {
width: 100%;
height: auto;
}

08069268340 | info@softwareacademy.ng Page | 144

08069268340 | info@softwareacademy.ng Page | 145

Solid Starts - First 100 Days
94% (18)
Solid Starts - First 100 Days
287 pages
Hourglass Workout Program by Luisagiuliet 2
76% (21)
Hourglass Workout Program by Luisagiuliet 2
51 pages
12 Week Program: Summer Body Starts Now
89% (45)
12 Week Program: Summer Body Starts Now
70 pages
Read People Like A Book by Patrick King-Edited
61% (70)
Read People Like A Book by Patrick King-Edited
12 pages
Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health
77% (13)
Livingood, Blake - Livingood Daily Your 21-Day Guide To Experience Real Health
260 pages
Facial Gains Guide (001 081)
91% (45)
Facial Gains Guide (001 081)
81 pages
Cheat Code To The Universe
94% (77)
Cheat Code To The Universe
34 pages
Curse of Strahd
95% (467)
Curse of Strahd
258 pages
The Psychiatric Interview - Daniel Carlat
91% (34)
The Psychiatric Interview - Daniel Carlat
473 pages
The Borax Conspiracy
91% (57)
The Borax Conspiracy
14 pages
The Secret Language of Attraction
86% (107)
The Secret Language of Attraction
278 pages
How To Develop and Write A Grant Proposal
83% (541)
How To Develop and Write A Grant Proposal
17 pages
Workbook For The Body Keeps The Score
88% (52)
Workbook For The Body Keeps The Score
111 pages
Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits
83% (1016)
Donald Trump & Jeffrey Epstein Rape Lawsuit and Affidavits
13 pages
KamaSutra Positions
78% (69)
KamaSutra Positions
55 pages
KamaSutra Positions
69% (83)
KamaSutra Positions
55 pages
7 Hermetic Principles
93% (28)
7 Hermetic Principles
3 pages
27 Feedback Mechanisms Pogil Key
75% (12)
27 Feedback Mechanisms Pogil Key
6 pages
36 Questions That Lead To Love
91% (35)
36 Questions That Lead To Love
3 pages
Sample Mental Health Progress Note
96% (47)
Sample Mental Health Progress Note
3 pages
How 2 Setup Trust
97% (307)
How 2 Setup Trust
3 pages
100 Questions To Ask Your Partner
80% (35)
100 Questions To Ask Your Partner
2 pages
The 36 Questions That Lead To Love - The New York Times
94% (34)
The 36 Questions That Lead To Love - The New York Times
3 pages
Satanic Calendar
25% (55)
Satanic Calendar
4 pages
The 36 Questions That Lead To Love - The New York Times
95% (21)
The 36 Questions That Lead To Love - The New York Times
3 pages
Jeffrey Epstein39s Little Black Book Unredacted PDF
75% (12)
Jeffrey Epstein39s Little Black Book Unredacted PDF
95 pages
ALCHEMIST
64% (14)
ALCHEMIST
4 pages
1001 Songs
71% (69)
1001 Songs
1,798 pages
Stephan Sterns - Orange County Sheriff's Office Calls For Service Summary 24-011313
100% (4)
Stephan Sterns - Orange County Sheriff's Office Calls For Service Summary 24-011313
3 pages
The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt
23% (954)
The 4 Hour Workweek, Expanded and Updated by Timothy Ferriss - Excerpt
38 pages
Zodiac Sign & Their Most Common Addictions
63% (30)
Zodiac Sign & Their Most Common Addictions
9 pages
Lecturer Tutorial Sp025 20212022
No ratings yet
Lecturer Tutorial Sp025 20212022
135 pages
Elektor 1984 05
No ratings yet
Elektor 1984 05
58 pages
Oopp Unit 5 Notes
No ratings yet
Oopp Unit 5 Notes
32 pages
CLASS 7 CSS Handout 1
No ratings yet
CLASS 7 CSS Handout 1
10 pages
UNIT-iI: CSS (Cascading Style Sheet)
No ratings yet
UNIT-iI: CSS (Cascading Style Sheet)
18 pages
CSS Notes-1
No ratings yet
CSS Notes-1
69 pages
AWP Lab Manual
No ratings yet
AWP Lab Manual
94 pages
Developing Cascading Style Sheets
100% (1)
Developing Cascading Style Sheets
55 pages
Css XML DTD
No ratings yet
Css XML DTD
23 pages
Chapter 3
No ratings yet
Chapter 3
29 pages
NW Unit 5
No ratings yet
NW Unit 5
65 pages
Unit 3
No ratings yet
Unit 3
69 pages
Web CH3
No ratings yet
Web CH3
30 pages
Java Web Development Course: Writing CSS Codes
100% (1)
Java Web Development Course: Writing CSS Codes
50 pages
Web Tech (Third Unit)
No ratings yet
Web Tech (Third Unit)
72 pages
CSS.docx
No ratings yet
CSS.docx
128 pages
Developing Cascading Style Sheets Edited133
No ratings yet
Developing Cascading Style Sheets Edited133
62 pages
WD UNIT-3
No ratings yet
WD UNIT-3
27 pages
5-9-2024
No ratings yet
5-9-2024
12 pages
Unit 3
No ratings yet
Unit 3
69 pages
Web Technology 2022
No ratings yet
Web Technology 2022
24 pages
CSS Tutorial
No ratings yet
CSS Tutorial
15 pages
Css
No ratings yet
Css
191 pages
CSS Types Properties
No ratings yet
CSS Types Properties
18 pages
Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers
No ratings yet
Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers
10 pages
CSS Tutorial: CSS Example With CSS Editor
No ratings yet
CSS Tutorial: CSS Example With CSS Editor
39 pages
Web UNIT-1
No ratings yet
Web UNIT-1
27 pages
What Does CSS Do: 1) Solves A Big Problem
No ratings yet
What Does CSS Do: 1) Solves A Big Problem
6 pages
2 - CSS Notes
No ratings yet
2 - CSS Notes
160 pages
Cascading Style Sheet
100% (1)
Cascading Style Sheet
9 pages
UNIT - 4 Ip
No ratings yet
UNIT - 4 Ip
21 pages
Unit II Style Sheets Full
No ratings yet
Unit II Style Sheets Full
84 pages
Css Notes Parul
No ratings yet
Css Notes Parul
135 pages
Core Web Development: CW412 Programming in CSS
No ratings yet
Core Web Development: CW412 Programming in CSS
92 pages
Working With HTML5 and CSS
No ratings yet
Working With HTML5 and CSS
18 pages
Web Technology Unit-3
No ratings yet
Web Technology Unit-3
25 pages
Unit 1 PPT
No ratings yet
Unit 1 PPT
88 pages
CSS Revise
No ratings yet
CSS Revise
206 pages
CSS: Cascading Style Sheet
No ratings yet
CSS: Cascading Style Sheet
129 pages
WD Unit 3 (A)
No ratings yet
WD Unit 3 (A)
39 pages
wt-notes-unit2
No ratings yet
wt-notes-unit2
21 pages
Unit 1 Introduction To HTML & CSS Part-2 CSS
No ratings yet
Unit 1 Introduction To HTML & CSS Part-2 CSS
39 pages
CH-3 CSS
No ratings yet
CH-3 CSS
11 pages
unit3 (2)
No ratings yet
unit3 (2)
94 pages
WD Unit-3
No ratings yet
WD Unit-3
50 pages
WDC manual (1)
No ratings yet
WDC manual (1)
30 pages
Css Notes (Web Designing) Css Introduction
No ratings yet
Css Notes (Web Designing) Css Introduction
7 pages
Exp4 HTML
No ratings yet
Exp4 HTML
6 pages
CSS-1
No ratings yet
CSS-1
10 pages
css (1)
No ratings yet
css (1)
8 pages
Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way
100% (1)
Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way
59 pages
CSS1
No ratings yet
CSS1
11 pages
CSS and CSS Selectors
No ratings yet
CSS and CSS Selectors
10 pages
WT_UNIT 2_
No ratings yet
WT_UNIT 2_
29 pages
css+notes
No ratings yet
css+notes
5 pages
css
No ratings yet
css
23 pages
E-Note_28179_Content_Document_20241127094830AM
No ratings yet
E-Note_28179_Content_Document_20241127094830AM
95 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
19 pages
unit2_CSS
No ratings yet
unit2_CSS
74 pages
WP_Unit_3_CSS
No ratings yet
WP_Unit_3_CSS
49 pages
CSS Selectors and Specificity
From Everand
CSS Selectors and Specificity
Abdelfattah Ragab
No ratings yet
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
From Everand
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
Steven Bright
No ratings yet
M20 Displacement PDF
No ratings yet
M20 Displacement PDF
3 pages
Cot - DLP - Science 6 - Earth's Rotation
No ratings yet
Cot - DLP - Science 6 - Earth's Rotation
13 pages
Tema 2 Estructura Del Texto
No ratings yet
Tema 2 Estructura Del Texto
12 pages
VB Turbulence Penetration Speed
No ratings yet
VB Turbulence Penetration Speed
1 page
Slice and Bake Cookies (9 Flavour Ideas) - The Kiwi Country Girl
No ratings yet
Slice and Bake Cookies (9 Flavour Ideas) - The Kiwi Country Girl
3 pages
Preventive Checklist For Process Equipment
0% (1)
Preventive Checklist For Process Equipment
9 pages
Effect of Sugarmill On Soil of Doiwala
No ratings yet
Effect of Sugarmill On Soil of Doiwala
11 pages
D. Seshi Kala, Vinugala Pavan Kumar and Ashok Gellu PDF
No ratings yet
D. Seshi Kala, Vinugala Pavan Kumar and Ashok Gellu PDF
6 pages
Against Biography - Irena Haiduk
No ratings yet
Against Biography - Irena Haiduk
7 pages
Keyword Table Day 3
No ratings yet
Keyword Table Day 3
3 pages
Unit - 8
No ratings yet
Unit - 8
12 pages
DBMS LAB Samples
No ratings yet
DBMS LAB Samples
4 pages
Harmonic Filter Analysis and Redesign For A Modern Steel Facility With Two Melt Furnaces Using Dedicated Capacitor Banks
No ratings yet
Harmonic Filter Analysis and Redesign For A Modern Steel Facility With Two Melt Furnaces Using Dedicated Capacitor Banks
7 pages
Your Electronic Ticket Receipt
No ratings yet
Your Electronic Ticket Receipt
2 pages
150SCLS
No ratings yet
150SCLS
7 pages
1.2 Adversarial and Inquisitorial
No ratings yet
1.2 Adversarial and Inquisitorial
17 pages
Ardac Elite Data Sheet
No ratings yet
Ardac Elite Data Sheet
4 pages
Viking Bone and Antler Craft
No ratings yet
Viking Bone and Antler Craft
15 pages
"The Good Demon" Chapter Excerpt
No ratings yet
"The Good Demon" Chapter Excerpt
34 pages
20 HSE Delegate & HSE Committee
No ratings yet
20 HSE Delegate & HSE Committee
3 pages
B (B), D (D), G (G), K (K), o (O), e (E), I (I), L (L)
No ratings yet
B (B), D (D), G (G), K (K), o (O), e (E), I (I), L (L)
33 pages
Gluconeogenesis, Glycogen Metabolism
No ratings yet
Gluconeogenesis, Glycogen Metabolism
35 pages
Mandals and Villages - District Mahabubabad, Government of Telangana - India
No ratings yet
Mandals and Villages - District Mahabubabad, Government of Telangana - India
15 pages
ECC Revised02
No ratings yet
ECC Revised02
20 pages
Đề 01 40 1
No ratings yet
Đề 01 40 1
125 pages
At The End of The Lesson, The Learners Will Be Able To
No ratings yet
At The End of The Lesson, The Learners Will Be Able To
4 pages
Manual Crystallizer - Ingles
No ratings yet
Manual Crystallizer - Ingles
24 pages