View User's Journal

Welcome welcome! I'm your host for today, Joseph, and I'm going to teach you everything you need to know about CSS! You may skip to any section any time, but keep in mind some sections refer to phrases from other sections. There is two requirements though, so please do these. Number one: You need to know basic HTML
Number Two: You need to have fun

Below are the following things I will show you how to do! ( The letters in brackets are phrases to quickly locate the certain section )

Index

Selector · (OPER)
List · (YDOC)
Internal · (DFSO)
External · (TSBD)
Inline · (TDSB)
Class · (LODU)
Background · (BOTB)
Font · (FIRY)
Text · (REDF)
Padding · (OEPD)
Margin · (DPAS)
Cursor · (POWR)
Position · (POSP)
Layers · (LITT)

SELECTOR . (OPER)

· Selector · (OPER)

CSS Selectors as the biggest thing you will use in this guide. Luckily though, it is not something hard to memorize, so it should be easy you remember!

SELECTOR { PROPERTY: VALUE }

Alright, so, the "SELECTOR" is the section that you are using the code on. Say, you were using this code on a Paragraph. In HTML, the code is correct? Well, in CSS it is just "p". the "p", or the section, is where the "SELECTOR" goes. Now, onto the property. Let's say you wanted to set the color. You would change "PROPERTY" to "color". The "PROPERTY" determines what it is going to do to "SELECTOR", or in this case "p". Last but not least, the "VALUE". "VALUE" is just a smaller tag of "PROPERTY". So, for example, lets say you wanted your text red, you would put "red". In the end, you code would look something like this.

p { color: red }

Now, all your tags will come out as red.

LIST . (YDOC)

· List · (YDOC)

Now, there are two different types of lists, the two below are an Ordered List, and an Unordered List, in that order.

ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

Now, there are different "VALUE's" to use for ol, and ul, and here they are.

Quote:

Unordered list styles: square, circle, disc(default), and none
Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal(default), and none

Below is how you would make the lists an image instead:

ul { list-style-image: url("image.gif") }
ol { list-style-image: url("image.jpg") }

INTERNAL . (DFSO)

· Internal · (DFSO)

Internal means inside the HTML document. In CSS, you can choose to have the code Internal or External. If it is External, it can be made easier for big websites, as they can change say the background color of thousands of pages in under a minute. But that's the next section. Internal is to put your code in the HTML document itself. Usually, this goes right under the head, and between these two tags is where you would put your CSS codes.

EXTERNAL . (TSBD)

· External · (TSBD)

External means to be outside. This part can be used for changing a certain section of multiple pages at one time alone. What you need to do first, is to create a CSS file. So, open up a notepad, and put in all the CSS code you think you will need. EXAMPLE.

body{ background-color: gray }
p { color: blue; }
h3{ color: white; }

Then, save that as "name of your file.CSS". This makes it a CSS file and not a HTML file. When you open it up, it just comes up in notepad. Now for the HTML part. Put this in your HTML, right under the <head>.

This will tell the computer to take the text from the CSS file you just created and apply it to the whole website. You can add that little bit of text into all your web pages, then change one detail and all your pages would be changed too.

INLINE . (TDSB)

· Inline · (TDSB)

Believe it or not, CSS can be used in HTML. Inline is just a different way of setting values and such. Here is a simple example.

A new background and
font color with inline CSS

CLASS . (LODU)

· Class · (LODU)

Classes have to do with defining multiple options for just one section, but it involves creating an External CSS file.

Example of External CSS file:

p.first{ color: blue; }
p.second{ color: red; }

This makes with the class first, and with the class second have different "VALUE's". Now for the HTML part.

Paragraph one!
Paragraph two!

So, first will come out as blue, while second will come out as red.

BACKGROUND . (BOTB)

· Background · (BOTB)

There are three different ways to set a background color. Here are all three.

h2 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145) }

All these do the same thing, they are just different. Choose whichever on you like. For an image as the background, you would put this.

p { background-image: url(image.jpg) }

You can have background image repeat, but did you know you can make them repeat in only certain directions?

p {
background-image: url(image.jpg)
background-repeat: repeat; }
h4 {
background-image: url(image.jpg)
background-repeat: repeat-y; }
ol {
background-image: url(image.jpg)
background-repeat: repeat-x; }
ul {
background-image: url(image.jpg)
background-repeat: no-repeat; }

You can also make it so when you scroll, the image does not repeat, but it stays in the same spot while the text moves.

textarea.noScroll {
background-image: url(smallPic.jpg)
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg)
background-attachment: scroll; }

You can also position background images too! all these three do the same thing keep in mind, just choose whichever on makes you most comfortable.

p {
background-image: url(image.jpg)
background-position: 20px 10px;
}
h4 {
background-image: url(image.jpg)
background-position: 30% 30%;
}
ol {
background-image: url(image.jpg)
background-position: top center;
}

FONT . (FIRY)

· Font · (FIRY)

Again, three different ways of choosing your text.

h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98) }

You can use this to change the font!

h4 { font-family: sans-serif; }

Keep in mind, you can change the "VALUE" to any text you want, as long as you spell it right, it will work. The below is three different ways to change the font size.

p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }

There are three different ways to determine the font style of the text: italic, oblique(bold), and normal. Below is a small example.

p { font-style: italic; }

You can also determine the weight ( How much bold is applied ) to the text like this.

p { font-weight: 100; }

TEXT . (REDF)

· Text · (REDF)

Below are different styles of text! Go ahead, try them out!

h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }

The top one is a line through the word, like strike on here. Over line is like underline reverse, it's over the words. Underline is well, underline. and last but not least, none. Which is, you guessed it, nothing happens. You can also determine the indent of the paragraph or header, by px (pixels) or a percentile.

p { text-indent: 20px; }
h5 { text-indent: 30%; }

The below will align the text.

p { text-align: right; }
h5{ text-align: justify; }

(Justify is how many spaces you put in between the tag and the actual text.)

You can also use the below, to make the whole text capitalized each word, all uppercase, or all lowercase.

p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }

Use the below to put spacing in your words, like this.

p { word-spacing: 10px; }

You can also make it so you have spaces in between the letters!

p { letter-spacing: 3px; }

PADDING . (OEPD)

· Padding · (OEPD)

Padding is how close or far away the border is to the text. Have it at 0, and it will be touching. Have it at 15, and there will be spaces between it.

p {padding: 15px; border: 1px solid black; }

There are a few different border styles:

dashed
dotted
double
groove
inset
outset
ridge
solid

You can also change how much padding is on each side.

h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}

CURSOR . (POWR)

· Cursor · (POWR)

These are the different cursor styles:

default - Display the normal mouse cursor icon
wait - The mouse icon to represent the computer "thinking"
crosshair - A cross hair reticle
text - An "I" shaped icon that is displayed when selecting text
pointer - A hand icon that you see when you hover over an HTML link
help - A question mark (usually)

p { cursor: wait }

Now when you put your mouse over a , a waiting cursor will apear. But only when it is over the .

POSITION . (POSP)

· Position · (POSP)

This is how you would determine a position:

Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

An example:

h3 {
position: relative;
top: 15px;
left: 150px;
}

LAYERS . (LITT)

· Layers · (LITT)

Layers are separated by a term called "z-index". This is used to make layers. Here is an example. "z-index:2 ;" is on a higher level that "z-index:1 ;", therefore, number two will go over number one.

h4{
position: relative;
top: 30px;
left: 50px;
z-index: 2;
background-color: #336699;
}

p {
position: relative;
z-index: 1;
background-color: #FFCCCC;
}

Welcome to Gaia! :: View User's Journal | Gaia Journals

More Information