How to Learn CSS

CSS, short for Cascading Style Sheet, is a type of language used to change the style of websites, blogs, MySpace profiles, and other similar sites. It is use in conjunction with HTML to transform standard black-on-white webpages into the websites you visit all over the internet. And while it's used to create some very intricate layouts, it's not very hard to learn CSS. Read on to see how to learn CSS, so you can get started designing your own blog, MySpace profile, or any type website:

Note: All codes in this article can be copy and pasted into any website or profile to make it quick and easy to get started with CSS.

If you are new to CSS and HTML, you may want to start by reading “How to Learn HTML” and “How to Use HTML,” below:

Difficulty: Moderately Challenging

Instructions

1. How It Works
   
   CSS is a special language that tells web browsers, like Internet Explorer or Firefox, what to do. When you view a website, the browser “reads” the code like a command, and displays the style that you see. The language is comprised of many different elements that you can use to create and endless amount of styles and layouts. These elements are called attributes, and each attribute has a plain English term as a name. This makes it very easy to remember what each attribute is and what it does.
   
   CSS code has to be contained between tags, called opening and closing tags, that tell a browser when to start reading CSS and when to stop. Any code that isn't contained in the appropriate tags will not be read, and won't be displayed.

2. Creating a Stylesheet
   
   CSS code has to be contained between tags, called opening and closing tags, that tell a browser when to start reading CSS and when to stop. These tags and any code between them is collectively called an “internal stylesheet.” Any code that isn't contained in your stylesheet will not be read, and won't be displayed:
   
   <*style type="text/css">
   
   <*/style>
   
   (For these tags to work, you must remove the * symbol at the beginning of each tag)
   
   Your stylesheet should go in the your website's header, usually right below your meta tags. This ensures the attributes are applied to the entire webpage.

3. Adding Attributes to a Stylesheet
   
   Once you have your opening and closing tags ready to go, it's time to add some attributes. To start, you need to define what part of your webpage you want your attributes applied to. You should begin by defining the entire page, which is called the “body:”
   
   <*style type="text/css">
   
   body {
   }
   
   <*/style>
   
   Just like with your stylesheet, you need to denote the beginning and the end of the code for the body of your webpage or profile. To do this, you need to use curly brackets: { } Anything between these curly brackets will be applied to the body of your webpage.
   
   Next, you need to add attributes to in between the curly brackets. To start, we'll define what we want our text to look like, using font attributes:
   
   <*style type="text/css">
   
   body {
   color: #0080FF;
   font-size: 10px;
   font-family: Verdana;
   }
   
   <*/style>
   
   The three attributes in the example are “color,” “font-size,” and “font-family.” This defines the color of your text, the size (in points) of your text, and the font face to use for your text, respectively.
   
   Notice how after each attribute is defined, there is a semi-color (;). This is how you separate attributes in CSS. Without a semi-colon at the end, the attributes will be ignored.
   
   You can define dozens of different attributes in your stylesheet, the most popular of which are listed further down in this article.