DEV Community

Cover image for Brush up your CSS knowledge 🚀 Part[1 of 2]
Ankur Singh
Ankur Singh

Posted on

Brush up your CSS knowledge 🚀 Part[1 of 2]

#webdev #beginners #html #css

Introduction

Welcome 👋 to this blog. This blog is for beginners who just started the web development journey or professionals who just wanted to revise their CSS knowledge. We will learn the essential of CSS. Let's get started 🚀. One more thing for this blog I have created a website which helps me for the demonstration purpose.

CSS

CSS stands for the Cascading Style Sheets, which help us to style our website. for example background colour, font color, font size etc.

How to add CSS to our website?

We have three options here

  • Inline CSS
  • Internal CSS
  • External CSS

Let's time to take a look at each of these.

Inline CSS

This is the CSS that is applied to the particular HTML element with the help of HTML attributes. If you are not familiar with these terms I highly recommend you to read my previous blog 🤠.

Let's time to look at the code.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <h1 style="color: red;">Hello world</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You notice how we are using the style attribute in the h1 element to change the font colour to red.

You look at the website I created for the demonstration before this code e.g. inline style and after the style.
Before style
After style

Internal CSS

Internal CSS is the CSS that is written inside the <style>...</style> tags.
Note: You MUST include the style inside the head tag. for example

  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
Enter fullscreen mode Exit fullscreen mode

Let's time to look the full code.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can look at the live website here. You will see there is no difference between this live website and the previous one. Because we are doing the same thing but in a different manner.

Note: Here we are using h1{//code } this is the tag selector which is selecting h1 HTML element or tag. We will cover more later in this blog.

External CSS

The name is self-explanatory. In this method, we are creating a separate CSS file for example styles.css and write the CSS code and link the HTML file to the CSS file and everything works fine.

We can link the external CSS file to the HTML like this.

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
Enter fullscreen mode Exit fullscreen mode

Let's time to view the code

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

styles.css

h1 {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Live website

Note: 🤨 index.html and styles.css must be in the same file hierarchy level.

Time to look at CSS selectors

We are covering the most commonly used selectors in CSS. If you want to learn more click here

  • Element Selector
  • Class Selector
  • ID Selector

We are writing all the code below in the styles.css file .😇

Element Selector

This selector helps us to select the HTML element simply by using the element or tag name.
for example
index.html

<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

styles.css

h1 {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Live website

This CSS code is selecting the h1 element.

Class Selector

The class selector is used to select the element by its class name. In the element we have to define a attribute named class and in the CSS file we have to select the class name by . for example .heading.

Note: 🤨 A HTML element may have different - different class names

index.html

<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 class="heading">Hello world</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

styles.css

.heading {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Live website

ID Selector

Same as the class selector the id selector selects the element by its id name and in the CSS file we have to select the id name by # for example #main-heading.

index.html

<html>
  <head>
    <title>Hello world</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 class="heading" id="main-heading">Hello world</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

styles.css

.heading {
    color: red;
}

#main-heading{
   color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Live website

Note:

  • 🤨 A HTML element must NOT have different - different ID names. The id name MUST be unique for the different elements
  • In the example, you will observe the final colour will be blue because the priority of the id selector is high than the class selector.

You got it 🤩

You revised a lot of fundamentals for the CSS. Thanks for reading till the end. If you have any feedback, the comment section is yours.

Till then let's grow together.
Code

Contact me: ankursingh91002@gmail.com
LinkedIn
Twitter

Top comments (0)

Read next

yrizos profile image

Installing Rust on macOS with Homebrew

Yannis Rizos -

chintanonweb profile image

Step-by-Step Guide to Using React Components as Props Like a Pro

chintanonweb -

codewith_ili profile image

How to Run MongoDB in Docker

Ili Aliaj -

visdom_04_88f1c6e8a47fe74 profile image

Agentic Mesh: Pioneering the Future of Autonomous Agent Ecosystems

VISDOM 04 -