HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)
13 - CSS Introduction
CSS comes from Cascade Style Sheets. It is the language used to format web pages (text, background or layout, etc.).
In other words, HTML structures a document, while CSS formats it. CSS can be applied to single HTML elements, or it can be kept in a separate file and applied to elements throughout a document. Files that hold CSS are called “style sheets” and use the .css extension. Unlike HTML, CSS uses rules instead of tags.
CSS code can be written in three ways: inline, internal, external.
1. Inline - directly into the HTML tag
<p style="color: red">
2. The <style> element nested in the <head> element
<style>
h1 {
font-family: 'Segoe UI';
color: #808080;
}
</style>
3. The <link> element and a separate CSS file
<link href="StyleSheet.css” rel="stylesheet" type="text/css">
Placing CSS in a separate file has a lot of advantages:
- A style change can apply to an entire document
- Teams working on Web projects can separate responsibilities
CSS files are linked to HTML files using the <link> element. The href attribute points to the location of the CSS file. It’s extremely important that the file name and location are correct or none of the style will be applied. The relattribute should be set as “stylesheet”, while the type attribute should be set as “text/css”.
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link href="example.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph</p>
</body>
</html>
In a second file, in the same folder as the .html source; in the file named example.css we have:
h1 {
font-size: 20px;
color: green;
font-style: italic;
}
The index.htmlfile in a Web browser should look like the below picture:
