Web Development

Beginner’s Guide to CSS

Beginners guide to css
Written by Sandeep Likhar

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;
}
[/code]

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
*/
[/code]

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.

WHAT’S NEXT?

Let’s look at Types of CSS Selectors

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

2 Comments on "Beginner’s Guide to CSS"

Notify of
avatar
Sort by:   newest | oldest | most voted
Tracy Whitehead
Guest

It’s really a nice and helpful piece of info. I’m happy that you just shared this helpful info with us.

Please keep us up to date like this. Thank you for sharing.

Timmy Fairfax
Guest

I pay a quick visit everyday a few blogs and information sites
to read posts, but this web site offers quality based content.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW