CSS stands for Cascading Style Sheets, it’s a style sheet language that we use to describe the appearance of the web page colors, layout, fonts and many more. To be short, It’s all about how your web pages looks like.
Without CSS vs With CSS
Basically, the HTML and CSS are totally a different thing and they work together as you can see from the picture below. The picture on the left hand side is mixed with HTML and CSS, however the picture on the right-hand side are only HTML. Like I mentioned, the CSS is about how your web pages looks like and the HTML are all about creating content blocks, structuring and displaying the content in the web page.
Adding CSS to Your HTML Document
There are three ways to add CSS style to your HTML web pages which is inline CSS, internal CSS and external CSS. There are difference advantages and disadvantages of each method and we will put in into difference use case.
Inline CSS
Inline styles are directly applied to the particular HTML element. It’s good for quick changes of a specific HTML element in current web pages. However, it’s the least CSS styles coverage than external and internal style sheets because the CSS styles will only apply to a specific HTML element.
<h1 style="color: pink;">Jorcus.com</h1>Internal CSS
The internal CSS styles are placed at the <head> section of the HTML file. This method is good when you want to apply the CSS styles to that page and you can configure CSS style to the entire HTML tag elements, CSS Classes and IDs to the current web page. If you change the CSS style of that specific tag, it will apply the change to the entire page.
<head>
<style>
h1 {
color: red;
margin-left: 25px;
}
p {
color: blue;
}
</style>
</head>External CSS
The external style sheet is a standalone .css file that we stored all the CSS rules inside of it. To use that CSS rules, we will link it to the web page at the <head> section. The best thing of using external CSS is we can create it once and applied all it to multiple web pages. A single change of the .css file will applied to all the linked pages. Using external CSS style sheet will save your time and effort if you want to change the styles for all the linked pages at once.
<link href="style.css" rel="stylesheet" type="text/css">