CSS Basics
Cascading Style Sheets are linked with HTML elements
CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.
Simple, styled example web page
CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface.
result in browser:
HTML code:
<!doctype html><br />
<html><br />
<body><br />
<br />
<h1>HTML and CSS</h1><br />
<h2>HTML:</h2><br />
<p>HTML is a markup language for <em>describing</em> web pages.</p><br />
<h2>CSS:</h2><br />
<p>CSS code describes how HTML <span class="red">elements</span> are to be <em>displayed</em>.</p><br />
<br />
</body><br />
</html>
body {<br />
background-color: #B0B0B0;<br />
font-family: Helvetica;<br />
padding: 20px;<br />
}<br /><br />
h1 {<br />
font-size: 60px; <br />
color: white;<br />
}<br /><br />
h2 {<br />
font-size: 30px;<br />
border-top: 1px solid #000;<br />
}<br /><br />
p { margin-bottom: 40px; }<br /><br />
.red { color: #FB0050; }<br />
The CSS Box Model
The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.
CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.
HTML code:
<!doctype html><br />
<html><br />
<body><br />
<br />
<h1>HTML and CSS</h1><br />
<h2>HTML:</h2><br />
<p>HTML is a markup language for <em>describing</em> web pages.</p><br />
<h2 class="red">CSS:</h2><br />
<p>CSS code describes how HTML <span class="blue-box">elements</span> are to be <em>displayed</em>.</p><br />
<br />
</body><br />
</html>
h1, h2, p, em, span {<br />
border: 3px solid black;<br />
padding: 10px;<br />
margin-top: 20px;<br />
} <br />
.red {<br />
color: red;<br />
}<br />
.blue-box {<br />
color: blue;<br />
border: 3px solid blue;<br />
}<br />
You differenciate between so called Block elements and Inline elements. Block elements in this case are "h1", "h2", "p" and they take up the whole width of the browser and are stacked on top of each other. Inline elements flow within the text and are as wide as their content (text) is. Inline elements here are "em" and "span".
The default fot color is black (no extra CSS necessary). In order to make one of the h2 headlines red we need to add a class to the second h2 tag in the HTML. In the CSS the class rule starts with a dot.That way the color red overwrites the default black.
Same thing happens with the "blue-box" class. Since the "blue-box" element is declared to be specifically different (blue border, blue type) it overwrites the default styles (black border, black type).
Margin is the space between each box. Padding defines the space between text and the edge of each box. They can either be applied to all 4 sides or only to one side of an element. In this case we only have a top margin but a padding for all sides.
CSS Floats
In order to make elements to appear side by side you can make them "float". In the example below I wrapped two sections of text in div elements and made them float side by side.
HTML code:
<h1>HTML and CSS</h1><br />
<br />
<div id="section-1"><br />
<h2>HTML:</h2><br />
<p>HTML is a markup language for <em>describing</em> web pages.</p><br />
</div><br />
<br />
<div id="section-2"><br />
<h2 class="red">CSS:</h2><br />
<p>CSS code describes how HTML <span class="blue-box">elements</span> are to be <em>displayed</em>.</p><br />
</div>
CSS code:
#section-1 {<br />
width: 49%;<br />
<span class="pink"> float: left;<br /></span>
border: 3px solid black;<br />
padding: 2%;<br />
margin-top: 2%;<br />
} <br /><br />
#section-2 {<br />
width: 49%;<br />
<span class="pink"> float: right;<br /></span>
border: 3px solid black;<br />
padding: 2%;<br />
margin-top: 2%;<br />
}
How to connect/link HTML and CSS
Option 1: Internal. CSS exists inside the HTML document.
HTML code:
<!doctype html><br />
<html><br />
<br />
<head><br />
<br />
<span class="pink">
<strong><style></strong><br />
body { <br />
background-color: #B0B0B0; <br />
font-family: Helvetica; <br />
padding: 20px;<br />
}<br />
h1 { <br />
font-size: 60px; <br />
color: white; <br />
}<br />
h2 {<br />
font-size: 30px;<br />
border-top: 1px solid #000; <br />
}<br />
p { margin-bottom: 40px; }<br />
.red { color: #FB0050; }<br />
<strong></style></strong></span><br />
<br />
</head><br />
<br />
<body><br />
<br />
<h1>HTML and CSS</h1><br />
<h2>HTML:</h2><br />
<p>HTML is a markup language for <em>describing</em> web pages.</p><br />
<h2>CSS:</h2><br />
<p>CSS code describes how HTML <span class="red">elements</span> are to be <em>displayed</em>.</p><br />
<br />
</body><br />
<br />
</html><br />
Option 2: External. CSS and HTML are separate documents. CSS is linked. Advantage is that one CSS file and style hundreds of HTML pages simultaneously. Keeping the code clear and organized is another reason for separating HTML and CSS since both will have lots of code. This will always be our method for the assignments.
HTML code:
<!doctype html><br />
<html><br />
<br />
<head><br />
<span class="pink">
<strong><link rel="stylesheet" href="styles.css"></strong><br /></span>
</head><br />
<br />
<body><br />
<br />
<h1>HTML and CSS</h1><br />
<h2>HTML:</h2><br />
<p>HTML is a markup language for <em>describing</em> web pages.</p><br />
<h2>CSS:</h2><br />
<p>CSS code describes how HTML <span class="red">elements</span> are to be <em>displayed</em>.</p><br />
<br />
</body><br />
<br />
</html><br />
Reading
Download and read this PDF with an excerpt about CSS Basics from the book "HTML & CSS – design and build websites").