MM211 –
THE WEB & INTERNET
Lecture 08
CSS Part 2
Zoubeir Aungnoo
Learning Outcomes
■ Configure text typeface, size, weight and style
■ Align and indent text
■ Describe and apply the CSS Box Model
■ Configure width and Height
■ Configure border, margin, padding
■ Center web page content
■ Apply shadows
■ Configure rounded corners
CSS Fonts
■ Fonts matter! Choosing the right typeface strengthen
your brand experience and therefore better chance of
having the right impact on your users/clients.
■ There’s even a psychology behind fonts!
■ In CSS there are 5 generic font families:
– Serif
– Sans-serif
– Monospace
– Cursive
– Fantasy
Fonts Explained
■ On computer screens, sans-serif fonts are preferred
Some Font Examples
■ .
Font-family Property
■ font-family property used to specify the font of a text
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
■ Set multiple font names as a “fallback” to ensure maximum
compatibility between browsers and OS
■ Start with font you want, and end with a generic family
■ Font names separated with comma and between quotation
marks if the name is more than one word.
Using Google Fonts
■ 1000+ fonts to choose from.
– https://fonts.google.com/
■ Add a link in <head> to the point to the Google font
■ Then refer to the font in CSS
<head>
<link rel="stylesheet" href="htt
ps://fonts.googleapis.com/css?
family=Sofia">
<style>
body {
font-family: "Sofia",
sans- serif;
}
</style>
</head>
Text size, weight and style
■ font-size property
p { font-size: 90%; }
■ font-weight property
li {font-weight: bold; }
■ font-style property
#footer {font-style: italic;}
■ Line-height property
p { line-height: 120%;}
font-size property
■ .
Text Alignment and
Indentation
■ text-align property
h1{ text-align: center;}
■ text-indent property
p {text-indent: 5em;}
CSS Box Model
■ Every element has a border around it. By default it is not
visible.
■ The Box Model Concept allows you to control the border,
space inside the border and space outside the border for
every element.
CSS Box Model
■ Content: area occupied by the
text or web content
■ Padding: space from the content
to the border. This area is
transparent.
■ Border: a line in-between
padding and margin. The width is
0 (invisible) by default.
■ Margin: space outside the
border, i.e. space between
adjacent elements. This area is
also transparent.
CSS Box Model
■ You can control all 4 sides of the box
– Top
– Right
– Bottom
– Left
■ E.g. Border:
– border-top
– border-right
– border-bottom
– border-left
Configure Margin with CSS
■ The space outside the border, i.e. between adjacent elements
■ E.g.
h1{ margin: 0; }
all four sides
h1{ margin: 20px 10px; }
20px top & bottom. 10px left right
h1{ margin: 10px 30px 20px; }
10px top, 30px bottom. 20px left right
H1{ margin: 20px 30px 0 30px; }
20px top, 30px right, 0px bottom & 30px left
Configure Margin with CSS
■ You can also control each side separately:
– margin-top
– margin-right
– margin-bottom
– margin-left
■ E.g.
h1 {margin-top: 20px;}
Configure padding with
CSS
■ The space from the content to the border
– (inside space)
■ Similarly you can control all 4 sides at once
■ Or each side separately
■ E.g.
h1{ padding: 15px;}
all 4 sides
h3{ padding-bottom: 25px;}
only set padding bottom
Reset all spacing
■ If you want to have full control over spacing of all
elements, you can reset all the padding and margins:
* { margin:0; padding:0; }
■ Then provide spacing styles for each elements
Centering page contents
#container{
margin-left: auto;
margin-right: auto;
width: 80%;
}
Box Model in Action
■ .
CSS Borders
■ Shorthand:
h2 {
border: 2px solid #ff0000;
}
■ Similarly you can control each side separately
CSS Borders
■ Similarly you can control each side separately
■ border-top: widthValue borderType borderColor
■ border-right:
■ border-bottom:
■ border-left:
■ or
■ border-top-width:
■ border-top-style:
■ border-top-color:
CSS Rounded Corners
■ border-radius property allows you to give any element a rounded
corner
E.g. 1
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
E.g. 2
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
CSS Rounded Corners
■ border-radius property allows you to give any element a
rounded corner
E.g. 3
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
CSS Rounded Corners
■ Just like each border side can be controlled, each corner
side can be controlled too
■ border-radius: 15px
– Same for all 4 corners
■ border-radius: 15px 30px 100px 5px;
– A different value for each corner
■ top-left, top-right, bottom-right & bottom-left
CSS Shadows
■ You can add shadow to text or to elements
– text-shadow property
– box-shadow property
CSS Shadows – text-
shadow
■ text-shadow: horizontolShadow verticalShadow
blurRadius shadowColor;
■ E.g.
h1{
text-shadow: 2px 2px 5px red;
}
CSS Shadows – box-
shadow
■ box-shadow: horizontolShadow verticalShadow
blurRadius spread-radius shadowColor;
– spread-radius: a positive value increases the size of
the shadow while a negative value decreases the
size of the shadow
■ E.g.
div {
box-shadow: 10px 10px 5px 12px grey;
}
CSS Opacity property
■ Configure the opacity of the background color
■ Opacity range:
– 0 Completely Transparent
– 1 Completely Opaque
■ Example:
h1{
background-color: #FFFFFF;
opacity: 0.6;
}
QUESTIONS?
.
