CSS Introduction & Setup - Part 1 of Fundamental CSS Tutorial

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 learn about the advanced selectors.

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.

In the above code, p is the selector and rest is the declaration block. Inside the declaration block, color is the property and green is the value.

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 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:

Source Code: https://github.com/suddeb/CSS-Basics/tree/master/Lesson1

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.

CSS Introduction & Setup – Part 1 of Fundamental CSS Tutorial

What is CSS?