Kushal

Posted on Aug 1, 2020 • Edited on Aug 21, 2020

[1] CSS Basics #CSSForDevelopers

#css #cssfordevelopers #100daysofcode #100daysofcss

CSS for Developers 🦄

CSS is really important if you are trying to be a full stack developer.

Being a full stack developer, you should be able to handle complete application on your own from design -> develop -> automate to deploy.

Let's start the journey. Stay with me during the article, I will be covering most of the important CSS topics to get started.

If you are a developer and wondering from where to start learning CSS, then you can follow this series and you will surely get everything from basics to designing a component.

Why CSS

Yes you are correct, to separate the representational logic from the markup. CSS is a language that helps you to give design to your pages. CSS provides flexibility of any future design changes, otherwise we have to always update mark-up(HTML).

Exploring basics of CSS

Now, we have to add CSS to our project. I would suggest, not to use inline CSS or any inline styles as that makes the code dirty and you will really have hard time in future when your project expands. Also, you will not have a global implementation for your CSS rules.

Use CSS as external file link, something like this:

<link rel="stylesheet" href="./index.css" type="text/css"  />

A CSS can be written something like this:

body {
    background-color: #ff0000;
}

This is the typical structure of writing CSS. What we are doing is applying background color to the body. So this has two parts

Selectors: "body" is a selector here. Selector is used to apply styles to the elements. We have multiple selectors.
Some simple selectors are:
- Type selector: body is is tag, where we are applying design to a particular tag. These are type selectors.
```
a {
     background-color: #ff0000;
}
```
- Id selector: Which will apply designs to the Id of element on the page.
```
#parent {
     background-color: #ff0000;
}
```
- Class Selector: It identifies the classes with the same name and apply the designs to all the elements having that class.
```
.childnav {
     background-color: #ff0000;
}
```
- Universal selector: asterisk is a universal selector, where we are applying design to all the tags. These are universal selectors.
```
* {
     background-color: #ff0000;
}
```
- Attribute selector: matches value of in given selector. Like this will apply color to all a tags which has title.
```
a[title] {
     color: #ff0000;
}
```
Key Value pairs: "background-color" is key and we are setting the value as "#ff0000".

We have selectors like body, and key value properties. Selectors tells the browser where to apply the style.

What are Pseudo-classes? Pseudo classes are applied to the element based on some external factors like when a user mouse hover, we want some text color change.

a:hover {
  color: blue;
}

You can learn about more pseudo-class here: standard pseudo-classes

Grouping multiple selectors

We can group multiple selectors as well. We all have seen them. So, let's see some examples:

⚠️ The sample HTML that we will be using is: You can copy paste the code from here: GIST Link . Please, copy paste the gist code in any online editor. You can use repl.it as well. You can replace the code of style with the given style in each point and play with it. This will help to understand with live examples.

<body>
    <h1>This is h1 directly under body</h1>
    <div>
      <h2>I am h2 directly under div</h2>
      <p>This is para inside div, but not directly inside div</p>
    </div>  
    <div>
         <p>This is para directly inside div</p>
         <span><p>This is para inside span</p></span>
    </div>
    <p>I am paragraph directly inside the body and below a div</p>
</body>

Let's take two tag selectors separated by commas. This can be class or id selector as well. So, what we are doing in this example:

    div, p {
        background-color: #ff0000;
    }

We are actually trying to set background color to all the div tags on the page and same is the case with p. These sections will be yellow in color:

    <div>
        <h2>I am h2 directly under div</h2>
        <p>This is para inside div, but not directly inside div</p>
    </div>
    <div>
        <p>This is para directly inside div</p>
        <span><p>This is para inside span</p></span>
    </div>
    <p>I am paragraph directly inside the body and below a div</p>

element inside an element

    div p {
        background-color: #ff0000;
    }

This will give #ff0000 background to all the p inside div tag. p tag should be inside div, irrespective of they are nested inside any other tag. These lines will be yellow:

 <p>This is para inside div, but not directly inside div</p>
 <p>This is para directly inside div</p>
 <p>This is para inside span</p>

greater than sign between elements

    div > p {
        background-color: #ff0000;
    }

This will give #ff0000 background to all the p tags whose parent is a div tag. p should have div as parent, If you observe, there is a difference between what we are seeing in above example and this example. These lines will be yellow:

 <p>This is para inside div, but not directly inside div</p>
 <p>This is para directly inside div</p>

plus sign between elements

    div + p {
        background-color: #ff0000;
    }

This will give #ff0000 background to all the p which are placed immediately after div tag. These lines will be yellow in color.

<p>I am paragraph directly inside the body and below a div</p>

⚠️ Please use this GIST for below examples: GIST for below examples. Please, copy paste the gist code in any online editor. You can use repl.it as well. You can replace the code of style with the given style in each point and play with it.

element with dot and class name

    p.myclass{
        background-color: #ff0000;
    }

This will give #ff0000 background to all the p which have class myclass.

attributes selector

p[data-test] {
    background-color:  #ffff00; // yellow
}

a[target] {
    background-color:  #ffa500; // orange
}

p[data-test] will give #ffff00 background to all the p which have custom attribute as data-test. and a[target] will give orange color to all the a elements which have target.

attributes selector advanced

p[class*="-myclass"] {
    background:  #008000; // green
}

This will give green color to all the p elements which has class like "-myclass"

::after and ::before

p::after { 
  content: " - add content";
  background-color: yellow;
}

::after Insert something after the content of each p element. and ::before will add before the element

:hover

a:hover {
  background-color: yellow;
}

:hover Insert something on move hover.

These are some of the common selectors, you can find more at https://www.w3.org/TR/selectors-3/ and a good handy list is available here as well: https://www.w3schools.com/cssref/css_selectors.asp

What is Cascading and when do we need it

So, we have seen, how we can apply styles to different elements. Now, let's discuss a scenario where we have nested tags/classes and there is CSS written for parent as well as child.

HTML code snippet

<div> Welcome to CSS learning </div>
<div>
    <p> You are learning CSS for Developers </p>
    <p> Let's get started </p>
</div>

CSS code snippet

div {
    background-color: #ff0000; // red
}
p {
    background-color: #FFFF00; // yellow
}

Let's discuss the problem first, If you observe, we have given red color to div selector. So, ideally it should apply red color to all the divs, Try it your self.

Something is wrong, you are not able to see red on both the divs!

Yes it should not give red to all the divs. This is the scenario for us to explore. Where Cascading will be applied. We can think of Cascading as applying of CSS rules based on the inheritance. We will explore more in next topic.

I will be publishing how cascading works, how we will implement inheritance, and advance topics of CSS and SASS.

Stay Connected and Stay Save.