What is CSS? How can I use it? Do I need to learn it? What is the function of it?

What is CSS?

This hub is an answer to a question which I found at hubpages in the category 'HTML & CSS'. It was asked by user shreekrishna on hubpages, but I think that there are many people asking these same questions. That's why I decided to create this hub to answer the question.

The question:

what is css ? how can i use it ? did i need to learn it to use ? what is the function of it?


The question asked here are actually four questions. And to each question there is a long answer and a short one. I'll start with the short answers:

What is CSS?

CSS is an addition to HTML. It is used in the first place to take care of the design, the 'style', the look and feel of your web page.

How can I use it?

CSS is always used together with HTML. You create your web page as a normal HTML file and then you can optionally add CSS to design your page. You can also just use plain HTML to design your webpage.

Do I need to learn it?

If you want to become a professional webdesigner you will have to learn CSS sooner or later. But don't worry! If you are just starting to create websites, you can start with using just HTML. CSS has a lot of advantages, but when you are just starting, you don't need all those advantages yet. At the time when you will start to become more comfortable with HTML, you will also start to understand where CSS comes in handy and where you could use it. And when you understand where CSS will help you, it will also become easier for you to learn it.

What is the function of it?

The main function of CSS is to separate design from content. The basic idea is that HTML is used to define the content and that CSS is used to design the content. The content of the webpage can for example be a story. This story is written in plain text. The way this story is displayed, in which font, in which colors, in which area on the page, with lines around it, with empty space around it, all these kind of things can be designed with CSS. You can even create different designs for the same text. For example one design to view the text on a screen and another design for when the page is printed out. The story, the words, the plain text, is always the same. This is the 'content', which is included in the HTML file. The way it looks is the design, which can be created with CSS, but doesn't have to be created with CSS.

And the longer answers

Below are longer, more extensive answers to the same questions. The answers do not give you an explaination on how to create CSS. I will try to write a hub about that some time in the future.

The answers to the questions should give you a basic idea of what CSS is supposed to do and where it can help you in the process of creating your website. If something is still unclear do not hesitate to ask more questions in the comments at the end of this page.

What is CSS?

CSS stands for Cascading Style Sheets. The home of CSS can be found at the website of the World Wide Web Consortium: http://www.w3.org/Style/CSS/ This page also has a lot of links to tutorials, definitions and background information.

CSS was introduced to create a simple system to add 'style' to a web page. 'Style' in the beginning meant fonts, colors and spacing. But this has grown to a complete design of the whole web page. Cascading means that different styles can be applied to the same page and that, for example, the viewer can apply personal styles to view a page, for example to improve the readability of a page (change the size and color of the font).

With CSS it is also possible to create different layouts ('styles') for the same page. For example, it is possible to create a basic style for a page when the page is viewed online as a website and a different style for the same page when the page is printed out on paper and again a different style for the same page when the page is viewed on a mobile phone. The website itself will pick the right style to display the page, depending on where the page should be displayed.

My first webpage

If you want to use CSS you will first need a good understanding of the HTML language. HTML (HyperText Markup Language) is the language to create websites. The tutorial 'My first webpage' is an introduction to HTML and gives a basic explaination on how to use HTML to create a web page.

>> My first webpage - an introduction to HTML

How can I use CSS?

CSS is always used in combination with HTML. There are different ways how you can use CSS.

The first possibility how to use CSS is to insert the CSS code exactly on the position within your HTML code where you need it. For example, if you want to remove the line under a link, you can add the CSS code to remove the underline within the HTML command. You can add the CSS code inside the <a href .... > command. In this way the CSS code will only remove the line under this one link.

You can also place the CSS code in the 'head' of your HTML document. This means that you will write the CSS code after the <head> command and before the </head> command. If you put the CSS code in the 'head', it will affect all the links on the page, so it will remove the underline under each link on that page.

Another option is to write the CSS code in a separate file. This file can then be included in your HTML document. You can write the same CSS code in the separate file, as the CSS code which you would write in the 'head' of your HTML document. Instead of adding the code to the 'head' of the HTML document, you just include a link to the file with the CSS code. You can include this same file with CSS code in as many different HTML documents as you like. The advantage of this is that you can include the same CSS code in many different HTML pages. If you specify in the separate file with CSS code that the underline under a link should be removed, the line will be removed under each link on each page where the file with the CSS code is included.

With this last option you can make changes in the design to a lot of pages with just one file with CSS code. If you want to change something to the design, you just need to edit one file with CSS code. You will not need to edit each HTML file.

You can also combine these three ways of using CSS. You can write a separate file with the general CSS code for all the pages of your website. Then you can add specific CSS code on certain pages in the 'head' of these HTML documents. And for very specific details, which occur just once on a certain page, you can add the CSS code directly in the HTML command on that page. It is recommended however, to keep your CSS as much as possible in one place, so it will be easier for you to keep the overview of the layout and design of your website.

Do I need to learn CSS?

If you want to use CSS to design your website you will need to learn it.

But don't worry if you are just starting to learn HTML. You can also design a website without using CSS. CSS has a lot of advantages, but when you are just starting, you don't need all these advantages yet. At the time when you will start to become more familiar with HTML, you will also start to understand where CSS comes in handy and where you could use it. When you understand where CSS will help you in your design, it will also become easier to learn it.

When it comes to the design of your website, CSS has a lot more possibilities than plain HTML. If you want to become a serious webdesigner you will have to learn CSS sooner or later. But it is important that you first fully understand the HTML language and especially that you understand the shortages and restrictions of HTML. The right moment to start learning CSS is the moment where you want to do something which is 'just not possible' in HTML. These things, which are impossible to do with HTML, might be easy to do with CSS. For example, to remove the line under a link or to make a link change color when the mouse moves over it, is impossible to make with HTML, but is just one line of code with CSS. These are typical examples of something CSS can do, which good old HTML cannot do. The basic link however, is always created with the HTML command <a href ... >. Only the way it looks, the design of the link, can be changed with CSS.


What is the function of CSS?

The main function of CSS is to separate design from content.

This might sound very abstract in the beginning. An easy way to understand this, is to think about a daily newspaper. The newspaper looks the same every day. The titles, the shapes and positions of the articles, the fonts, the colors, the lines, the sizes, all these things usually look the same in every issue of the newspaper. What changes is the content (the text of the articles) and the content of the photos, what you can see on the photo (but not necessarily the size of the photo). In other words, the design, the layout of the newspaper is always the same, the content of the newspaper is different every day.

CSS works the same way. CSS is used to create the layout of the website. With CSS you can define the look of your website, which fonts are used, which sizes, which colors. You can define the look of different sections on your website, add lines between paragraphs, add lines around photos, add whitespace around texts and photos, just about anything you want for your design. With CSS you can define all the details of the layout of the page. And you can define the same layout for each page of your website. You can define the layout just once and all the pages within your website will follow the same layout. The only thing which is different is the content of each page, the stories which are written, but not the way the pages with these stories look. When you add a new page, it will automatically have the same look as the other pages. You just need to write the content for the new page, but you don't need to worry about the design of the new page.

You can also use HTML to design your pages, but then you need to design each and every page individually. If you have just a few pages, this is not such a big problem. But when you are publishing new articles every day, CSS will save you a lot of time and work.


CSS examples

Here are two examples of the use of CSS: the templates for your blog and the CSS Zen Garden. If you have any CSS examples, which you think would fit here, you can leave a comment below. If you still have questions about CSS after reading this hub, feel free to also leave a comment. I cannot promise that I will answer all questions, but I will do my best. For now, happy website making!

CSS Zen Garden

A beautiful example of what CSS can do is the CSS Zen Garden. This website shows the same HTML file with many different CSS layouts. Users can upload their own CSS design for the same HTML page, which can be downloaded from the website.

Just click through the links on the website to get an impression of the many different variations which are possible with CSS. The content of the page (the text with its subtitles and links) is always the same. The look and feel of the page are completely different with every different CSS example of the CSS Zen Garden.

>> http://www.csszengarden.com/

CSS and your blog

If you have a blog, for example at blogger, you usually have the possibility to select a template for your blog. This template is really just a file with a lot of CSS code. In this file the layout is defined with a lot of very complicated CSS code. You can usually click through the different templates and see what you blog looks like with the different designs.

Each of these templates is a different file with CSS code, which will define the look and feel (the design, the style) of your blog. The content of your blog, the articles which you have written, the dates, the titles, the keywords, etc., stay the same. Only the way how your blog articles are displayed is different with every template. This is a good example of how CSS is used.

More by this Author


6 comments

WannaB Writer profile image

WannaB Writer 5 years ago from Templeton, CA

Fro some reason, this CSS thing freaks me out, and I do need to learn it - at least some of it. my problem is I don't want all my pages laid out the same way. I don't mind setting the font and size, as long as I can still change the size of that font in headers, etc. I also would like to be able to change colors on some words to make sure they are seen. I used to use FrontPage to design my site, but now I have to use Expression Web, which utilizes CSS for color instead of HTML. I also need to use CSS to set page layouts so I can put several affiliate images in a row or to the right or left of text I create. i'm totally lost and intimidated by the Dummies book I bought on this. Guess I'm psyched out before I start reading. I used to use table to separate the images, but now I guess that's a no-no.


cym profile image

cym 5 years ago from Europe Author

Hello WannaB Writer

I can totally understand your confusion. And I can tell you, I know CSS pretty well by now, but I still prefer to use HTML tables instead. Especially to put several images in a row or to the right or left of text, HTML tables are still the best...

If you use a program for webdesign, such as Dreamweaver, color-codes are now automatically translated into CSS style-sheets. But you can still edit the HTML code by hand and change the colors back to the old HTML commands to define the color. Even I still do that sometimes...

So, in my opinion and experience, tables are still a yes-yes... And please don't let yourself get psyched out. I have come across many 'Books for Dummies' that will just make you totally lost and even more confused than before you started reading the book...

I can't help you here to solve the CSS-problems, but at least I hope it will stop you to freak out. Simply switch to 'editing the HTML by hand' in your web design program and keep using these good old HTML commands if that solves the problem for you.


WannaB Writer profile image

WannaB Writer 5 years ago from Templeton, CA

Thanks, Cym. I'm less freaked out than I was, and I'm starting to understand a bit more.


aesta1 profile image

aesta1 23 months ago from Ontario, Canada

Your article gave me the courage to address learning CSS. I just saw my site health go down because of the errors. It is so cluttered and the errors I discovered in the CSS reviewer were several pages. So, I started browsing and your article really impressed me. I will check out the other sites you recommended as well as there is only forward for me in this learning CSS route.


Rota profile image

Rota 20 months ago

interesting simple rundown of the questions. thank you. i am a beginner with all this and am slowly learning the jargon etc.


Easy Exercise profile image

Easy Exercise 18 months ago from United States

I just started crafting my own website and wondered about this. Thank you very much! Very simple explanations. Voted up!

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working