| HTML5 | Intro CSS | CSS/H5: Ref | CSS/H5: Tutor | JS: Ref | JS: Tutor | Assignments |
Web Design I taught you HTML 4 which for the most part is the same as HTML5, what's new to learn
now is how to use CSS. There are 3 ways to put CSS in your webpage:
External Style Sheet (in a seperate file i.e style1.css)
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<p>
This HTML was styled using an External Style Sheet
</p>
</body>
</html>
Internal Style Sheet (in the head tag in the HTML document)
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
<style>
#name1{ color: blue; font-size: 25px; font-family: arial; }
.name2{ color: blue; font-size: 25px; font-family: arial; }
p{ color: blue; font-size: 25px; font-family: arial; }
</style>
</head>
<body>
<p>
This HTML was styled using an Internal Style Sheet - Element(Type) Selector
</p>
<div id=name1>
This HTML was styled using an Internal Style Sheet - Id Selector
</div>
<span class=name2>
This HTML was styled using an Internal Style Sheet - Class Selector
</span>
</body>
</html>
Inline Style
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<p style="color:blue; font-size:25px; font-family: arial;">
This HTML was styled using Inline Style Sheet
</p>
</body>
</html>