Hello reader, in this article, we will discuss one of the basic technology that is required in order to do web development, i.e. CSS, its types, usage, uses, etc.
Contents
What is CSS?
CSS stands for Cascading Style Sheet. CSS is one of the best basic front-end technology. HTML is the first thing that a web developer should learn and the second thing that a web developer should learn is CSS. With CSS you can set elements, where to align them, what should be their design, etc. With the help of CSS, you can do absolutely anything, from different types of Typography to even animations. CSS is one of the basic requirements for web development that helps us to design the user interfaces and enhance the user experience. There are different versions of CSS, the latest one is CSS3. There are three different types of CSS. They are as follows:
- In-line CSS
- Internal CSS
- External CSS
The syntax of writing CSS is the same in all three types but the way of implementation is different in all three.
In-line CSS
In-line CSS is the type of CSS in which we can write the CSS code inside the HTML tag itself as an attribute of the tag. In-line CSS nowadays is not considered to be a good way of implementing CSS in real-world projects. In-line CSS can be useful to do some simple tweaks in design but if we need to design some complex stuff then in-line CSS is definitely not the right choice.
How to write in-line CSS?
If you want to write in-line CSS your HTML document should look something like the example shown below.
<div style="color: blue">The font color is blue.</div>
If you want to implement more CSS properties then your code should look like the following.
<div style="color: blue; font-size: 30px">The font color is blue.</div>
You can add as many CSS properties as you can but when you have too many then it will be really hard to maintain, hence in-line CSS is less preferable among web developers.
Internal CSS
Internal CSS is a slightly better way to implement CSS in your project. With Internal CSS you can place your CSS code into the head section of the HTML document wrapped around a
How to write internal CSS?
If you want to implement the internal CSS in your document, then your document should look something like the below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
div{
font-size: 30px;
background: palegreen;
color: aliceblue;
}
</style>
</head>
<body>
<div>This is a text.</div>
</body>
</html>
You can write CSS in the above way, but also you would definitely want to use class and id selectors, so in order to do that your document should look like below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
div{
font-size: 30px;
background: palegreen;
color: aliceblue;
}
.para{
color: royalblue;
}
#para{
color: rebeccapurple;
}
</style>
</head>
<body>
<div>This is a text.</div>
<div class="para">This is a class para.</div>
<div id="para">This is a id para.</div>
</body>
</html>In CSS, you use # to target an ID and . to target a class.
External CSS
External CSS is the type of CSS that is preferable for medium to larger projects as everything is structured in different files and folders. External CSS is all same as internal CSS but the only difference is that instead of writing CSS on the
How to write external CSS?
If you want to write external CSS you will have two files i.e. index.html and style.css. index.html will contain all your markups and style.css will contain all your styling. In order to use external CSS, your HTML document should look something like the follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>This is a text.</div>
<div class="para">This is a class para.</div>
<div id="para">This is a id para.</div>
</body>
</html>
Note that you will give the path of style.css in the href attribute. Now, your style.css should look something like the following:
div {
font-size: 30px;
background: palegreen;
color: aliceblue;
}
.para {
color: royalblue;
}
#para {
color: rebeccapurple;
}
You can clearly observe that both Internal and External CSS are the same but the only difference is that in internal CSS you work on a single document and in External CSS you work on different documents.
How to learn CSS easily?
If you want to learn CSS then you can explore a lot of resources online as well as offline. You can even watch courses on youtube, udemy, etc. And also if you can learn through text materials then one of the best places to learn can be W3Schools. Learning CSS is fundamental to web development. Since CSS is not a hard language that requires high mathematical background, everyone can learn CSS and create an awesome website. If you give your time and effort then you can easily learn CSS in less than 2 to 3 months. If you have a laptop or a computer then you can always use different tools like VS Code, Sublime Text, etc. but if you don’t have one then you can always use our codepen to learn basic web development on any of your devices whether it’s a smartphone, tablet, laptop or a computer.
