CSS Lesson1

CSS is a lot of fun once you start it, the same way PHP is a lot of fun. So here’s what I’ve learned so far.

  1. Ways to implement CSS
  2. CSS in DreamWeaver
  3. Backgrounds in CSS
  4. Text in CSS


Ways to implement CSS

There are three different ways to use styles:

  1. Using an External Style Sheet: You do this by creating a .css file. This file has the lowest priority when it comes to style use UNLESS you reference it in the <head> AFTER you use the internal style sheets. You can reference the file this way: <link href=”style.css” rel=”stylesheet” type=”text/css” />
  2. Internal Style Sheet is another method of using styles. This style will only apply to the html document it’s in. It has the second highest priority but only when the external style sheet is referenced before it. This style sheet is in the <head> tag and you can use it by defining styles between these two tags: <style type=”text/css”> </style>
  3. In-line Styles are of the highest priority and will override any other styles.  Here’s an example: <p style=”color: #000000″>.

CSS in DreamWeaver

CSS is made unbelievably easy in DreamWeaver. Once you start typing something about a style, let’s say you type <style type=”text/css”> and you type “p { text”, you’ll get a list of properties to choose from:

optionOnce you hit enter, you’ll be presented with another set of options for the value of the property:

option2dockYou’ve also the option to use the CSS dock on the right. If you can’t see it, go to Window>>CSS Styles and the dock should appear. As you can see, I already have a couple styles defined in my document: <p> and <body>. I’ve selected “p” and you can see that there is one property defined and that is “color” and that color is white.  If you selected the <body> tag, you’d see something similar. You can add properties with the “Add Property” button which will bring up a list of properties and then a list of values as above.

The three buttons on the bottom left will let you change the view of the properties:

1. Category view will show you all the available properties in different categories with values (if any) in the right column

2. Alphabetical view serves to show you the list of available properties in an alphabetical order

3. Set Property view is the view that I have set in the picture.

The bottom right icons are all self-explanatory if you just hover over them. The first let’s you add a style sheet that will show up on top (see that style.css with a plus next to it?), the second button is for a new CSS rule, the third is to edit style and the fourth button erases a style.

Backgrounds in CSS

Let’s get started with some properties. Traditionally, you could use <body bgcolor=”white”> or <body background=”image.jpg”> for the background but you can also use CSS for this and not only that, but you can define a background color or a background image for <h1> tags and for <p> tags:

body { background-image: url(‘link.jpg’)}

p { background-color: white}

Instead of the word “white, color can also be specified using the hex designated value: #FFFFFF or the RGB color: rgb(0,0,0). Here are three more background properties that are quite interesting:

body {

background-position: bottom;

background-repeat: repeat-x;

background-attachment: scroll;

}

The first property can be set for any given position (left, right, top etc) and supports more complicated positions (top left, top right), you can even use pixels (10px 34px) and percent (32% 23%). Repeat can have the following values: repeat-x, repeat-y, repeat, and no-repeat. Repeat-x repeats horizontally while repeat-y repeats vertically. “Repeat” will repeat the image non-stop in every way while “no-repeat” will keep the image from repeating ever. For the last property has two values: fixed or scroll. “Fixed” will keep the background moving as you scroll, ie the image will seem to scroll down with you. “Scroll” will keep the image where it is so that when you’re scrolling down, you’re scrolling down the image as well. It’s hard to explain so let me show you an example, go to my twitter page and try scrolling down. That’s “fixed” attachment.

Text in CSS

There are many properties you can assign to the text in many different ways. Text can be defined under the <body> tag, the <h#> tag (# = 1, 2, 3 etc), the <p> tag, and others. Let’s start with text-alignment. I’ll use the class system which works like this:

p.nameofclass {text-align: justify}

<p class=”nameofclass”> hello </p>

In this example, the class name “nameofclass” can only be used with the <p> tag. The text-align: justify will tell the browser to space out the letters and the words to fill up the entire line, much like in magazines. Other text-align attributes:

p.left {text-align: left}

p.right {text-align: right}

p.center {text-align:center}

You can align the text: left, right, or at the center as well. The class names are not mandatory. Next, let’s do text-decoration.

h1.strikethrough {text-decoration: line-through}

h2.lineabove {text-decoration: overline}

h3.lineunder {text-decoration: underline}

There is also another decoration called “blink” but it’s not supported in Chrome, IE, nor Safari. It makes the text blink in and out of existence.

There are actually a lot of different properties that are text-related. There is “color“, that’s self-explanatory. There is “line-height” which specifies the amount of space between consecutive lines. There is also “direction” with the values of either “ltr” or “rtl” which specifies if the text will go left to right or right to left. You can specify the amount of space between words with “word-spacing” with that comes “letter-spacing” with a similar function but this one defines space between letters.

Here is an interesting text property: text-shadow. Here is what you can define it as:

h2.shadow {text-shadow: 2px 3px 4px white}

h2 example

As you can see, it’s quite a fun property. The values are pretty easy to define. The first “text-shadow” value is the x-coordinate offset, the second value is the y-coordinate offset, the third value is the amount of blur, and the fourth value is the color of the shadow.

You can also make a “text-indent” which will make an indent at the beginning of your paragraph. There is a neat property called “text-transform” which has the values: uppercase, lowercase, and capitalize. Self-explanatory, I think. It’ll make all of your text in uppercase, lower case, or it will capitalize everything in your text (or the specified class or tag). Finally, there is a “white-space” property that has the values: pre and nowrap. “Pre” will wrap your text according to how you have it in your code ie if you put a line break (not <br> but just pressed enter) in your code, it will show it. The default will read the whole paragraph and the browser will word-wrap it once the line reaches a certain limit (the end of the page or of its container). “Nowrap” will defy that wrapping and the text will go on and on in width.

I hope you enjoyed my tutorial, I’ll have more to come soon. Here is a tip: for most properties that require a number value (letter-spacing etc) you can use several methods to define the value. I like to use pixels, but you can usually also use % and other methods.

Oh and here’s the code for the CSS:Lesson1 header above:

<h1 style=”text-align:center; text-shadow: 0px .5px 2px black; color: black; font-size: 26pt; text-decoration:underline; letter-spacing:14px;”>CSS Lesson1</h1>

When I figure out how to make the font less pixelated, I’ll tell you :)

Thank you for reading!

Be Sociable, Share!