css selectors classes pseudo elements

CSS(Cascading Style Sheets ) is an independent language and one of the most important building blocks of any website. Using CSS you give your websites entirely a different look and feel. You can manipulate the concepts like colors, fonts, and have a full control of the layout of HTML elements. Not only these properties but you can also do the following with the help of the CSS

You can customize your web applications to fit on different screen sizes. By different screen sizes I mean laptop , mobile, big TVs and even printers.
Apart from these you can also add animations, transitions, hover effect and much more using CSS.
HTML only gives us half the power to control our website where as CSS gives the other half and by using both of them you can make real world apps very easily.

If you are new to CSS and want to learn it, you can read my blog on CSS basics by clicking here.

In this article we will first take a look at the positions in CSS and then we will look at some of the pseudo selectors and how they work. All my code links will be given in this article for your reference.

Let's see how to provide positions to the CSS.

Please follow the below steps for making the learning process more effective.

Create a index.html file
Follow all the HTML code as it is shown in index.html file.(Incase you are new to HTML and want to learn it's basic. Please click here)
After this create a directory named CSS and inside it create style.css file
Then write the code shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Positions and Pseudo Selectors</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!-- This will help you understand about margins and paddings -->
    <div class="nav-bar">
      <h1 class="logo">Logo</h1>
      <ol class="list-items">
        <li class="list-item">Home</li>
        <li class="list-item">AboutUS</li>
        <li class="list-item">ContactUs</li>
        <li class="list-item">Services</li>
      </ol>
    </div>
    <hr class="green" />
    <!-- This will teach you about relative and absolute positions -->
    <div class="positions">
      <div class="circle red-c"></div>
      <div class="circle green-c"></div>
      <div class="circle blue-c"></div>
      <div class="circle yellow-c"></div>
    </div>
    <hr class="green" />
    <!-- This will help you learn relative and fixed position -->
    <div class="another-div">
      <div class="square red-square"></div>
      <div class="square blue-square"></div>
      <div class="square green-square"></div>
    </div>
  </body>
</html>

After this try this CSS code inside style.css file. I have also include a practice section for you. Following it will help you grasp this topic more effectively.

    * {
  margin: 0;
  padding: 0;
}

/* setting nav-bar height-width , background color and font color */
.nav-bar {
  height: 20vh;
  width: 100vw;
  background-color: #222222;
  color: #fff;
}

/* setting margin to logo text */
.logo {
  margin-left: 20px;
  padding-top: 40px;
}
/* setting our list items */
.list-items {
  margin-left: 300px;
  margin-top: -20px;
}
/* setting inline display and gap between each of them */
.list-item {
  display: inline;
  margin-right: 10px;
}

.green {
  background-color: green;
  border: none;
  height: 5px;
  margin-top: 20px;
}
/* Now lets learn positions */

/* Points to remember
1.Always set the parent position to relative
before setting the children position to fixed or absolute. */

/* setting parent position to relative */
.positions {
  margin: 20px 40px;
  border: 2px solid rgb(255, 35, 72);
  height: 200px;
  position: relative;
}

/* setting circle height width */
.circle {
  background-color: #000000;
  height: 50px;
  width: 50px;
  border-radius: 30px;
}

/* trying out position relative on this one */
.red-c {
  background-color: #ff0000;
  position: relative;
  top: 20px; /*moves 20px from top */
  left: 40px;
}
/* trying out position fixed on this one */

.green-c {
  background-color: #008000;
  position: fixed;
  bottom: 200px; /*moves from the body's boundary and stays fixed*/
  left: 60px;
}
/* trying out position absolute on this one */

.blue-c {
  background-color: #0000ff;
  position: absolute; /*Moves the element relative to its parent*/
  top: 80px;
  right: 100px;
}
/* trying out position relative and margin  on this one */

.yellow-c {
  background-color: #ffff00;
  position: relative;
  margin-left: 300px;
  top: 80px;
  right: 100px;
}

/* Try you code foe the other div part here */

.another-div {
  border: 2px solid rgb(98, 0, 255);
  margin: 40px 20px;
  height: 300px;
}

/* Include the classes give the color and try out positions */

So we saw mainly there are three positions that we used:

Relative
Fixed
Absolute

And then after this for moving the element we used 4 criteria

Top
Bottom
Left
Right

You can find the source code by clicking here

Now let us learn about the basics of pseudo selectors and how to use them.

Let us understand first what are pseudo-elements in CSS?
whenever you use a CSS selector , you have a choice of using the CSS pseudo selector with original selector by using colon(:). The color can single(:) for pseudo classes and double (::) for the pseudo selectors .

####Pseudo selectors syntax is like below

    selector-name :: pseudo-selector_name {
    property: value;
}

There are many pseudo elements in CSS. The most common are :-

::after (:after)
::before (:before)
::backdrop
::file-selector-button
::target-text

Working Demo of some of them

Please follow the below steps for making the learning process more effective.

Create a index.html file
Follow all the HTML code as it is shown in index.html file.(Incase you are new to HTML and want to learn it's basic. Please click here)
After this create a directory named CSS and inside it create style.css file
Then write the code shown below.

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS Psesudo Selectors</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="nav-section">
      <a href="#" class="circles">clickMe</a>
      <div class="circles-more"></div>
      <a href="#" class="circles">clickMe</a>
      <div class="circles-more"></div>
      <a href="#" class="circles">clickMe</a>
      <div class="circles-more"></div>
    </div>
  </body>
</html>

After this try to code the CSS file as shown

body {
  background-color: #4d4d4d;
  color: white;
}

.circles {
  color: #00ffff;
  text-decoration: none;
  margin: 40px 60px;
}

/* Before is used to add some content before the original element.You can also leave the content section empty */
.circles::before {
  content: "🔗";
  color: #ffc0cb;
}

/* After is used to add some content after the original element.You can also leave the content section empty */

.circles-more::after {
  content: "❓Hello There";
  color: #91f191;
}

Apart from these there are also psuedo classes and they are also used frequently.Some of the most used ones are:

:active
:any-link
:checked
:defined
:enabled
:disabled

I wont be showing you a working demo of pseudo classes in this blog. Feel free to explore about them from here

Thank you for reading this blog. Hope you enjoyed. Keep smiling :)

PureArt

PureArt

CSS Positions and Pseudo Selectors

#iwritecode #learncodeonline #fullstackjavascript #design

Table of contents

Now let us learn about the basics of pseudo selectors and how to use them.

Let us understand first what are pseudo-elements in CSS?

There are many pseudo elements in CSS. The most common are :-

Working Demo of some of them

Apart from these there are also psuedo classes and they are also used frequently.Some of the most used ones are: