CSS Properties For Beginners

There are some basic CSS properties, which everyone must be aware of to start working with CSS. We will have a look into the properties here.

What is CSS?

CSS stands for Cascading Style Sheets. It is a set of properties, which explains the look & feel of HTML elements in a screen.

CSS properties can be written in external style sheets, internal style sheets or as inline styles.

• External style sheets is a CSS file, where you can manage all the styles for any element you want.
• Internal style sheets are the styles written within in HTML page inside the style tag.
• Inline styles are the styles specific to HTML element, which is written inside style attribute of the element.

While using external & internal style sheets, CSS properties can be assigned to HTML elements by means of HTML tags or by using class or Id attributes.

<div class="cssbeginner" id="cssbeginnerid"></div>

In the HTML element, given above, cssbeginner is the class and cssbeginnerid is the Id for the particular div tag.

Now, we can give CSS property to div tag.

Using tag - div{display:block;} // This will result in applying the property to all div tags

or

Using class - .cssbeginner{display:block;} //This will give style to all elements with class as cssbeginner

or

Using id - #cssbeginnerid{display:block;} //This will give style to unique element having id cssbeginnerid

The style, shown above can be written in inline block, as given below.

<div class="cssbeginner" id="cssbeginnerid" style="display:block;"></div>

Now, we will see what are the basic CSS properties, which can be applied to HTML element. 

1. Font-family
   This defines the font for HTML element.
   

   cssbeginner{font-family:'Arial';}

2. Font-size
   This defines the size of a font. It is usually expressed in pixels(px). We can also give it in percent(%), points(pt) or ems(em).
   

   cssbeginner{font-size:13px;}

   
   
   
3. Display
   Display is an important property, which manages the layout of HTML elements. It can be used to specify whether an element has to be shown or not.
   

   cssbeginner{display:block;}

   Other important values for display are none, inline, inline-block etc.
   
   
4. Width
   It is used to set the width of HTML element. It is normally expressed in pixels(px) or percents(%).
   

   cssbeginner{width:300px;}

5. Height
   It is used to set the height of HTML element. It is also expressed in pixels(px) or percents(%).
   

   cssbeginner{height:300px;}

   After providing width & height, our div has been made, which is given below.
   
   
   Since we reduced the element width, the text inside the element is split into the rows.
   
   
6. Color
   
   This defines the color of text inside HTML element.
   
   It can be expressed as a color name or as HEX value or as RGB value.
   

   cssbeginner{color:red;}
   or
   cssbeginner{color:#FF0000;}
   or
   cssbeginner{color:#ff0000;}

   
   You will get the list of colors and their respective HEX/RGB values here
   
   
7. Background-color
   
   This is used to provide backround color for HTML element.
   
   This is also expressed as a color name or as HEX value or as RGB value.
   

   .cssbeginner{background-color:black;}
   or
   .cssbeginner{background-color:#000000;}
   or
   .cssbeginner{background-color:#000000;}

    
   
8. Border
   This property is used to give style to the border of an html element.
   
   It is is an mix of border-style, border-width & border-color property.
   
   Border-style can have values as dotted, dashed, solid, etc.
   
   Border-width can be expressed as pixels or percent
   
   Border-color can be color name, HEX value or RGB value.
   

   .cssbeginner{border:solid 2px yellow;}

   
   
9. Padding
   This property is used to provide space around HTML elements.
   
   It will clear space inside the border of HTML element and hence the background-color will be available for this cleared space also.
   

   .cssbeginner{padding:20px;}

   Padding can be given separately for top, right, bottom & left.
   

   .cssbeginner{padding-top:20px;}
   .cssbeginner{padding-right:30px;}
   .cssbeginner{padding-bottom:40px;}
   .cssbeginner{padding-left:50px;}

   
   The properties, given above can be combined to a single one, using padding, as given below.
   

   .cssbeginner{padding:20px 30px 40px 50px;}

10. Margin
    This property is also used to generate space around HTML elements.
    
    The main difference between the margin & padding is that the margin creates space outside the border of elements.
    
    Hence the background color would not be having effect for the margin space.
    
    
    

    .cssbeginner{margin:50px;}

    The margin can also be given separately for top, right, bottom & left.
    

    .cssbeginner{margin-top:20px;}
    .cssbeginner{margin-right:30px;}
    .cssbeginner{margin-bottom:40px;}
    .cssbeginner{margin-left:50px;}

    The properties, given above can be combined to a single one, using margin, as given below.
    

    .cssbeginner{margin:20px 30px 40px 50px;}

    Now, we can give all the 10 properties, given above to a div with class cssbeginner, as given below.
    

    <style type="text/css">
    .cssbeginner { font-family: 'Arial'; font-size: 13px; display: block; width: 300px; height: 300px; color: Red; background-color: black; border: solid 2px yellow; padding: 20px; margin: 50px; }
    </style>

Conclusion

In this blog, we have learned the most basic and most needed CSS properties, which can be used in HTML element.

Hope, this will be helpful for the beginners.