Dream.In.Code > CSS Beginner Tutorial

quim

10 Aug, 2006 - 01:07 PM

You can also view this tutorial in Click to view attachment

CSS Tutorial

What is CSS?
•Definition: Cascading Style Sheets
•Usage: Used to customise the design of a HTML page by settings attributes in the <head> of a page.
•Advantages: A webpage's design can be changed throughout by amending the CSS section of a webpage.

Linking CSS to HTML pages

CSS codes are places between the <head> tags of a webpage.

Example

CODE

<html>
<head>
(CSS Coding)
</head>
<hody>
</body>
</html>

Linking CSS methods

•Within HTML: CSS coding is included within the HTML file itself.

CODE

<html>
<head>
<style type="text/css">
(CSS coding)
</style>
</head>

•Separate File: CSS coding is included within its own file.

CODE

Now we have established the basics of CSS linking, let's have a look at some coding

Whether your CSS coding is in its own file or within the head tags of your HTML, the structure of the code is exactly the same. Let's have a look at an example.

CODE

P { font: italic bold 11pt calibri }

In English...

The layout of CSS coding is a standard format...

CODE

Variable { attribute1: value; attribute2: value2; attribute3: value3 }

In the previous example, the Variable is 'P'. The 'P' in this sence is the basic paragraph tag <P>.

So far, we have established that this piece of CSS code is amending the properties of every paragraph tag on our HTML page.

CODE

{ font: italic bold 11pt calibri }

The attributes we are setting for the paragraphs on our HTML page is the font. Can you work out what the font attributes will be?

Here is a before and after of how how this code affects our webpage.
source codeClick to view attachment websiteClick to view attachment

Now we understand how CSS coding works, we can have a look at other attributes and what they can do.

Font Attributes

Syntax: font-style: <value>
Possible Values: normal | italic | oblique

Syntax: font-weight: <value>
Possible Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Example

CODE

P { font-weight: 900; font-style: italic }

- Makes all <p>Paragraph content</p> bold and italic.

Colour Attributes

Syntax: color: <color>

Example

CODE

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

Text Attributes

Syntax: letter-spacing: <value>
Possible Values: normal | <length>

Syntax: text-decoration: <value>
Possible Values: none | [ underline || overline || line-through || blink ]

Syntax: text-align: <value>
Possible Values: left | right | center | justify

Example

CODE

H1 { letter-spacing: 0.1em; text-align: center; text-decoration: underline }

- Sets all <h1> tag content to letter spacing 0.1em, aligns it to the centre and underlined.

Link Attributes

It's not only tags that can be modified, you can also modify the styles of links on your webpage.

CODE

a:link, a:visited, a:active { color: white; text-decoration: blink }

- This makes all links, active links and visited links white and blink!

Background Attributes

Other than tag and link attributes, you can modify the whole body of your webpage!

Syntax: background-image: <value>
Possible Values: <url> | none

Syntax: background-repeat: <value>
Possible Values: repeat | repeat-x | repeat-y | no-repeat

Syntax: background-color: <value>
Possible Values: <color> | transparent

Example

CODE

body { background-image: url('/images/hi.gif'); background-repeat: repeat-x }

*** Sets the background image to 'hi.gif' and repeats this image along the x-axis (horizonal) of the webpage only.

Note: The 'BODY' variable modifys the body of your webpage.

Exercise: try changing attributes for other tags, such as:
<h1> - Large font
<b> - Bold text
<i> - Italic text
<u> - Underlined text
<strong> - Text in a strong format

Once you feel comfortable with this, we can move on. Remember the format...

CODE

Variable { attribute1: value; attribute2: value2; attribute3: value3 }

Assigning custom CSS Variables to tags

CODE

.Anything { Color: Red; text-decoration: line-through }

If a line of your CSS code is prefixed with a dot (.) then this indicates that this is a customer variable. For example, if you don't want to assign all paragraphs, or all links to one particular theme, then this is where this comes in handy.

CSS Code

CODE

.RedLineThrough { Color: Red; text-decoration: line-through }

HTML Code

CODE

This text here should be red and have a line through it </p>

When assigning customer variables in CSS, remember to prefix them with a dot (.) and use the 'class=' Tag-Attribute to denote that you want to use this within a tag.

Example Preview
Source fileClick to view attachment Website Click to view attachment

k.sangeeth

3 Aug, 2007 - 04:21 AM

really good for beginning css

the duke

23 Oct, 2007 - 09:55 AM

when you have

CODE

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

do each of the H1 and H2 and so on dictate a different area?
im just wondering cause each of them have different color codes ... or do all those correlate to the same "area"?

and when you have

CODE

P { font-weight: 900; font-style: italic }

what would this be dictating to?
like the main filler in the middle of the website? i use filler for lack of a better term

these 2 things i dont think were explained...if they were im sorry i must of missed it ...

Martyr2

23 Oct, 2007 - 10:00 AM

CSS formatting corresponds to stylizing certain HTML elements. For instance, the H1, H2, H3 example refers to <h1>, <h2>, <h3> heading tags. <h1> headings will appear blue, <h2> headings will be a darker blue and <h3> will be another shade of blue.

The "p" definition is for the <P> paragraph tag. It makes the paragraph with a heavier weight and italicized. Don't think of it as so much "area" as modifying elements of the page and what those elements control. You could modify <b> bold tags, <div> div tags, <body> even the body tag. When you modify the <body> tag it also can change the elements inside the <body> tag including headings and such.

Hope that answers your question.

the duke

23 Oct, 2007 - 10:14 AM

ah ok that makes sense...
so the P is just another element ...
both P and H1 ect. are used for fillers with the words on the page .... am i right in saying that?