How to Create Classes using CSS ?
Last Updated :
31 Mar, 2021
A class in CSS is a group of CSS property like font-style, height, width, color, etc. which is when used as an attribute in an HTML tag, the CSS styling is applied to that tag.
Syntax:
.class_name {
CSS attributes;
}
A period character or symbol “.” is used which is followed by the class name. Then opening and a closing parenthesis “{ }” is given within which CSS styling is declared.
Explanation: <style/> tag is used to define CSS styling within a .HTML file. A period character “.” is used to declare a class which is followed by the class name which is “green-text” in our example. Then we give opening and closing parenthesis “{ }” within which we define CSS properties.
HTML
< style >
.green-text {
/* CSS properties*/
color: green;
font-size:250%;
}
</ style >
|
Assigning our CSS class to an HTML tag:
Explanation: In the below implementation we have assigned our “green-text” CSS class to the </p> tag, which will apply our CSS styling to the contents of that </p> tag.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
/*CSS class*/
.green-text {
color: green;
font-size:250%;
}
</ style >
</ head >
< body >
< p class = "green-text" >Welcome to GeeksforGeeks</ p >
</ body >
</ html >
|
Output:
As you can see we have successfully created a class using CSS and assigned it to an HTML element. For further knowledge about CSS, selectors go through this article.
Share your thoughts in the comments
Please Login to comment...