CSS

After awhile of going back and re-reading the previous CSS tutorials, I realized there was some flaws here and there and some things that should have been covered earlier but were not. So we’re going to start anew with a whole new CSS series that contains CSS2.1, CSS3 and HTML5 (including various hacks for webkit-based browsers, IE, FF, and Opera). Shall we begin?

This tutorial is the absolute basics of CSS and aimed at those that would like to learn about CSS but already have an understanding of HTML.

CSS isn’t a web markup language like HTML, XHTML, MathML and so on. CSS is a Cascading Style Sheet and is the backbone for styling web pages. CSS assumes that are you already have prior knowledge of HTML and understand how HTML works so it is critical that an understanding of HTML is present.

What and Why CSS?

Perhaps one might find themselves asking, “what is CSS and why do we need it?” The answer lies in technology. Perhaps you have made a website before using tables in HTML. Yes, this works but it is, however, deprecated (meaning it’s not generally practiced any more). Websites composed of HTML tables are a thing of the past because we now have rich client-side applications and complex server-side applications acting as blogging software, content management systems and online stores. Without CSS, these applications would be extremely difficult to update and maintain.

How to CSS?

Luckily for us, CSS is pretty straight forward and easy to learn! Let us get started with the basics!

CSS has the following structure:

1
2
3
4
5
6
7
8
9

selector {property:value;} single-line statement
selector {                  multi-line statement
     property:value;
     property:value;
}

Both examples follow the same general format. We have our selector, property and value.

• Selector – Is the part of the CSS that is used to specify what to style
• Property – Is the part of the CSS that states which method should be used to style the Selector
• Value – Is the part of the CSS that states how much to style or how specifically to style the Selector

Selectors

Selectors can have three different basic forms:

• HTML (Type) Selectors – “Global” Styles that apply to specific HTML elements
• Class Selectors – Can be used multiple times on a web page
• ID Selectors – Mostly used to indicate major sections of a web page

Note: Neither the Class or ID selector can start with a number or a special character, A-Z,a-z only for the first character!

1
2
3
4
5
6
7
8
9
10
11
12

.1bad-selector {property:value;}
.!bad-selector {property:value;}
.good-selector {property:value;}

#1bad-selector {property:value;}
#!bad-selector {property:value;}
#good-selector {property:value;}

HTML selectors, otherwise known as by Type selectors, are literally just HTML tags without angled brackets. For example,

1
2
3
4
5
6
7

a {
     color:#ff9300; Controls color of anchor element
    text-decoration:underline; controls how the text appears for the anchor
}

“a” represents it html tag to style, that is, <a href=”#”>Link</a> e.g. This is a link.

That link entitled, “This is a link” has two different properties that are controlling the behavior of the link. One property is controlling the color and a separate property is controlling how the text appears. For example:

We have a link here. The code that makes this link work is like the following CSS:

1
2
3
4
5
6
7

a {
     color:#0071BB;
     text-decoration:unerline;
}

We have our color (color:#0071BB) and we have the underline (text-decoration:unerline;).

We are choosing to type the a tag. We are changing the default color of the anchor and we are changing how the anchor will appear on a page by adding an underline to the anchor.

A breakdown of this would reveal the following relationship: Selector > Property > Value
The selector relies on the property and value to change how the selector will look.

Another example using HTML selectors would be the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

ul {
     list-style-type:disc;
     padding-left:20px;
}

ul li {
     float:left;
     margin-left:10px;
}

ul li a {
     padding:5px 10px;
     background-color:black;
     color:white;
}

The CSS above styles the HTML below:

1
2
3
4
5
6
7
8
9

<ul>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 1</a></li>
</ul>

Although this example is a little longer and contains more code, there is still the relationship between the selectors, properties, and values. We still are choosing which HTML elements to style and we are using properties and values to style them.

Class Selectors

Class selectors are different than HTML selectors. We can use class selectors multiple times on a web page. Class selectors can be used on any HTML element that allows for the use of the class attribute in HTML. Class selectors are detonated by an end stop (.) before the name of the selector.

For instance,

1
2
3
4
5
6
7
8
9
10
11

<ul>
     <li class="active"><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/*"Global" Styles*/
ul {
     list-style-type:disc;
     padding-left:20px;
}

ul li {
     float:left;
     margin-left:10px;
}

ul li a {
     padding:5px 10px;
     background-color:black;
     color:white;
}

/*Class Selector*/

.active {
     padding:5px 10px;
     background-color:black;
     color:white;
}

On the first li element we have <li class=”active”>. The class attribute is looking for the class selector named “active” and applying those styles to that element. We will discuss class selectors in greater detail in a later tutorial. The main idea for now is that they can be used multiple times in a web page and the selector can be called by using the “class” attribute on virtually any HTML element.

ID Selectors

ID selectors are traditionally used to indicate the major divisions between markup and are mostly used on div (or other block-level element) tags. ID selectors are denotated by the use of a pound (#) symbol.
For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<div id="header">
     <div id="nav">
          <ul>
               <li><a href="#">Item 1</a></li>
               <li><a href="#">Item 2</a></li>
               <li><a href="#">Item 3</a></li>
               <li><a href="#">Item 4</a></li>
          </ul>
     </div>
</div>
<div id="sidebar">
     <h2>Joe Smith</h2>
     <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
     </ul>
</div>
<div id="content">
     <p>Some text here</p>
</div>
<div class="clearfix"></div>
<div id="footer">
     <p>Copyright &copy; AtomicPages.net 2010. All Rights Reserved.</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

body {
     margin:0 auto;
     width:1000px;
     font:11px sans-serif;
     color:#fff;
}

.clearfix {clear:both;}

#header {
     margin:0 auto;
     display:block;
}

#nav {display:table;}
#nav ul {list-style-type:none;}
#nav ul li {
     float:left;
     padding-left:8px;
}

#sidebar {
     width:200px;
     float:left;
}

#content {
     width:800px;
     float:right;
}

#footer {display:table;}

Notice how the ID attribute for HTML works the same way as the class attribute. The ID attribute calls for the id selector with the given name and applies the styles to it. The <div id=”nav”>, for instance, is calling for the id selector names nav and applying the styles to it. The divs and the ids are also creating logical divisions on our web page e.g. header, nav[igation], sidebar, content and footer.

Comments

Comments are essential to creating any website or program. This allows us to understand what we are thinking or to make additional notes on a web page or program. This also allows for other people to easily see what we our intent is without having to guess.

CSS comments are similar to most multi-line comments in PHP and other programming languages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*This is a single line comment*/
/*
*This document was created by AtomicPages.net
*/
body {
     margin:0 auto; /*sets top + bottom margin to 0 and left + right margins to auto*/
     width:1000px;
     font:11px sans-serif; /*keep sans-serif for continuity across the site*/
     color:#fff; /*do NOT change this value!!*/
}

Comments are useful for making annotations for programmers who don’t deal with the design of website very much, making your code easier to understand, and giving yourself or whoever created the style sheet credit!

Think you got it? Take the quiz and find out!