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.

  1. <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.
  1. Using tag - div{display:block;} // This will result in applying the property to all div tags  
  2.   
  3. or  
  4.   
  5. Using class - .cssbeginner{display:block;} //This will give style to all elements with class as cssbeginner  
  6.   
  7. or  
  8.   
  9. 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.
  1. <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.
    1. 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).
    1. cssbeginner{font-size:13px;}   
     size

  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.
    1. 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(%).
    1. cssbeginner{width:300px;}   
  5. Height
    It is used to set the height of HTML element. It is also expressed in pixels(px) or percents(%).
    1. cssbeginner{height:300px;}   
    After providing width & height, our div has been made, which is given below.

    height
    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.
    1. cssbeginner{color:red;}   
    2. or   
    3. cssbeginner{color:#FF0000;}   
    4. or   
    5. cssbeginner{color:#ff0000;}  
    color
    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.
    1. .cssbeginner{background-color:black;}   
    2. or   
    3. .cssbeginner{background-color:#000000;}   
    4. or   
    5. .cssbeginner{background-color:#000000;}   
    There are some basic css properties that everyone must be aware of to start working with css. We will have a look into those 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 an .css file where you can manage all styles for whatever elements you want. Internal style sheets are styles written within an html page inside style tag. Inline styles are styles specific to a html element which is written inside style attribute of that 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 above html element, cssbeginner is the class and cssbeginnerid is the id for particular div tag.  Now we can give css property to above div tag like below -  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 above style can be written in inline block as below    <div class= 
  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.
    1. .cssbeginner{border:solid 2px yellow;}   
    border
  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.
    1. .cssbeginner{padding:20px;}   
    Padding can be given separately for top, right, bottom & left.
    1. .cssbeginner{padding-top:20px;}   
    2. .cssbeginner{padding-right:30px;}   
    3. .cssbeginner{padding-bottom:40px;}   
    4. .cssbeginner{padding-left:50px;}   

    The properties, given above can be combined to a single one, using padding, as given below.
    1. .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.

    margin
    1. .cssbeginner{margin:50px;}   
    The margin can also be given separately for top, right, bottom & left.
    1. .cssbeginner{margin-top:20px;}   
    2. .cssbeginner{margin-right:30px;}   
    3. .cssbeginner{margin-bottom:40px;}   
    4. .cssbeginner{margin-left:50px;}   
    The properties, given above can be combined to a single one, using margin, as given below.
    1. .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.
    1. <style type="text/css">   
    2. .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; }   
    3. </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.

Ebook Download
View all
Learn
View all