Basics of CSS

CSS is the main language you should use when designing a website. Every time I was working on the project, I got lost in many parts because I didn’t know the basics of CSS. Therefore, I would like to study the basic theory of CSS and apply ‘design’ in earnest.

There are two easiest ways of beautifully designing a web page. The first one is adding a style tag directly to the HTML. The second one is the CSS.

The <style> tag is one of the HTML attributes and saying to the web browser “Hey web brower, since the content inside this <style> tag is CSS, you have to interpret and process this according to the syntax of the language called CSS.”

With this code, whether there are 1 million or 1 billion <a> tags, you can get an explosive effect that changes instantly. As a programmer, we should write a code as DRY (Don’t Repeat Yourself). Imagine that you need to apply styles to 1 million <a> tags with <font color=”blue”> tags. That would be very miserable. Therefore, being able to change things of the same character at once by using CSS codes can increase readability and also help on the refactoring.

Basic Syntax of CSS

2 ways to embed CSS in a web page

1. Use <style> tag.

‘a’ is called a selector, and the content inside of {} is called a declaration. In the declaration, we must not forget to use a semicolon(;). It is used to separate the beginning and end of a description. You must always use a semicolon after specifying an effect.

2. Use the style attribute.

When using the ‘style’ tag directly, it’s applying CSS in the HTML language. In this case, ‘style’ has an effect where the style tag is placed, so there is no selector.

Basics of CSS selector

There are 2 important factors in CSS are effects and selectors. We’ve talked about the attribute above, so let’s talk about the selector. There are many different types of selectors, but in the blog, I will just take care of the three most basic and important ones.

1. Basic tag ( Element )

As the image above, I wanted all the texts within the <h1> tag to change the color to blue. Therefore, the selector is the element tag name which is <h1> and added declaration with {color:blue;}. Easy, right?

2. Class

Let’s imagine there are so many <div> tags and you want to change the color of specific <div> tags. How would you do it? To do that, it is necessary to group them with one of the HTML attributes that’s called ‘class’. In this case, the class is named through the value of ‘cities’. And you can declare the effect on the cities class in the style tag. And don’t forget to add (.) in front of the class name to prevent duplication with basic tag elements. By adding (.), it becomes a selector pointing to the tag whose class value is cities on this page, and apply all the effects in {}.

3. Id

The last selector is the ‘ID’. ID must appear only once on a web page and has the highest advantage. Think about the meaning of id, id names identity in everyday life, refers to information about only one person, such as resident registration number or student number, and should not be duplicated. Therefore, there is one value for id on one page. And you can declare the effect for the id selector in the style tag. In style tag, remember we should add (.) in front of the class name, right? In this case, we should add (#) for the ID selector.

Finally, it’s pretty much about what I’ve prepared. By searching on google for CSS selector, you’ll see there are various selectors. I hope this blog has been helpful and thanks for reading! ❤