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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...