Diving into the basics of CSS

We have 3 alternatives of adding CSS on a web page: we can add the css inline, using the style attribute, we can add the CSS in head tag of the page, where we put the style tag and the last alternative is to add the CSS in a separate CSS file. After we chose one of this 3 options, let's say that we chose the second or the third option because this are the most recommended alternatives, we can start writing so-called CSS rules. Our CSS rules needs to be inside of a selector. A selector simply is an additional piece of information that tells CSS to which element in your DOM, so inside of your body and the body is also treated as an element by the way, to which element you want a specific declaration.

The recommended way of working is using an extra stylesheet because in that way you can have a clear separation of your HTML and your CSS code which is especially useful as your CSS code grows and it would bloar your head section at some point and additionally if you use the same stylesheet in multiple pages let's say, then your browser can cache the stylesheet and doesn't need to re-download it for every new page, whereas if you include your styles in head section, you increase the file size of your HTML file and the browser needs to re-download it since it's part of the HTML page for every new page which can be slower.

CSS selectors:

1) Elements: - set equal style for these elements

HTML:

<h1>Our header</h1> <p>The Blog Post</p> <div>More Info</div>

CSS:

h1 { color: red; }

2) Classes: - with classes, we can define a style which we then apply to all elements that have the same class and a class is added to an element in HTML by adding the class attribute.

HTML:

<h1 class="blog-post">Our header</h1> <p class="blog-post">The blog post<p> <div class="blog-post">More info</div>

CSS:

.blog-post { color: red; }

3) Universal selector (*): - you style every element on your page

HTML:

<h1>Our header</h1> <p class="blog-post">The blog post</p>

CSS:

* { color: red; }

4) IDs: - allow you to select elements by the ID they have and then apply a style to that one specific

HTML:

<h1 id="main-title">Our header</h1>

CSS:

#main-title { color: red; }

5) Attributes: - helps you to select HTML elements by the attribute they have and this again can select multiple elements, unlike the ID selector which only selected one.

HTML:

<button disabled> Click </button>

CSS:

[disabled] { color: red; }