DEV Community

rashidyaqoob
rashidyaqoob

Posted on

CSS properties

CSS properties are used to apply the desired effects on HTML elements.
These properties are named in such a way that you will understand what is going to happen on the HTML elements.
The properties like font-size, color indicate that the font-size and color changes according to the desired changes.Since CSS contains alot of properties that can be used for styling purposes and discussing all of them here is impossible. So, I am going to discuss here only those properties which are used mostly.
The properties that we will discuss here:

font-size

font-family

background-color

color

text-decoration

display

margin

padding

border

width

FONT-SIZE:

This property is used to change the font size of the HTML element.

p{
    font-size:30px;
}

FONT-FAMILY:

The font-family property is used to give styling of the text.It uses specification of values and these values are seperated by commas.The first value will be the desired value, but if that is not available, the browser can use another in the list.

font-family:Helvitiva, sans-serif;

Background-color:

This property is used to set the background color of the HTML element.

p{
    background-color:green;
}

COLOR:

This property is used to set the color of the text.

p{
    color:blue;
}

Text-decoration:

This property sets the decoration of the text and it takes values like underline,wavy,overline,inherit.

p{
    text-decoration : underline;

}

Display:

This property is used to change the way, HTML elemnet appears on the webpage.
It takes values like block, inline-block, inline etc.

span{
    display:block;
}

Margin:

This property is used to give a space between parent element and a child element.
p{
margin: 10px;
}
Actually, margin is a short form of margin-top,margin-right,margin-bottom and margin-left.

Padding:

This property is used to give space within an element.

p{
    padding:20px;
}

Border:

This property is used to give the border around an element.
It is a short form of border-width, border-style and border-color.

h2{
    border:2px dotted red;
}

Width:

This property describes how wide the element should be.

div{
    width:200px;
}

Discussion (0)