This post is the first post of the "Fundamental of CSS" series. In this post, I will be covering -
- Introduction to CSS
- Why we should use CSS?
- CSS Syntax
- Ways to include CSS
- Setup you need to continue in this tutorial
- And finally, the "Hello World" program
Read this blog post or watch the video below to start with CSS.
What is CSS?
CSS stands for Cascading Style Sheets. CSS is the presentation layer of the web. It describes how the different HTML elements will be displayed. It can control multiple web pages look and feel from one central positions, thus saving a lot of work.
Why we should use CSS?
Here are the few advantages of using CSS.
Maintainability
CSS provides the consistency while creating the website. When a change is needed to your website let's say font color, button background color etc., you will do the changes in the CSS style sheet and the same changes will be reflected in your entire website, in every pages of the website. If you have a large website, then this simple feature will save you lot of time.
Performance
One way to improve speedy delivery of CSS is by using inlining. Inlining is nothing but inserting the some content of your CSS style sheet directly into the HTML documents. This is good when you are dealing with small resources. This approach cuts down the amount of bandwidth your browser needs to download before it can render the page.
Now the above trick is good when you are dealing with small amount of CSS. Browser will not cache the CSS, so for every future rendering of the page, browser will load the same CSS again from the scratch, which doesn't make much sense. That is why you will find many developers use the inlining only in the home page, but use external CSS is other pages. If you are thinking what is external CSS, don't worry. I will explain that as well very soon in this post.
Another way to solve the above problem is to load the CSS asynchronously, which is not possible natively. But using loadCSS.js you can asynchronously load the CSS content.
Appearance
CSS will allow to make your website stylish because it offers a wide array of expressive style capabilities. With CSS, you as a website developer has more authority to decide the look and feel of your website. CSS is that magic wand which you need while designing your website.
Search Engine Optimization (SEO)
The moment you incorporate CSS into your website design, you will find the search engines will find your website more easily. CSS's clear coding language makes it easier for search engines to understand the content of your website. By making your website search engine optimized, you will grow your audience.
Browser Compatibility
CSS will work with almost all the known browsers. Any browser compatibility issue is always taken very seriously and resolved as quickly as possible.
CSS Syntax
CSS syntax consists of two parts - selector and a declaration block.
Ways to include CSS
There are three ways to include CSS and here they are -
External Style Sheet
In the above code, helloWorld.css is the external stylesheet (a separate file) where all the CSS codes will be written and then this is the way to include that externals style sheet in the code.
Embedded Styles
You can also embed the style between style tags like shown above.
Inline Styles
You can also embed style right next to the selector. This is good for quick testing, but is not a best practice for production ready code. You should try to put all your styles in external style sheet and then add that in your code as shown in the first option.
Setup you need to continue
You basically need Visual Studio Code where we will be writing all the codes. Installing Visual Studio Code is very straight forward and you can read the installation instruction here .
Once Visual Studio Code is installed, you need to install one extension named "Live Server" from Marketplace and that's all. If you need help in installing this extensions, I have covered that in my video for this post. Video is added at the top of this post.
Hello World Program
Here is the very basic index.html and helloWorld.css.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="helloWorld.css"/>
</head>
<body>
<p>Hello World! - Welcome to Technical Potpourri</p>
</body>
</html>
helloWorld.css
p {
color: green;
text-align: center;
font-size: large;
}
As you can see from the above code, I have added the styling in helloWorld.css and then added the same into my index.html.
The code is basically adding the styles (mentioned in helloWorld.css) in all the p directives present in index.html.
With that here is the output:
Please provide your feedback / questions in the comment section. I will see you in the next tutorial soon where I will cover "Understand basic CSS Selectors and Specificity". Till then stay safe and keep learning.
0 Comments