CSS style sheets are used to format web pages separate from HTML. A CSS style sheet contains rules that define things like element colors, fonts, backgrounds, and positions. Using CSS enables easy and maintainable customization of the appearance of web pages.
The CSS style sheet can be included in an HTML document in different ways. One of the most common ways is to use the element. In this case, the CSS style sheet is loaded as a separate file and attached to the HTML document in the section as follows:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Instead of using the file name in the href attribute, it is also possible to use a URL address, allowing the CSS file to be loaded from a remote server.
Another way to use a CSS style sheet is to write the rules directly inside the HTML document within the
<head>
<style>
/* CSS-säännöt */
</style>
</head>CSS rules are written using selectors and declarations. A selector defines which element the rule applies to, and a declaration defines what the CSS code within the rule does. For example, the following CSS rule defines the font of a heading element:
h1 {
font-family: Arial, sans-serif;
}In this selector the value is "h1" and the rule specifies that the font of the heading element should be Arial, or if it is not available, then sans-serif.
CSS rules can also be written on multiple lines, which makes them more readable and maintainable:
h1 {
font-family: Arial, sans-serif;
font-size: 2em;
color: #333;
}Using CSS rules, various properties such as background color, borders, indentation, margins, and animations can be modified. CSS also offers different units, such as pixels, percentages, and em units, which can be used to determine the sizes and positions of elements.
The use of CSS also enables responsive design, which means designing a website in such a way that it adapts to different screen sizes. This is particularly important nowadays, when websites are increasingly being accessed on various devices, such as smartphones and tablets.
The development of CSS continues and new features are added regularly. For example, CSS Grid and Flexbox are relatively new features that enable the design and implementation of more complex websites.
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.