CSS language is used to beautify any web page. CSS language is filled with style-based properties or commands. The actual meaning of CSS is Cascading Style Sheet.
Simple Introduction to CSS
CSS is the most is programming language. It is very important to learn CSS to become a front-end developer or back-end web developer.
With the help of CSS language, we can also give a heroe look to any web page. CSS language is mostly used with html languge. If you want to read more about then must visit our recent article What is HTML?
To use CSS language we just need to make a web page structure by using HTML programming language. With the help of CSS, we can style the web page.
If you are a fresher in the era of programming and want to learn any programming language. Before learning any programming language, you just need to learn CSS language because it helps to style any web page.
Before starting learning CSS, you should need to learn What is CSS? So in this article, I will describe to you what is CSS. Along with this, I will tell you How to Implement CSS into HTML?
What is CSS?
The full form of CSS is Cascading Style Sheet. Cascading Style Sheet is a style-based language. It is filled with style-based properties.
CSS language is used to style the web page that is created with the help of HTML programming language. We need to implement CSS code into our HTML code to beautify our web page.
We can beautify a web page by applying CSS in HTML in three ways. Below is a list of three ways of applying CSS in html.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
In this way of applying CSS CSS in HTML, we imp, want any CSS properties inside the HTML tag itself. In this method of CSS implementation we write uoto five CSS properties in any html tag.
This method of implementation of CSS is very rarely used because with this method of implementation, our html code is not readable and the look of the html structure is not good. Also, by using this method it is very difficult to make web pages responsive.
Below is an example of writing inline CSS in HTML code:
<p style="font-size: 36px; color: red;">Inline CSS(CodingPea)</p>
Internal CSS
In this method of CSS implementation into HTML code, we apply the CSS code inside the HTML page but in a separate tag.
We write properties of CSS code inside the style tag. The style tag is usually written between the head tag of html language. Below is a code example of internal CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
font-size: 36px;
color: red;
}
</style>
</head>
<body>
<p>Inline CSS(CodingPea)</p>
</body>
</html>
External CSS
External CSS as its name implies a separate CSS code. In this CSS implemented method, we create a separate CSS file and link this file inside the html page.
To link the external file we use the html link tag to connect the CSS file to the html. It is the best method to style any html tag.
These days most developers keep any CSS code in a separate file. In this method of css implementation, the HTML code remains short and readable. By using this method it is very easy to make a web page responsive.
How to connect external CSS files to HTML?
To connect any external css file in html we have a html link tag. With the help of a link tag, we can connect any external CSS to HTML. In this link tag, we just have to write the path of the external css. Below is a link that connects the external CSS file to HTML.
<link rel="stylesheet" href="filename.css">
How to make an external CSS file?
Just like we like to create an HTML file, the same way a CSS file is created. The only difference is that every HTML file has an extension .html and CSS file has an extension .css.
Right-click on the mouse where you want to create the CSS file >> Click on the new dropdown >> Click text document with .css extension i.e. filename.css.
Post a Comment