Beginner’s Guide to CSS

Welcome to Beginner’s Guide to CSS. Before going through this tutorial, you have to have the basic understanding of using HTML. You can learn HTML by going through our Beginner’s Guide to HTML tutorial.

In this tutorial you are learning about CSS from the beginning. So what is CSS?

CSS stands for Cascading Style Sheets. It was added to HTML in the version HTML 4.0 to define how to display HTML elements more nicely.

Why CSS?

In the version HTML 3.2, few of attributes and tags were introduced to HTML to facilitate font and color options. But developers started to feel it becomes a long and expensive process as those information were needed to add on every single page. When the website is getting larger and larger, adding font and color information was a nightmare for developers.

And that’s why W3C created CSS to solve this problem. From the version of HTML 4.0, HTML’s purpose is to define the content and structure the text of the web page only. CSS do all the other colorful work. So now all the browsers support CSS.

CSS defines how the HTML elements needed to be displayed. External style sheet files can be saved with .css extension. It enables you to have different layouts and appearances of all the pages in a web site by just editing a one single CSS file.

CSS Syntax

h1 { color: blue; font-size: 18px; }
Selector Property Value Property Value
Declaration Declaration
Declaration Block

Selector : Points to the HTML element you want to style.

Declaration Block : Contains one or more declarations separated by semicolons. Surrounded by curly braces

Declaration : Includes a property name and a value, separated by a colon. Always ends with a semicolon.

Look at the following example.

[code language=”css”] p {
color: red;
text-align: center;

Hi! Wellcome to Beginner’s Guide CSS

CSS Comments

Comments are used to explain what you are written on the code. So any other developer who look at the code may understand with a simple glance at the comment what you have written in the code without going through the entire code. Also it may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment starts with /* and ends with */ and can span multiple lines.

[code language=”css”] /* This is a single-line comment ignored by the browser */
p {
color: red;
text-align: center;
This is
a multi-line
comment ignored by the broswer

So in this section we put our first step of learning CSS. There is a long way to go. So keep reading on, we can do lot of stuff using CSS. In the next section we’re going to do look more about different types of selectors.


Let’s look at Types of CSS Selectors

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


Leave a Reply

Comment Below