HTML builds the structure (the skeleton).
CSS adds the style (the clothes).
1. HTML & Inline Styling
The Skeleton
Every webpage needs this setup.
<html>
<head>
<title>My Site</title>
</head>
<body>
<!-- Content goes here -->
<h1>Big Heading</h1>
<p>Some text...</p>
</body>
</html>
<head>
<title>My Site</title>
</head>
<body>
<!-- Content goes here -->
<h1>Big Heading</h1>
<p>Some text...</p>
</body>
</html>
Common Tags
Text
<h1>Big Title</h1>
<h2>Subtitle</h2>
<p>Paragraph</p>
Media & Links
<img src="cat.jpg">
<a href="page2.html">Link</a>
Lists
<ul> (Bulleted List)
<ol> (Numbered List)
<li>Item</li>
Method 1: Inline CSS
Style a single element directly.
Rule: Add the
style="" attribute inside the tag.
<h1 style="color:red;">
I am Red!
</h1>
I am Red!
</h1>
<p style="text-align:center;">
I am in the middle.
</p>
I am in the middle.
</p>
Good for quick fixes, but gets messy if you have lots of code!
2. Internal CSS & Debugging
Method 2: Internal CSS
Style ALL elements of one type at once. Much cleaner!
Rule: Use
<style> tags inside the <head> section.
<head>
<style>
/* Styles all Paragraphs */
p {
color: blue;
font-family: Arial;
}
/* Styles the Body */
body {
background-color: yellow;
}
</style>
</head>
<style>
/* Styles all Paragraphs */
p {
color: blue;
font-family: Arial;
}
/* Styles the Body */
body {
background-color: yellow;
}
</style>
</head>
The Big 4 Properties
1
Text Colour
color: red;
Note: US spelling (no 'u')!
2
Background
background-color: black;
3
Alignment
text-align: center;
Options: left, right, center.
4
Font
font-family: Verdana;
Debugging Zone
1. American Spelling
Did you write colour or centre?
✓ color, center
2. Punctuation
Every CSS rule needs a colon : in the middle and a semi-colon ; at the end.
color : red ;
3. Closing Tags
Did you close your tags?
<h1> Title </h1>