ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on June 9, 2016

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.

Comments

    0 of 8192 characters used
    Post Comment

    • Easy Exercise profile image

      Kelly A Burnett 

      3 years ago from United States

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

    • Rota profile image

      Rota 

      3 years ago

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

    • aesta1 profile image

      Mary Norton 

      4 years 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.

    • WannaB Writer profile image

      Barbara Radisavljevic 

      7 years ago from Templeton, CA

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

    • cym profile imageAUTHOR

      cym 

      7 years ago from Europe

      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

      Barbara Radisavljevic 

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

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)