CSS classes are an important part of using CSS style rules on web pages. They are used to create specific styles that can then be applied to different elements on a page.
Class definition starts with a dot (.), followed by the class name. The class name can be any string that begins with a letter or underscore.
For example, if we want to define a class called "header", the following code snippet demonstrates how it can be implemented in CSS:
.title {
font-size: 24px;
color: #333;
text-align: center;
}This CSS code sets the size of the title text to 24 pixels, the color of the text to dark gray, and places the text in the center of the page.
Then we can apply this class to an HTML page element using the "class" property. This is done by specifying the element's "class" property and giving it a value of the class name, as shown in the example below:
<h1 class="otsikko">Welcome to my website!</h1>This HTML code sets the text style of the heading element according to the class "otsikko", and it now appears as intended.
Using CSS classes is very useful because they can be applied to several different elements on a page. If you want, you can create multiple classes with different styles and then apply them to different elements on the page as needed.
Example
Here is an example of an HTML page that uses a CSS class to define the style of the heading:
<!DOCTYPE html><html><head><title>Using a CSS class for a header</title><style>
.otsikko {
font-size: 24px;
color: #333;
text-align: center;
margin-top: 50px;
}
</style></head><body><h1 class="otsikko">Welcome to my website!</h1><p> This is an example of an HTML page that uses a CSS class to style a header.</p></body></html>
In this example, we have defined a CSS class called "otsikko", which specifies the font size, color, and text alignment of the header. Then we apply this class to the header element on the HTML page using the "class" attribute.
A margin class called "otsikko" has also been added to the top of the page to ensure that the header is not too close to the top of the page.
When you open this HTML page in a browser, you'll see a title formatted according to the CSS class "otsikko".
Practice
Valitettavasti Replit-palvelu on muuttnut lennosta eikä enää anna suorittaa näitä koodeja suoraan selaimessa. Voit klikata alla olevaa "Open in Replit" linkkiä ja avata koodin Replit-palvelussa. Meillä on työn alla etsiä Replitille korvaaja.
Ready to become an ethical hacker?
Start today.
As a member of Hakatemia you get unlimited access to Hakatemia modules, exercises and tools, and you get access to the Hakatemia Discord channel where you can ask for help from both instructors and other Hakatemia members.