Learn CSS Basics – simple cheat sheet to boost your development skills 315 Views Friday July 3, 2020 | Filip Kunjadić - Ćulibrk

Learn CSS Basics – simple cheat sheet to boost your development skills

Today I am going to provide you with some cheat sheet that will help you learn CSS basics! Web development is becoming more and more popular, and with it, CSS is starting to get some attention! If you are just starting your web development journey, this is the right article for you!

I am going to assume that you know the basics of HTML. But, if you are just starting to learn web development you might find this article on 'How to become web developer' helpful. That is my premise for this article. If you would like to hear more about HTML you can visit my youtube channel where I talk about web development and guide you through creating your own blog.

Before we begin talking about CSS, the first thing that you need to know what CSS is. It stands for Cascade Style Sheet and it helps us define how our HTML page will look and that is the reason why you should learn CSS basics. It doesn't matter if you would like to focus on backend or frontend later down the road, you should definitely learning CSS basics because that can't be avoided!

If you are not familiar, there a couple of way to write CSS that will style your page.

Include CSS file into head tag

This is the best way to use CSS into your HTML page. It will be applied to each page where it is include, so you don't have to repeat your code! As you already know, this is how you would include your CSS file into HTML page:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
<!-- Code above is taken from: w3cschools. -->

Write your CSS directly into head

This method is fine in case you want your CSS to be applied to that specific page only. In case you need to use it in multiple pages, this method would include a lot of copy and pasting - which is the first sign of bad coding practice. And this is how you would use it:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
}
p  {
  color: red;
  font-size: 160%;
}
</style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>
<!-- Code above is taken from: w3cschools. -->

Write inline CSS (not recommended)

This is something that I would try to avoid if I were you. This is a considered to be a bad practice because you can easily end up with a messy file with mixed HTML + CSS and it would require a lot of repeating and it would also be hard to maintain. Of course in some cases it is hard to avoid it, and can be useful if used correctly. 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 style="color:red;">This is a heading</h1>
  <p style="font-size:160%;color:red;">This is a paragraph.</p>
</body>
</html>

Before we go on, I would like to direct your attention to default browser CSS settings. Each browser has its own 'default' CSS settings. And in order to achieve the exact same look of your page in every single browser, you should first reset browser default CSS behavior. That is why we use a CSS reset. Here is my favorite CSS reset.

Targeting HTML elements with the CSS cheat sheet

Here a simple cheat sheet that I came up with in order to help you get started with your web development!

p{}
/* targets each paragraph tag */

p.awesome{}
/* targets each paragraph with class 'awesome' */

.awesome{}
/* targets each element with class 'awesome' */

#main{}
/* targets element with id 'main' */

#main .awesome{}
/* targets elements with class 'awesome' that are insider element with an id 'main */

#main.awesome{}
/* targets element with an id 'main' and class 'awesome' */

#main > .awesome{}
/* targets each element with class 'awesome' that is a direct child of element with an id 'main' */

a:hover{}
/* targets each a element in 'hovered' state */

a:focus{}
/* targets each a element in its 'focused' state */

a:visited{}
/* targets each a element that has been clicked / visited */

input + label{} 
/* targets each label that is next to input */ 

input:checked + label{}
/* target, label next to checked input */ 

input[type="radio"]:checked + label{} 
/* targets label next to checked input type radio */

.awesome ~ div{}
/* targets each div that is preceded by element with class 'awesome' with same parent */ 

a[target=_blank]{} 
/* targets each a tag where target attribut equals _blank */ 

div[class^="awesome"]{} 
/* targets each div that has class attrtbute that begins with 'awesome' */ 

div[class$="awesome"]{}
/* targets each div that has class attribute that ends with 'awesome' */ 

h1:not(.awesome){}
/* targets each h1 tag that doesn't have class 'awesome' */

p.awesome::first-letter{}
/* targets first letter of each paragraph with class 'awesome' */

p.awesome::first-line{}
/* targets first line of each paragraph with class 'awesome' */

.awesome p:first-type{}
/* targets each p element of every element with class 'awesome' */

p.awesome::before{}
/* creates pseudo element BEFORE each p tag with class 'awesome' */

p.awesome::after{}
/* creates pseudo element AFTER each p tag with class 'awesome' */

More references can be found on w3cschools website!