CSS (Cascading Style Sheets) is a styling language used to control the visual appearance of web pages. With CSS, you can control your web page’s layout, colors, fonts, and other design elements.
CSS works by applying rules to HTML elements. You can specify which HTML elements to style by using selectors. Once you have selected an element, you can apply styling using various CSS properties.
Let’s look at some examples to understand how CSS works:
Example 1: Changing the Color of Text
To change the color of text on a web page, you can use the color Property in CSS. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Example 1: Changing the Color of Text</title>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
In this example, we have applied the color property to the h1 element. The value of the color property is blue, so the text inside the h1 the element will be blue.
Example 2: Changing the Background Color
To change the background color of a component, you can use the background color Property. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Example 2: Changing the Background Color</title>
<style>
body {
background-color: lightgrey;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Example 3: Changing the Font Size
To change the font size of text on a web page, you can use the font-size Property. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Example 3: Changing the Font Size</title>
<style>
h1 {
font-size: 36px;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
In this example, we have applied the font-size property to the h1 element. The value of the font-size property is 36px, so the text inside the h1 element will be 36 pixels in size.
These are just a few examples of what you can do with CSS. CSS offers a wide range of styling options, and with practice, you can create beautiful, responsive, and dynamic web pages.