Skip to Content

Intro to CSS

Author: Bill Trikojus

 
1

Styles in your HTML
 
2

Basic CSS
 
3

Controlling tag attributes
 
4

Classes
 
 

Styles in your HTML
 
 


OK here's areally quick intro to CSS (Cascading Style Sheet). CSS is a way of keeping the 'design' of your site separate from the content. They are particularly useful for keeping design consistent across large sites. Put simply, the developer can create their html pages containing the <html> tags and the designer can create a CSS that controls how the content inside those tags will be displayed inside the browser. There are numerous ways to include Styles in your HTML page but I'm only going to discuss what I think is the most powerful - linking to an external CSS.

In Dreamweaver or any text editing program start a new html page with these basic tags

<html>
<head>
<title>Page 1</title>
</head>
<body>
<p>Some content</p>
And some more content
</body>
</html>


Save your html page to a folder named 'myCSS' and name it page1.html. Drag your page into a browser to see how it looks.
 

Basic CSS
 
 


Now we're going to create a basic CSS that will control the way our page is presented

Make a new blank page in your text program and paste this code

p{
font-family: sans-serif;
font-size: 1em;
color: #333333;
}


Save this as 'my.css' into the same folder as your html file and then drag the html file to the browser - look any different? Nope. This is because we have not yet created the link between our html page and our CSS. In the HTML file, paste this line of code into the <head> . ie

< head>
< title>Page 1</title>
<link rel="stylesheet" type="text/css" href="my.css" />
< /head>

Save your file again and view it in a browser. As you can see, the font face, colour and size of the text inside the <p> tag are now being controlled by your CSS. Have a play around with the 3 lines in the CSS and change the values to see the changes reflected in your HTML page. Now, this may not seem that powerful but imagine you have 500 html pages all getting their styles from the same CSS. If the company changed its logo colours and wanted the website content to reflect these changes it would simply requires changing a few lines in the CSS and the entire site would update.

See the diagram below:
 

Controlling tag attributes
 
 


Of course, its not just the <p> tag that can be controlled. Nearly every HTML tag has attributes that can be controlled by CSS. Change the code in your CSS to

body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
margin:0px;
}
p{
font-family: sans-serif;
font-size: 1em;
color: #333333;
}

a:link {color: #003366}
a:visited {color: #003366}
a:hover {color: #FFCC00}
a:active {color: #003366}

h1{
font-size: 1em;
font-style:bold;
color: #FF0000;
text-transform: uppercase;
}


and the code in your html page to

<html>
<head>
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="my.css" />
</head>
<body>
<h1>this is a heading</h1>
<p>Some content</p>
<p>here's a <a href='http://www.swin.edu.au/design'>link </a></p>
</body>
</html>

Save both files and view the html file in the browser again. As you can see, headings, links, and the body tag can also be controlled with CSS. So can images, tables, lists...you name it.

So, to add a new tag to your CSS you start with the tag you want to control

li{


then add the property follow by a colon then the value and a semi-colon

text-align: left;


add as many property lines as you want then close it off with a curly bracket

}
 
4

Classes
 
 


Another thing you can do with CSS is have 'classes'. For example, say I want an 'alert' class of the p tag that would make the text look like regular p text only red I would have something like

p{
font-family: sans-serif;
font-size: 1em;
color: #333333;
}
p.alert{
color: #FF0000;
}

and my html would like

<p class='alert'>look out! this is an alert</p>


So, the browser would see that this p tag was of the 'alert' class so it would go to the p.alert part of the CSS to get any styles that were defined there (in this case just the colour). It would then go to the p part to get any other styles for the paragraph (in this case, just the font size and family). Lastly, it would look at the body{ part of the CSS to see if there was any other styles that applied to this tag. Test your HTML file in the browser and you will see that the

color: #FF0000;


in the p.alert overrides the

color: #333333;

in the

p{

part.

OK so you can see how you have the display of your <p> controlled by the CSS but you can also have slight variations controlled by p.classes within the CSS. Using the syntax above, only an html <p> tag could be of the 'alert' class. However, if you wanted multiple tags to be alert (ie red) - such as heading, lists etc, you would use the syntax below

.alert{
color: #FF0000;
}

Add the following to your CSS

.alert2{
color: #0000FF;
}


and the following to your HTML page before the </body> tag

<p class='alert2'>I'm an alert2</p>
<h1 class='alert2'>So am I!</h1>


Save both files and view the HTML page in the browser. As you can see, both the <p> tag and the <h1> tag can be of the alert2 class.

OK that's enough to get you started. Go here for heaps of CSS examples.

 

bulletBack


Share

Like this? Click a link below to share it...


Subscribe and Download

Subscribe to the Swinburne Faculty of Design Podcasts

Post a comment

Garbage posts and SPAM will be deleted.

* Name:
* Email: (will not be made public)
* Comment:
* Reply Notification:

Quicklinks

Make an enquiry

Gallery Work

Construction Technology 5



Professioanl Project - Whitewash Applicator for Glasshouses



Major Photography Project



Identity for Performance Group