Basic CSS – Use a css class to style an element

CSS is defined as Cascading Style Sheet. it is used to style our webpages. CSS describes how our HTML tags are displayed on the web. Basically, CSS is used to make our web pages more attractive and beautiful.

With the help of CSS, you can design any layout, you can give your page a specific color, height, width, animation and so many other properties. We define classes in CSS and then use them in HTML tags. Here we start with how to create a class and how to give a property to a CSS class.

CSS classes are define with .(dot) and the class name.

Example : .banner

Here, .(dot) define that it is a CSS class. and the name of the class is banner.

Properties can be defined within the curly braces. with opening and closing braces.

Example : .banner

{  //Opening braces

} //Closing braces

Now you can use the different properties of CSS within the curly braces.

Example :  .banner {

height:100%;

width:100%;

}

Note that every css property close with semicolon(;). We define properties as attributes name(height,width), colon(:), attributes value (100%) and then semicolon(;).

This property defines that the height and width of the banner should be 100%.

How to use class in HTML.

We have done with the CSS class, now we have to put this class in HTML tag so that it will reflect on your page.

Example: Lets take a img banner.

<img src="banner.jpg">

// here we take a banner image.

Now put the class we define above in img tag

Example :

<img class="banner" src="banner.jpg">

// we define class as tag then class = "class name" and close tag. So our banner class property can be define into banner image.

Same as the height and width you can also use other properties. and make your page more beautiful and attractive.

If you want to learn more about CSS check ours. CSS definition and Usage blog.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *