When you first started learning how to build websites, you probably heard a lot about the programming language CSS. But at that time, you may not have understood why CSS is so important to learn. In this series of articles on Learning Basic CSS, we will discuss the basics of CSS and how it works to manage the layout of a website.

Understanding CSS

CSS stands for Cascading Style Sheets, which is a programming language used to manage the layout and style of HTML elements on a website. With CSS, we can make our website look more attractive and appealing to visitors by adjusting colors, text size, layout, element positioning, and much more. Simply put, if we do not apply CSS to the website we create, the webpage will only display plain text and the basic structure of HTML.

CSS Functions in Websites

For clarity, here are some of the main functions of CSS in website development.

Page Layout CSS allows us to flexibly determine the position of elements, column sizes, content width, and more.
Enhancing Website Appearance We can even set the website's background color, fonts, borders, and transition animations to make the website more attractive and comfortable to view.
Responsive CSS provides a syntax called “media query,” which allows us to adjust the display for various screen sizes such as desktops, tablets, and smartphones.

How Does CSS Work?

After understanding the definition and function of CSS in website development, the next important thing is to understand how CSS works. By understanding how CSS works, we can write effective and efficient CSS code when building a website.

CSS Targets HTML Elements with Selectors

If we want to change the appearance of an HTML element, we need to perform element targeting, commonly referred to as a Selector. Here is an example.

p {
  color: green;
}

The explanation of the code above is as follows.

p is a selector that targets all elements that use the <p> tag.
color: green green color will be applied to all elements that use the <p> tag.

Rules in CSS

The rules for writing in CSS are properties and values. Where properties refer to what you want to change, such as color, size, or margin. Meanwhile, values refer to the settings you want to apply to those properties. Take a look at the code below.

selector {
	property: value;
}

So every time we write CSS code, we need to specify properties and values to control the appearance of an element.

CSS Reads from Top to Bottom

If there are two rules with the same level of specificity, the last rule will be read by CSS. For example:

p {
  color: blue;
}

p {
  color: red;
}

The result is red text from the <p> element.

Conclusion

Learning CSS is essential when we start learning how to build a website. With CSS, we can control the overall design of a web page.

Thank you, see you in the next article.