CSS class selector
CSS Tutorial » CSS class selector
What is a CSS class?
A CSS .class is an attribute used to define a group of HTML elements to apply a unique style and formatting to those CSS elements.
The .class CSS selector selects elements with a specific class attribute.
To select items with a specific class, type a period (.), Followed by the class name.
Internal CSS and HTML Syntax:
.class_name {
property: value;
}
</style>
In this chapter we learn:
What is a CSS class?
Why do we use class in CSS?
What is CSS class and ID?
Browser Support CSS class selector
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| Browser Support option | Yes | Yes | Yes | Yes | Yes |
CSS class selector
Use a class when you want to constantly style multiple items across the webpage. Classes are useful when you have more than one item that shares the same style.
<!DOCTYPE html>
<html>
<head>
<style>
p.paragraph {
text-align: right;
color: green;
}p.large_paragraph {
font-size: 250%;
}
</style>
</head>
<body><h1>Example of the .class selector</h1>
<h1 class="paragraph">This h1 title not affected</h1>
<p class="paragraph">This paragraph will be green and right aligned.</p>
<p class="paragraph large_paragraph">This paragraph will be green,<br />
right aligned, <br />
and with large font-size 250%.</p></body>
</html>
Related subjects:
difference between class and id
CSS table border
Tags: css class selector, vs id, inside class, starts with, inheritance, and id, hover, name convention, contains, inherit from another class
How can I use one class inside another class in CSS?
To nestle classes or any other selector in CSS, very simple just separate the selector with spaces as: .parent .child { /* CSS Properties */ }
<!DOCTYPE html>
<html>
<head>
<style>
.green-text {
color: green;
font-weight: bold;
}.green-text span {
color: red;
}
</style>
</head>
<body><h1 class="green-text">
This is my nice title <span>for the next paragraph</span> header.
</h1></body>
</html>
TAGS: What is a CSS class?, Why do we use class in CSS?, What is CSS class and ID?
How to Use a CSS Class
The examples below will help you understand in a fairly simple way how to use css class inside class.
<!DOCTYPE html>
<html>
<head>
<style>
.red-text {
color: #F00;
}
.font-28{
font-size: 28px;
}
</style>
</head>
<body><p class="red-text font-28">This is an example of a sentence with font-size: 28px</p>
<p class="red-text">This is an example of a sentence with normal font size</p></body>
</html>
css class selector, vs id, inside class, starts with, inheritance, and id, hover, name convention, contains, inherit from another class
CSS class selector - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.