How CSS works?

How CSS works?

What is CSS?

CSS ( Cascading Style Sheets ) is used to style pages, it describes HTML tags and is stored in .css files.

Example of CSS

With help of CSS, you can design a website to look exactly like you imagined. To give you a brief understanding of what CSS can do on a basic level, it can add colors, sizes, alignment, borders, backgrounds, fonts etc.

Taking the previous article example of HTML. We have an element

inside the body. We’ll try to style it.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Hello world!</p>
</body>
</html>
/* style.css */

p {
	color: #FF2D00;
}

In this example, we changed the color the text inside the

element to be red. To do so, we first linked our CSS file in the of HTML file. Inside the CSS file you will always write in this format: tag { property: value, property: value, … }. Colors are made out of HEX values or RGB values. With a simple search on google, you can find all the possible colors codes.

Using class and id in CSS

<p class="myredtext">Hello world!</p>
<p id="myredtextid">Hello world!</p>
/* style.css */

.myredtext {
	color: #FF2D00;
}

#myredtextid {
	color: #FF2D00;
}

In order to have more flexibility in styling a file, you can use classes and ids to mark elements to style. An HTML tag can have multiple classes but only one tag. A class will be styled using a dot syntax .myredtext {} an ID will use a hash #myredtext {} .

Reuse CSS class

Using classes will make your CSS more efficient because you can reuse your class style to multiple HTML tags.

<p class="myredtext">Foo</p>
<p class="myredtext">Bar</p>
/* style.css */

.myredtext {
	color: #FF2D00;
}

Stay tuned & subscribe, I will come back with some more examples of more complex CSS.

Share on

See Also
Send us a few words.
What would you like to see different on this blog?
👌
👎