Cryptic GFX - GFX Forum - The Complete CSS Tutorial

Pages: 1 2

Alright guys, if you haven't read the html tutorial yet I recommend you do that before following this one.

So last week I taught you all the important html tags and how to create a basic layout in html. This week we will be styling that layout using css. Before we do that I going to teach you the basics. Let's begin.

Linking the CSS & Html
Ok, the first thing you're going to want to do is link up the css & html. Create a new file called style.css and place it in the same directory as your html file. after you do that though this code in the <head> section of your html file, and your good to go.

Code:

<link rel="stylesheet" type="text/css" href="test.css" />

CSS Syntax:
CSS is a completely different, but closely related, language than html. Let's explore how CSS is written. So let's pretend we're styling the h3 tag, here's how it would look.

Code:

h3 {

    color: #ffff33;

    font-size: 30px;

}

h3 is the tag were styling and all the property's inside the {} are the elements we're adding to the default h3 style. You need to add a semicolon after each one as well. It may seem confusing at first, but you'll get used to it.

Commonly Used Elements:
Now lets go over all the elements that you will come across often. I'll explain what each one does and will break them into sections.

Text Styling:
font-family - Let's you select a font to use. Remember to use web safe fonts.

Code:

font-family: arial;

font-size - Changes the size of the text (duh). You can set the size in either px, pt, or em.

Code:

text-size: 25px;

text-align - Sets the alignment for the text. You can choose either left right or center.

Code:

text-align: left;

font-weight - Let's you make set the font to bold.

Code:

font-weight: bold;

font-style - Let's you change the style of the text (ie: italics):

Code:

font-style: italic;

text-decoration - Let's you add an underline, overline, or line through the middle.

Code:

text-decoration: underline;

line-height - Let's you set specific text line spacing.

Code:

line-height: 25px;

letter-spacing - Allows you to set the spacing in between each letter.

Code:

letter-spacing: 5px;

Try it out:
Alright now let's try out some of the elements I just showed you.

Code:

h3 {

    color: #ff606f;

    word-spacing: 6px;

    font-size: 30px;

    font-family: sans-serif, helvetica;

}

Here's how the h3 tag should look now:
[Image: css1.png]

Background Elements:
Now that you know most of the text styling elements lets take a look into backgrounds. These are ones you will use for background images.

background-repeat - let's you define which way the image repeats (if any). Your options are repeat, repeat-x, repeat-y, or no-repeat

Code:

background-repeat: repeat-y;

background-image - This is where you put the url to the image you're using.

Code:

background-image: url(images/box.png);

background-color - If you don't want to use a background image you can use a background color here. It's also good to enter a color just incase someone visits your site with images turned off.

Code:

background-color: #495784;

Dimension Elements:
This is how you define the sizes of boxs, images, anything.

height - Defines the height

Code:

height: 200px;

width - Defines the width

Code:

width: 200px;

min-height - Defines a minimum height

Code:

min-height: 30px;

min-width - Defines a minimum width

Code:

min-width: 30px;

max-width - Defines the max height.

Code:

max-width: 300px;

max-height - Defines a max width

Code:

max-height: 300px;

Margins & Paddings:
So let's say you want to add some margins/paddings to a box. What do you do? It's simple:

margin - Sets an equal margin for all four sides.

Code:

margin: 20px;

padding - Sets an equal padding for all four sides.

Code:

margin: 20px;

You can also set a margin/padding for each side individually using top, bottom, left, or right.

margin-top - Sets a margin for the top side

Code:

margin-top: 5px;

padding-left - Sets a padding for the left side.

Code:

padding-left: 5px;

Borders:
You can borders to anything really simply. You can add a border to a single side or all four. There's also plenty of styles.

border-width - Adds a border to all four sides.

Code:

border-width: 3px;

border-color - defines the color of the border

Code:

border-color: #483293;

border-style - Defines the style of the border. There are several you can use: solid, dotted, dashed, double, groove, hidden, inset, outset, and ridge.

Code:

border-style: dashed;

Just as with the margins you can add a border/color/style to a single side.

Code:

border-bottom-color: #ff8339;

Using what we've learned so far:
Alright now lets put it all together and make a simple styled box with a heading and some content. First lets write some basic html.

Code:

<div class="box">

    <h2>Box Heading</h2>

    <p>This is where all the content belongs. We can place a full paragraph in here. I'm                     still typing to give the box some height. Lodddy dotty da. Wow, this is getting kind of boring.... I guess this is long enough.</p>

</div>

Here's how it will look before we do any styling:
[Image: cssbox1.png]

Alright, now to style this box we will be adding elements to .box {}. Let's start by adding a width:

Code:

.box {

    width: 300px;

}

Now everything will stay within 300px. Next lets add a background color and a dashed border:

Code:

.box {

    border-color: #a7a7a7;

    border-style: dotted;

    border-width: 1px;

    background-color: #d7d7d7;

    width: 300px;

Here's how it looks so far:
[Image: cssbox2.png]

As you can see all the text is touching the borders. Lets add 20px of padding.

Code:

.box {

        padding: 20px;

    border-color: #a7a7a7;

    border-style: dotted;

    border-width: 1px;

    background-color: #d7d7d7;

    width: 300px;

And it fixed:
[Image: cssbox3.png]

Now lets get to styling the text. To target the h2 heading in this box specifically you would style .box h2. Let's change the size, color, and font.

Code:

.box h2 {

    color: #95211d;

    font-family: helvetica;

    font-size: 24px;

}

Now it's time to style the text. Let's change the color, size, font, and the line height. Let's also add a little top margin to separate it from the heading more.

Code:

.box p {

    color: #4a4a4a;

    line-height: 20px;

    font-size: 10px;

    font-family: "lucida grande";

        margin-top: 5px;

}

And there you go, you now have a nice looking box:
[Image: cssbox5.png]

How about adding images from photoshop (the photoshop mockup)?

Yeah thats coming up later in the tutorial, but basically you'll be using background images for the different classes/ids.

For example:
Say you have a cool background pattern for the sidebar. it would look something like this.

Code:

#sidebar {

    float: left;

    width: 300px;

    background-repeat: repeat-y;

    background-image: url(images/sidebar.png);

}

The code above is for a repeating background which is usually the best to use, but if you just want a static box (a box that doesn't stretch with the content) you could simply enter the width and height and get rid of the repeat.

I'll explain what floats are and the rest of this in more detail when I continue the tutorial.

Looking forward to it!!!

Added two more sections. I'll add two more tomorrow.

Nice, I'll have to try this tutorial out as soon as I get out of work!

Yeah, It's still in the works, you can get started though.

You commit an error. Write to me in PM, we will talk.

Done the bit thats done and this fare it actually seems quite logic Big Grin

Good to hear. I've been lazy ill try and continue this soon.

Pages: 1 2

Cryptic GFX - GFX Forum

Balloon

Mr.Che

Balloon

Mr.Che

Balloon

Aquile

Balloon

jkpiodsoea

Aquile

Balloon