Css & Html

CSS & HTML
An Introduction to

What is HTML?
Hyper Text MarkupLanguage
Allows browsers to show a webpage
Building blocks of websites
Contained within an HTML file
Concerned with the structure of a website instead of style
Consists of open tags and close tags i.e.
<div></div> - Containers (boxes)
<p></p> - Paragraph

HTML - Example
<html>
<head>
<title>HTML & CSSExample</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=“container”>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</div>
</body>
</html>

What is CSS
Cascading Style Sheet
Allows browsers to show the right style of a webpage – controls how HTML elements are displayed
Contained within a CSS file but can also be within the HTML file (however big file size)
Concerned with fonts, colours, borders, text decoration as well as some structural influences
Consists of Class’s and ID’s
Class (repeated): .red{ color:#CC0000}
ID (unique): #nav{ width:700px; height: 50px;}

CSS -Example
body{ background-color:#333333; font-family:arial;}
h1{ color:#00AFB9; font-size:24pt; font-family: arial;}
#container{ width:400px; hieght:300px; background-color:#666666; color:#FFFFFF; border:#999 solid 6px; padding:20px;}

Put it all together....
Example Webpage