Web Engineering 1

Lecture 7 – CSS Part 2

Faizullah Hamdard – Kandahar University

2023/05/25
CONTENTS

▪ CSS Borders.
▪ CSS Margins.
▪ CSS Padding.
▪ CSS Height, Width and Max-width.
▪ CSS Box Model.
▪ CSS Outline.
▪ CSS Text.
▪ CSS Fonts.

Faizullah Hamdard
Musa Hodman 2
CSS Borders:
▪ Allow you to specify the style, width, and color of an element's border.
▪ border-width: specifies the width of the four borders.
▪ border-color: is used to set the color of the four borders.
▪ border-style: specifies what kind of border to display.
shorthand
p.one {
border-style: solid; p{
border-width: 5px; border: 5px solid red;
border-color: red; }
}

Faizullah Hamdard
Musa Hodman 2
CSS Border Style:

Faizullah Hamdard
Musa Hodman 2
CSS Rounded Borders:
border-radius: Is used to add rounded borders to an element.

p{
border: 2px solid red;
border-radius: 5px;
}

Faizullah Hamdard
Musa Hodman 2
CSS Margins:
Margin: used to create space around elements, outside of any defined borders.
▪ 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).

p{
margin-top: 100px; p{
margin-bottom: 100px; margin: 100px 150px 100px 80px;
margin-right: 150px; }
margin-left: 80px;
}

Faizullah Hamdard
Musa Hodman 2
CSS Padding:
padding: Used to generate space around an element's content, inside of any
defined borders.

p{
padding-top: 100px; p{
padding-bottom: 100px; padding: 100px 150px 100px 80px;
padding-right: 150px; }
padding-left: 80px;
}

Faizullah Hamdard
Musa Hodman 2
CSS Height and Width:
Height and width: Used to set the height and width of an element

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

Faizullah Hamdard
Musa Hodman 2
CSS Box Model:
box model is essentially a box that wraps around every HTML element.
▪ consists of: margins, borders, padding, and the actual content.

Faizullah Hamdard
Musa Hodman 2
CSS Outline:
▪ Is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out".
▪ The CSS outline properties specify the style, color, and width of an outline.

Faizullah Hamdard
Musa Hodman 2
CSS Text:
Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space
between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text

text-indent Specifies the indentation of the first line in a

text- block
Faizullah Hamdard
Musa Hodman 2
CSS Text continues:
▪ text-transform: Used to specify uppercase and lowercase letters in a text.
▪ Word-spacing: Used to specify the space between the words in a text.
▪ text-shadow: Adds shadow to text.

div.a {
text-transform: uppercase;
word-spacing: 30px;
text-shadow: 2px 2px 8px #FF0000;

Faizullah Hamdard
Musa Hodman 2
CSS Fonts:
▪ Define the font family, boldness, size, and the style of a text.
▪ generic family: a group of font families with a similar look (like "Serif" or
"Monospace").
▪ font family: a specific font family (like "Times New Roman" or "Arial").

Faizullah Hamdard
Musa Hodman 2
CSS Fonts continues:
Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a
small-caps font

font-weight Specifies the weight of a font

Faizullah Hamdard
Musa Hodman 2
CSS Fonts Example:

Faizullah Hamdard
Musa Hodman 2
Class Activity:

Faizullah Hamdard
Musa Hodman 2
THANKYOU
FAIZULLAHKHANHAMDARD@GMAIL.COM