Career Digital Skills Program
Web Development - CSS 02
CSS Margins
Margins are used to create space around elements, outside of any defined borders.
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
Example
Set different margins for all four sides of a <p> element:
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one property.
Example
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
In the example above, the <h1> element has a bottom margin of 50px and the <h2> element
has a top margin set to 20px.
CSS Padding
Padding is used to create space around an element's content, inside of any defined borders.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
Example
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties in one property.
The padding property is a shorthand property for the following individual padding properties:
padding-top
padding-right
padding-bottom
padding-left
So, here is how it works:
If the padding property has four values:
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
div {
padding: 25px 50px 75px 100px;
}
Career Digital Skills Program | 0334-9511133 Page 2
If the padding property has two values:
top and bottom paddings are 25px
right and left paddings are 50px
Example
div {
padding: 25px 50px;
}
If the padding property has one value:
all four paddings are 25px
div {
padding: 25px;
}
CSS Height, Width and Max-width
The CSS height and width properties are used to set the height and width of an element.
The CSS max-width property is used to set the maximum width of an element.
CSS height and width Values
Example
Set the height and width of a <div> element:
div {
height: 200px;
width: 50%;
background-color: blue;
}
Career Digital Skills Program | 0334-9511133 Page 3
Setting max-width
The max-width property is used to set the maximum width of an element.
Example
This <div> element has a height of 100 pixels and a max-width of 500 pixels:
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
The CSS Box Model
All HTML elements can be considered as boxes.
In CSS, the term "box model" is used when talking about design and layout.
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
Margin - Clears an area outside the border. The margin is transparent
Career Digital Skills Program | 0334-9511133 Page 4
Example
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
CSS Text
CSS has a lot of properties for formatting text.
Text Color
The color property is used to set the color of the text.
The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
Example
body {
color: blue;
}
h1 {
color: green;
}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
Career Digital Skills Program | 0334-9511133 Page 5
Example
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}
Text Direction
The direction and unicode-bidi properties can be used to change the text direction of an
element:
Example
p{
direction: rtl;
unicode-bidi: bidi-override;
}
CSS Text Decoration
The text-decoration-style property is used to set the style of the decoration line.
Example
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
More examples:
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
Career Digital Skills Program | 0334-9511133 Page 6
Specify the Thickness for the Decoration Line
The text-decoration-thickness property is used to set the thickness of the decoration line.
Example
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
p{
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
The Shorthand Property
The text-decoration property is a shorthand property for:
text-decoration-line (required)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)
Example
H1 {
text-decoration: underline;
}
H1 {
text-decoration: underline red;
}
H1 {
text-decoration: underline red double;
}
Career Digital Skills Program | 0334-9511133 Page 7
p{
text-decoration: underline red double 5px;
}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word:
Example
[Link] {
text-transform: uppercase;
}
[Link] {
text-transform: lowercase;
}
[Link] {
text-transform: capitalize;
}
CSS Text Spacing
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:
Example
p{
text-indent: 50px;
}
Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.
The following example demonstrates how to increase or decrease the space between
characters:
Career Digital Skills Program | 0334-9511133 Page 8
Example
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
Line Height
The line-height property is used to specify the space between lines:
Example
[Link] {
line-height: 0.8;
}
[Link] {
line-height: 1.8;
}
Word Spacing
The word-spacing property is used to specify the space between the words in a text.
Example
[Link] {
word-spacing: 10px;
}
[Link] {
word-spacing: -2px;
}
Career Digital Skills Program | 0334-9511133 Page 9