Ankur SinghIntroduction
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>
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>
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>
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>
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>
styles.css
h1 {
color: red;
}
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>
styles.css
h1 {
color: red;
}
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>
styles.css
.heading {
color: red;
}
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>
styles.css
.heading {
color: red;
}
#main-heading{
color: blue;
}
Note:
- 🤨 A HTML element must NOT have different - different
IDnames. The id name MUST be unique for the different elements - In the example, you will observe the final colour will be
bluebecause the priority of theid selectoris high than theclass 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
