Scribd
Upload
2 views

CSS_PROPERTIES (1)

Cascading style sheet properties for lower grades

Uploaded by

BlueCherry Clouds
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSS_PROPERTIES (1)

Cascading style sheet properties for lower grades

Uploaded by

BlueCherry Clouds
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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)

You might also like