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

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.

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.

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.

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

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.

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.

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.

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!

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/

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.