What is CSS?
CSS is short for Cascading Style Sheets
, and is the preferred way for setting the look and feel of a website.
The style sheets define the colour, size and position of text and other HTML tags, while the HTML files define the content and how it is organised. Separating them allows you to change the colour scheme without having to rewrite your entire web site.
The cascading means that a style applied to a parent element will also apply to all children elements within the parent. For example, setting the colour of body text will mean all headings and paragraphs within the body will also be the same colour.
Specifying and Using Styles
There are three main ways of including a style sheet for a web page or site:
- Setting the
style="?"attribute of a tag, called inline styles - Using the
<style>tag within the HTML header tag - Creating and linking to an external CSS file
Basic style sheets usually modify the appearance of html tags such as <body> and <p>. When using CSS files or style sheets within the header, we can also define classes of styles and apply them to any element using the class="?" attribute, but this is beyond the scope of this simple guide.
Inline Styles
Styles defined inline in HTML will only apply to the tag they are added to. Note: colours can be specified as either a CSS colour name or hex colour code.
<p style="color:red;">Some red text</p>Within the HTML header
A style defined in the header will apply to the whole page. The example below will make all h1 tags in your page show the heading in red.
<head>
<style type="text/css">
h1 {
color: red;
}
</style>
</head>
External CSS file
Like HTML files, CSS files are also plain text, and usually have a .css file extension. An example of a CSS file name style.css can be seen below.
body {
background-color: beige;
color: #000080;
}
h1 {
color: red;
}The file can then be included using the <link ... > tag in the HTML header.
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style">
</head>
|
Next