Introduction
CSS is an acronym for Cascading Style Sheets. It is a language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages attractive to the users.
CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. Now let’s try to break the acronym:
• Cascading: Falling of Styles
•Style: Adding designs/Styling our HTML tags
•Sheets: Writing our style in different documents
CSS Editors
Some of the popular editors that are best suited to write CSS code are as following:
•Atom •Visual Studio Code •Espresso(For Mac OS User) •Notepad++(Great for HTML & CSS) •Komodo Edit (Simple) •Sublime Text (Best Editor)
Ways To write CSS
There are 3 ways to write CSS in our HTML file. Inline CSS Internal CSS External CSS Priority order Inline > Internal > External Inline CSS
Before CSS this was the only way to apply styles •Not an efficient way to write as it has a lot of redundancy •Self-contained •Uniquely applied on each element •The idea of separation of concerns was lost
•The Inline Syntax
<h3 style="color:red”> Hello </h3>
< p style ="color: green”> I am happy </p>
•The Internal CSS
With the help of the <style> tag, we can apply styles within the HTML file
• Redundancy is removed
•But the idea of separation of concerns still lost
•Uniquely applied on a single document
•Example:
```< style>
h1{
color:red;
}
</style>
<h3> I am happy</h3>```
• The External CSS
With the help of <link> tag in the head tag, we can apply styles
Reference is added
File saved with .css extension
Redundancy is removed
The idea of separation of concerns is maintained
Uniquely applied to each document
Example:
<link rel="stylesheet" href="name of the Css file">
</head>
h1{
color:red;
//.css file
}
Use of all the three selectors in CSS:
< !DOCTYPE html>
< html>
< head>
<title>HTML</title>
< link rel="stylesheet" type="text/css" href="first.css">
< style>
center1 {
text-align: center;
color:pink;
}
center2 {
text-align: center;
color:red;
}
h1
{
text-align:center;
color:green;}
< /style>
< /head>
< body>
< h1>This heading will be green and center-aligned </h1>
< p class = "center2">This paragraph will be red and center-aligned </p>
< p id ="center1">This paragraph will be pink and center-aligned</p>
< /body>
< /html>
CSS Colors
There are different colors in CSS The widely used techniques are as follows RGB This starts with RGB and takes 3 parameter 3 parameter basically corresponds to red, green and blue The value of each parameter may vary from 0 to 255. Eg: RGB(255,0,0); means color red HEX Hex code starts with # and comprises of 6 numbers which are further divided into 3 sets Sets basically correspond to Red, Green, and Blue Single set value can vary from 00 to 09 and AA to FF Eg: #ff0000 ; means color red RGBA This starts with RGB and takes 4 parameter 4 parameter basically corresponds to red, green, blue and alpha Value of the first three parameters may vary from 0 to 255 and the last parameter ranges from 0 to 1 that is from 0.1, 0.2,…..0.9 Eg: RGB(255,0,0,0); means color red Implementation of different types of colours in CSS:
<!DOCTYPE html>
< html>
< head>
< title>HTML</title>
< link rel="stylesheet" type="text/css" href="first.css">
< style>
center{ color:#ff0099;}
h1 { color:rgba(255,0,0,0.5);}
< /style>
< /head>
< body>
< h1>This heading will be green</h1>
< p style="color:rgb(255,0,0)">This paragraph will be red</p>
< p id="center">This paragraph will be pink and center-aligned</p>
< /body>
< /html>
Conclusion
In this article you've learned just a tip of CSS. You want to no more about CSS Just stay tuned to my blog!