closed

Does this help you at all?

YEAH! A LOT!	3.4%	[ 1 ]
There were a few things I learned, but most of this I already knew.	3.4%	[ 1 ]
No! I do not get ANY of this!	3.4%	[ 1 ]
No, I already knew this all.	17.2%	[ 5 ]
Cookie monster option!!!	72.4%	[ 21 ]
Total Votes:			[ 29 ]

[koli yume]

The more you know!!!

What is line height?
The line-height property increases the space between lines of text. When you increase the value you increase the line inbetween the text. If you are curious, try tweaking this ability, save your CSS file, and see how it changes.

What is a pixel?
Basically, one pixel is one of the tiny dots that make up what you see on the computer screen. The screen itself is made up of hundreds of thousands of these pixels.

Now, to the paragraph styles:

Quote:

p {
font-family: Times, "Times New Roman", serif;
color: navy;
}

We've already shown that it's possible to change the color of text in a paragraph; now, we're going to settle on the color of navy.
Let's see what's changed with the list item style:

Quote:

li {
font-size: small;
}

The size of the list items has changed slightly through the font-size property. Here, we've decided to set the font size using the small keyword, but we could just as easily have used the percentage or pixel methods. Font-size property ranges from xx-small to xx-large.

Next, we introduced a new rule, this time for the h1 element (the main heading on our web pages, which displays the site name) and, once again, used a font-size property to specify the size of the text (extra large is the answer! Gigity gigity-ooohh right!).

Quote:

h1 {
font-size: x-large;
}

The h2 element also gets a slight makeover:

Quote:

h2 {
color: blue;
font-size: medium;
font-weight: normal;
}

*A special note for you!!!*
Normally browsers display the heading in bold-type, but if you wanted you could change it to standard type by giving the font-weight property a value of normal.

[koli yume]

Recap Time!!!

So far we have gone over only a small handfull of all the posible designs you could do for a webpage. If I were to sit here in my computer chair and list them all, we would never see the end of this thread. However, this section lists some of the basic properties and values with which you might like to experiment. Feel free to try any of these in your CSS file.

@color, background-color :: As we've seen, both of these properties can take color keywords (example: red, blue, green, or yellow) or hexadecimal color specifications such as #ff0000.

@ font-family -- This property takes a list of fonts, containing any fonts you choose in order of preference. Be sure to provide options that users are likely to have on their computers (e.g. Arial, Verdana, etc.). This list should end with at least one font type that is sure to be reconized be the computer.

@font-size -- This property can be any one of the following:

Quote:

font size keywords
xx-small
x-small
small
medium
large
x-large
xx-large

*Or you can use precentage (example 130%)

*Fixed font sizes could be used as well.

!pixels (example: 20px)

!points (example/note: 12pt, as you may be used to using in Microsoft Word)

Fixed font sizes are not always a great idea, as they cannot easily be scaled up or down to suit the reader's needs. Relative font sizes are definitely the preferred option.

@font-weight
!bold or normal

@font-style
!normal or italic

@text-decoration
!none, underline, overline, or line-through

*A special note for you!!!*
Before you experiment with the CSS properties above, it might be an idea to make a backup of your CSS file, just in case you run into difficulties.

[koli yume]

Open about.html in your text editor.

*Note: If you didn't save this file then just copy/paste what is below into your text editor and live off it.*

Quote:

<h1>About Me</h1><p style="color: blue; font-weight: bold;">Koli Yume is the best person ever!!! She knows all there is to know about CSS and HTML because she is soooo smart!!! I wish I could be like her! </p>

We are going to add an emphasize element as shown below:

Quote:

<h1 style="color: #993399;">About Me</h1>
<p style="color: #993399; font-weight:normal;">Koli Yume is the best person (<em>ever!!!</em> wink She knows all there is to know about CSS and HTML because she is (<em>soooo</em> wink smart!!! I wish I could be like her! </p>

Save the page, then view it in your web browser. If it is done right the words with (<em> </em> wink around them should be italiczed. Notice I also changed the color of the font to a pretty shade of pink and purple. I also changed the font-weight to normal.

If you want to double check if you are right, follow this link to my Yahoo Browser. http://www.geocities.com/bottleofdoom911//about2.html

*The padding property is used to provide space between the outside edge of the element in question and the content that sits inside it.*

Open style1.css

Add this potion to the mix Dr. Suess!

Quote:

em {
font-style: normal;
text-transform: uppercase;
}

Save the CSS file, then refresh your browser's view of the About us page.
Now, whenever you add an em element to any web page of your site (assuming that page is linked to style1.css), the emphasized text will appear in capital letters, not italics.

Let's change the emphasis so that it's still italic, but also appears in uppercase letters. All we need to do is remove the font-style declartion; the em element will go back to it's defualt italicized appearance.

Quote:

em {
text-transform: uppercase;
}

*A special note for you*
"If I want an italic font, can't I use an italic element?" The answer is, yes. HTML provides an i element for just this purpose, but its use isn't recommended. Why not? Because, marking something up as i says nothing about its meaning; i only says how it should be presented on the screen. Such elements are referred to as presentational HTML elements, and they should be avoided. The b element (for bold), another old HTML element, shouldn't be used aswell. The preferred option is to use strong or, if you just want to display headings in bold, to use CSS.

[koli yume]

reserved

[koli yume]

reserved

[koli yume]

reserved

[koli yume]

reserved

[koli yume]

reserved

[koli yume]

reserved

[koli yume]

reseved

[koli yume]

this one is mine!

[koli yume]

this one is mine
this one is mine
this one is mine

[koli yume]

reserved

[koli yume]

Go ahead and start posting everyone. I will finish the rest of this later.