Term: II
Session 2021-2022
CSS PROPERTIES
1. Background colour
The background-color property sets the background color of an element.
Eg:
background-color: coral;
background-color: #92a8d1;
background-color: rgb(201, 76, 76);
2. Color
The color property specifies the color of text.
Eg:
body {
color: red;
}
h1 {
color: #00ff00;
}
3. Alignment
The text-align property specifies the horizontal alignment of text in an element
Eg:
h1 {
text-align: center;
}
p{
text-align: right;
}
Tini Vasanth ICT-Yr. VIII ICT Term II (2021-2022)
Term: II
Session 2021-2022
p{
text-align: justify;
}
4. Font
The font property is a shorthand property for:
font-style: used to specify italic text
font-weight: specifies the weight of a font
font-size/line-height: sets the size of the text.
font-family: to specify the font of a text
Eg:
font-family: Times New Roman;
font-family: Arial;
font-family: Lucida Console;
font-style: normal;
font-style: italic;
font-style: oblique;
font-weight: normal;
font-weight: bold;
font-size: 40px;
font-size: 40pt;
font-size: 100%;
5. Border
The CSS border properties allow you to specify the style, width, and color of an element's
border.
border-style: specifies what kind of border to display
border-width: specifies the width of the four borders
border-color: to set the color of the four borders.
border-radius: to add rounded borders to an element
border-collapse: sets whether table borders should collapse into a single border or be
separated.
Tini Vasanth ICT-Yr. VIII ICT Term II (2021-2022)
Term: II
Session 2021-2022
Eg:
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-width: 5px;
border-width: medium;
border-width: thick;
border-color: red;
border-color: #ff0000;
border-radius: 5px;
border-collapse: separate;//default value
border-collapse: collapse;
6. Margin
The margin property sets the margins for an element, and is a shorthand property for the
following properties:
margin-top
margin-right
margin-bottom
margin-left
Eg:
margin-bottom: 25px;
margin-left: 30px;
margin-right: 150px;
margin-top: 25px;
margin: auto; // The browser calculates a margin
Tini Vasanth ICT-Yr. VIII ICT Term II (2021-2022)
Term: II
Session 2021-2022
Centre aligned within browser window:
margin-left: auto;
margin-right: auto;
7. Padding
An element's padding is the space between its content and its border.
The padding property is a shorthand property for:
padding-top
padding-right
padding-bottom
padding-left
Eg:
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
8. Width
The width property sets the width of an element.
Eg:
width: 50%;
width: 250px;
width: auto;// The browser calculates the width
9. Height
The height property sets the height of an element.
Eg:
height : 50%;
height : 250px;
Tini Vasanth ICT-Yr. VIII ICT Term II (2021-2022)
Term: II
Session 2021-2022
height : auto;// The browser calculates the height
10. Visibility
The visibility property specifies whether or not an element is visible.
Eg:
visibility : visible;//default value
visibility : hidden;
11. class
The class attribute is often used to point to a class name in a style sheet.
For more CSS properties refer below link
https://www.w3schools.com/css/default.asp
Tini Vasanth ICT-Yr. VIII ICT Term II (2021-2022)
Term: II
Session 2021-2022
Tini Vasanth ICT-Yr. VIII ICT Term II (2021-2022)
