Archive for October, 2009

This is a continuation of Basics of CSS 2 (obviously) but it’s really just the continuation of common properties and their values that we are able to use! So without further to do…

Text Property

The text property can be easily confused with the font property. Do not get confused! The text property is for the actual characters you see. The text property treats all text as individual characters where as the font property is for font types, font size, font weight, etc.. So let us see these properties already!

Text Color

How do we change text color? In Basics of CSS – Part # 2 there was that fancy area where all the text was a different color (if you didn’t see then click here to see).

It was very simple actually. All that was used was some inline CSS and an HTML elements called span that is, by default, an empty element (it does nothing unless you tell it to in CSS).

1
2
3
4
5

<span style="color:re">red text</span>
<span style="color:#3333F">blue text</span>
<span style="color:rgb(51,255,0">green text</span>

This example would make the text like so: red text, blue text, green text. Cleverly, the colors red, blue, and green were chosen. Like the background property as seen in the Basics of CSS – Part # 2, we have the ability to use color names, hex color codes, and rgb decimal values.

As with all CSS properties, we can narrow where we want the color. Let us say we want one color for all h3 elements and another color for all h2 elements.

1
2
3

h2 {color:blue;}
h3 {color:#470b0b;}

text-align

How do we align text in CSS? We know how you might do it in HTML but you like CSS better and having to add align=”center” is a pain… And what if we wanted the text a different color for each alignment?

The solution is very simple! Let us assume we want a dark green color for all text that is aligned to the right, a dark blue color for all text aligned in the center, and a dark red color for all text aligned to the left. Our CSS will be as such:

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

.right {
     text-align:right;
     color:#006600;
}

.center {
     text-align:center;
     color:#000066;
}

.left {
     text-align:left;
     color:#660000;
}

These are global classes which means they can apply to any HTML element. Consider the following:

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

<h3 class="center">Dark blue Heading that is aligned center!</h3>
<p class="right">Dark green text that is aligned right!</h3>
<div class="left">
   <ul>
      <li>list</li>
      <li>list</li>
   </ul>
</div>

Using those “global” classes in CSS we are able to use them for any HTML element we want. So if you’re intending to use a class for more than one element, this is the approach that is the easiest.

text-decoration

Text decoration isn’t as artsy as it may sound. With the text-decoration property you have the ability to underline, overline, strikethrough, and a weird value called blink. Note: the blink value DOES NOT work in IE, Chrome, or Safari; if you have one of these browsers the blink example will look like regular text and will not blink. Using this property is still in the same fashion as using any other CSS property. Example:

1
2
3

.underline {text-decoration:underline;}
p.strikethrough {text-decoration:line-through;}

How about some ketchup for your fries?

1
2
3

<p class="underline"> Underline text</p>
<h3 class="strikethrough">This is a bad heading</h3>

text-transform

The text transform can save you a lot of headaches if you’re writing a formal document such as a Terms of Use, Terms of Service, Acceptable Use Policy, or Privacy Policy. Or even if you’re simply writing some site rules for your blog or anything else of the like, this property can save you time.

So let us say you’re writing your Terms of Service document for your web hosting company and you decide an entire section should be written in capital letters (Yes, I really used the property here). There are three values we can have for this property.

1
2
3
4
5

.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
h3.capitalize {text-transform:capitalize;}

Let us test these out! Here are some examples: here is some uppercase writing, HERE IS SOME LOWERCASE WRITING, and here is some capitalized writing, how fancy! You might have a hard time believing that what was used is Inline CSS… look in the source code of this article and you’ll see how it was done! Here’s what was done:

1
2
3
4
5
6
7
8
9
10
11

<span style="text-transform:uppercase;">here is some
uppercase writing</span>
<span style="text-transform:lowercase;">HERE IS SOME
LOWERCASE WRITING</span>
<span style="text-transform:capitalize;">here is some
capitalized writing, how fancy!</span>

And there you have it! Some more general CSS properties that we can use! You can download a review or everything that was done in this tutorial I elaborated on justify inside of the html document, so if you’re interested in justify then I recommend you download it.

css_basics3.zip
Size: 1.9 KB

Assuming you already have prior knowledge of CSS and/or your read the First Tutorial, then we will continue learning the basics of CSS!

Common properties

We’ll begin this with a few very common properties that will almost always be used in style sheets!

Background

Background Color

Our first example is of the background-color property. This property will allow us to change the background color to anything we want. We can do this three different ways, see the example below:

1
2
3
4
5

body {background-color: blue;} Sets background to Blue
body {background-color: #0000FF;} HTML Color Codes
body {background-color:rbg(0,0,255);} RGB Values

The code above is setting the background color of the body element to BLUE and we can accomplish this three different ways!

1. Using your regular colors such as Red, Orange, Yellow, Green, Blue, and Purple and many other colors. See this list for all of the 150 colors.
2. Using HTML color codes such as… #45D7DD, #2BD023, and #E43EE2.
3. And the last method is by using RGB Values such as rgb(000,206,209), rgb(255,215,000), and rgb(144,238,144). Click here for HTML Color Codes and RGB Values.

Background Image

Using this property we can insert an image as the background to a web page, create interactive menus, etc.. The background-image property is repeated by default and will cover the entire area unless specified otherwise. Consider the following code:

1

p.yellow-paper {background-image:url("images/notepaper_yellow.jpg");}

We can see that p is a selector but we add a class so if we wanted anything within any p element to have the notepaper_yellow.jpg background we could simply type:

1

<p class="yellow-paper">Some text here on yellow paper</p>

The image “notepaper_yellow.jpg” will be the background for the text we type, in the case CSS.

Background-repeat

The example with the notepaper_yellow.jpg has a problem that might not be so obvious. We didn’t define a height OR width for that image. This can be done two ways:

1. We can make an image that will span the entire width of our site (let say 1000px;) and have it festering on our server OR
2. We can create the image using Photoshop or any other image editing software and simply crop the image to the full height (in our case 18px) and 1 px in width and simply use the repeat-x property!

Each has their pros and cons I suppose; however, usually images are cut down like that in order to save bandwidth and page loading times. It also makes it easier for you to design your web page. For example: notepaper-yellow.jpg. at 1px X 18px is 2.75KB! That’s very insignificant when it comes to designing as web site and it is also something very easy to work with.

1
2
3
4
5
6
7
8
9
10
11

p.yellow-paper {
     background-image: url("images/notepaper-yellow.jpg");
     background-repeat: repeat-x;
     height: 18px; /*defines the height of the image*/
     line-height: 18px; /*defines the height of the "text box"*/
}

Note: Text box is used very loosely and is very vague. Think of the line-height property as an invisible box around each line of text. This property will add/contract space between these invisible boxes.

So the background-repeat property has four possible values:

1
2
3
4
5
6
7

background-repeat: repeat-x; /*repeats along the x-axis*/
background-repeat: no-repeat; /*forces the image to NOT repeat*/
background-repeat: repeat-y; /*repeats along the y-axis*/
background-repeat: repeat; /*repeats along both the x and y axis*/

So let’s apply all of this useful information! Let’s actually make something! I put together a small .zip file of an .html, .css, and two image files that are relevant to this tutorial and the first Basics of CSS Tutorial. The package is 8.37KB (very small) and I recommend you download it and read some of the comments and try to “decode” the HTML and CSS.

css-basics2.zip
Size: 8.37 KB

Background Position

This property is a little more confusing in a way.. You can actually include x% and y% and xposition and yposition if you happen to know exactly where you want your image to reside on a web page. However, the creators of CSS gave us the most common places where an image might be on a web page.

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

background-position:top left;
background-position:top right;
background-position:top center;
background-position:center left;
background-position:center right;
background-position:center center;
background-position:top;
background-position:bottom;
background-position:center;
background-position:left;
background-position:right;
background-position:bottom left;
background-position:bottom right;
background-position:bottom center;
background-position:x% y%;
background-position:xpos ypos;

As you can see there are a LOT of choices you can choose from. I actually prefer more advances positioning elements that we’ll explore in later CSS tutorials. For now, there are your options.

Background Attachment

This property can be quite irksome in some ways… Here are the possible values

1
2
3

background-attachment:scroll;
background-attachment:fixed;

Now scroll means the image will scroll with the rest of the page, which is default so this property is basically useless unless you want the image to be fixed and have the web page scroll under the image. This is very uncommon and usually it’s pretty annoying unless you have a good reason for an image to remain fixed.

Background All-Inclusive

CSS makes it very easy to include all of our values with ONE property! The lovely background property. Isn’t not a bad thing to write out code like this:

1
2
3
4
5
6
7
8
9
10
11

body {
     background-color:#fff1d8;
     background-image:url("image/gradient.png");
     background-repeat:repeat-x;
     background-position:top center;
}

however… you can accomplish the same thing by doing this:

1

body {background:#fff1d8 url("image/gradient.png") repeat-x top center;}

Pros and Cons of Compact Model

There are, of course, Pros and Cons to each style.

Pros and Cons of Extended Model

So we can see how each has good and bad parts. I believe there is no “proper” to writing your properties. If you’re more comfortable using the extended model then use that! As long as it is easier for you, that’s all that really matters in the long run. Just make sure your CSS is syntactically correct and you organize your CSS for ease of readability.