Page 1 of 1

CSS Beginner Tutorial it teachesyou the basic of CSS Rate Topic: ****- 6 Votes

#1 quim  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 18
  • View blog
  • Posts: 182
  • Joined: 11-December 05

Post icon  Posted 10 August 2006 - 01:07 PM

You can also view this tutorial in Attached File  CSS_Tutorial.doc (184.5K)
Number of downloads: 2266

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
<html>
<head>
	(CSS Coding)
</head>
<hody>
</body>
</html>



Linking CSS methods

•Within HTML: CSS coding is included within the HTML file itself.
<html>
<head>
<style type="text/css">
(CSS coding)
</style>
</head>



•Separate File: CSS coding is included within its own file.
<html>
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>



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.

P { font: italic bold 11pt calibri }


In English...

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

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.

{ 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 codeAttached Image websiteAttached Image

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

P { font-weight: 900; font-style: italic }
- Makes all <p>Paragraph content</p> bold and italic.


Colour Attributes

Syntax: color: <color>


Example
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

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.

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

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...

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



Assigning custom CSS Variables to tags

.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
.RedLineThrough { Color: Red; text-decoration: line-through }


HTML Code
<P class="RedLineThrough"> 
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 fileAttached Image Website Attached Image

Is This A Good Question/Topic? 2
  • +

Replies To: CSS Beginner Tutorial

#2 k.sangeeth  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 62
  • Joined: 27-July 07

Posted 03 August 2007 - 04:21 AM

really good for beginning css
Was This Post Helpful? 0
  • +
  • -

#3 the duke  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 83
  • Joined: 22-October 07

Posted 23 October 2007 - 09:55 AM

when you have
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
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 ...
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4188
  • View blog
  • Posts: 11,852
  • Joined: 18-April 07

Posted 23 October 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. :)

This post has been edited by Martyr2: 23 October 2007 - 10:02 AM

Was This Post Helpful? 0
  • +
  • -

#5 the duke  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 83
  • Joined: 22-October 07

Posted 23 October 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?

This post has been edited by the duke: 23 October 2007 - 11:11 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1