Structure of HTML
The "Markup" part of HTML - need to tell the browser what is what on the page.
Tags!
2 possible formats:
<p>I am a paragraph!</p>
<br/>
Basics
All HTML files start with a declaration of being an HTML file:
<!DOCTYPE html>
All contents will be inside an <html> tag
<html>
</html>
2 parts: directions (head) and content (body).
<html>
<head>
</head>
<body>
</body>
</html>
Head Contents
<head> tags contain general info the browser should know about your webpage:
Title: top of browser window/tab (<title> tag)
<title>Website Creation</title>
Additional files to use, i.e. stylesheets (will see with CSS!)
<link rel="stylesheet" href="style.css" />
Body
Rule of thumb: everything needs to be enclosed in tags
(good practice and allows for styling).
<p>I'm a little teapot, short and stout.</p> // paragraph
...little teapot, <br /> short and stout... // line-break
<h1>Random Poetry</h1> // header
...for good teas, look <a>here</a> // link
<img /> // image
<div>I'll be styled nicely soon!</div> // styling
Tag attributes
What if we want to get more specific?
All tags allow for attributes that modify tag properties.
<a href="http://wikipedia.org">Wikipedia</a>
<img src="https://www.google.com/images/srpr/logo4w.png" />
Always of the form name="value"
Since most of your styling should be done in a separate, CSS, file, the only href, id, class, src tags should be used.
class & id Tags
Special tags that give an ID and a class to an element (surprise!)
- At most 1 element per id!
- Any number of elements per class.
Both used for styling.
<p id="teapot" class="poem">I am a little teapot, <br /> short
and stout.</p>
Pro tip: to link to a section with the ID "idName" on your webpage directly, add #idName to the end of the URL!
CSS
Stands for Cascading Style Sheets
Saved with a .css suffix.
Just like HTML, can be edited with anything that allows plain-text editing. Your HTML editor should work well.
Remember to use plain-text!
Linking CSS
In order for an HTML file to use a CSS file, need to link in the head of the HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
Remember to have the CSS and HTML in the same folder or to fix the path accordingly!
Structure of CSS
CSS is centered around the elements that are being styled.
Format:
element{
property : value ;
different-property: 42;
}
another{
property: something;
}
HTML has triangle brackets, CSS has figure brackets.
HTML has equality sign and quotes, CSS has colon.
What can we style?
Note the different prefixes!
- Elements of particular type (paragraphs, headers)
p{
font-size: 18px;
}
ID's
#teapot{
background-color: yellow;
}
Classes
.poem{
border: 1px black solid;
}
Bit more space, please!
Each element is like a "box."
Use margin to separate the block from things outside
Use padding to move contents away from edges of block
Margin & Padding Example
There are several ways to declare margin / padding:
.poem{
padding: 20px 10px 5px 30px; // top right bottom left
margin: 10px 5px; // top/bottom right/left
}
Goes in a clock-wise direction!
h2{
padding: 11px; // 11px in all directions
margin-left: 3px;
margin-bottom: 0;
}
Use whichever way makes more sense.
But other properties?
Possible to style whatever comes to your mind.
For a good reference, look at:
I want to be specific!
Possible to nest CSS selectors: for example, want to style paragraphs only in a specific div.
#comments p{
font-style: italic;
}
I want to be more specific!
Pseudo-selectors: be more picky about what you want to style.
Useful when there is a logical structure to the styling and you find yourself repeatedly styling similar things.
.poem:first-letter{
color: red;
}
a:hover{
font-weight: bold;
}
Fancy, may be easier to use with jQuery.