CSS 101 GUIDE

Hey guys welcome to my blog on CSS. You guys can go through this tutorial and get a sneak peak on CSS if you are a complete beginner. We all know that HTML and CSS are two main building block of any website that your see in todays world. Without learning HTML and CSS no-one can say that they are a website developer. Where HTML serves as the skeleton of a website, CSS on the other hand helps you to give your website the look and feel that you want to give. In this blog we will look at CSS code and how it works. If you dont know HTML at all I would personally recommend you to see my HTML tutorial first before learning CSS. We will not touch HTML over here how-ever if you interested in learning HTML , please Click Here

Let's start learning the CSS

I will be coding on sandbox for this tutorial. Please feel free to use any code editor as per your choice. All the links to my code will be provided below.

Bonus - At the end of this lecture I will tell you about three useful VSCODE editor extensions that will help you speed up your development process

Before starting let me introduce you to the different types of selectors in CSS. There are eight different types of selectors that are used to target elements in CSS

•     /* universal selector --> selects all elements */
      * {
        background-color: #4d4d4d4d;
        color: #fff;
      }
  

•      /* individual selector --> selects particular element*/
      p {
        background-color: rgb(165, 165, 34);
      }
  

•      /* class and id selector */
  
      /*This is class*/
      .warning {
        background-color: rgb(184, 125, 15);
        color: papayawhip;
      }
      /*This is id*/
      #hello {
        background-color: rgb(207, 47, 47);
        color: #fff;
        border: 3px dotted blue;
        padding: 10px;
      }
  

•     /* and selector (chained) */
      /* This li tag has both the classes  */
      li.bg-black.text-white {
        background-color: black;
        color: #fff;
      }
  

•     /* combined selector */
      span,
      li {
        background-color: burlywood;
      }
  

•     /* inside an element */
      div ul li {
        background-color: #96e2ad;
        border: 2px solid black;
        padding-top: 2px;
      }
  

•     /* direct child */
      div > li {
        background-color: rgba(43, 43, 134, 0.815);
      }
  

•      /* sibling  ~ or + */
      /* + targets only one child  after sibling class*/
      .sibling + p {
        background-color: rgba(218, 70, 223, 0.473);
      }
      /* ~  targets  all children after sibling class*/
      .sibling ~ p {
        background-color: #c42d2dcb;
      }
  

---

Now let us write some code on our own and understand them more thoroughly.

Steps to follow before writing the CSS code

• Create a index.html file as shown in the directory structure(Refer the code)
• Create a directory called CSS
• Inside it create a file called as style.css
• Now in the head portion of HTML file link the CSS file as show using link tag
• Include the HTML elements in the body of the HTML part
• Now start writing the CSS line by line

This is what you will accomplish

      /* universal selector */
* {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding: 0;
}

/* Individual Selector */
body {
  background-color: #4d4d;
}

/* class selector */
.nav-bar {
  background-color: rgba(255, 255, 255, 0.911);
  height: 10vh;
  width: 100vw;
}

.menu {
  margin-top: -20px;
}
/* using margins to align items*/
.nav-item {
  list-style: none;
  display: inline;
  margin-right: 10px;
  transition: 0.75s;
  cursor: grab;
}
.nav-items {
  margin-left: 330px;
}

/* hover is a pseudo class */
.nav-item:hover {
  color: #fa8eb2;
}

/* Working with the logo text, selecting it with id */
#nav-logo {
  display: inline-block;
  margin-top: 15px;
  padding-left: 20px;
  color: #3d3d3d;
  font-size: 30px;
}

.hero-part {
  margin-top: 100px;
  margin-left: 120px;
}

/* Selecting by ids */
#title {
  font-size: 50px;
  color: #ffffff;
  margin-left: -60px;
  text-align: center;
}

#body-title {
  font-size: 60px;
  color: #ff6c0a;
  cursor: crosshair;
}
/* color changes when hovers over CSS text */
#body-title:hover {
  color: #0000ff;
}
/* selecting the para by id */
#descp {
  font-size: 20px;
  margin-left: 100px;
  font-family: cursive;
  color: #ffffff;
}

---

Click here for all the code.

---

These are some of the basics of CSS, I would like to bring to your notice that no tutorial or video lecture in this world can teach you everything in CSS. Learning CSS is a ongoing process, and you will learn more with time and practice. I would recommend you to follow the below websites if you like to learn more

1. MDN -CSS
2. W3-Schools

Here are the cool VS CODE extensions name which you might like to use .

• Emmet
• Live Server
• Colorize

To pick desired colors from any website , you would require the extension below. Go to google extensions and download it.

• ColorZilla