What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
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.
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing just one file!
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>