Lessons
|
CSS - Cascading Style Sheets
Web developers use Cascading Style Sheets (CSS) to style (change the look of) their webpages.
Although HTML allows Web developers to make changes to the structure, design, and content of a Web page, it is limited in its ability to change the appearance, or style, across one or more Web pages. Cascading Style Sheets (CSS) allow you to specify styles for various Web page elements. You can think of it this way: With HTML you can create the foundation and structure of your web page. With CSS you can change the format or the appearance of that structure. With CSS you can specify the style for an HTML element within a single Web page or throughout an entire Web site. For example, if you want all text paragraphs on a Web page to be indented by five spaces, you can use a style sheet to handle the indenting, rather than coding each paragraph with an indentation. And, if you decided you wanted to change the indent to three spaces, you would change just one style sheet line rather than changing the coding for each paragraph. So you can see that using CSS saves a lot of time and makes it much easier to make style changes. And as we all know, 'time is money'. CSS Syntax
The picture above demonstrates a CSS style. A style is a rule that defines the appearance of a specific Web page element. The example above is a rule that will change the background color of a Web page to blue. The rule tells the browser to give the body tag's background a new value of blue.
Using CSS styles allows you to can change the appearance of a Web page or pages by changing characteristics such as font family, font size, margins, and link specifications, as well as visual elements such as colors and borders. Every CSS rule is made up up 2 parts:
Every CSS Declaration is made up up 2 parts:
3 Ways to Insert CSS
There are three ways of inserting CSS into a page:
Embedded / Internal CSS
Internal CSS is written in the head section of an HTML document. All of the rules are written inside the style tag, which in turn, is written in the head section. External CSS
An external style sheet is a separate CSS file that is linked to an HTML document. Instead of writing the CSS rules in the HTML document itself, they are written in a separate CSS file that contains only CSS rules. There is no HTML in an external style sheet. An external style sheet can be written in any text editor. Your style sheet should be saved with a .css extension. To link an external CSS sheet to a page you write the following link in the head section of the page: <link rel="stylesheet" type="text/css" href="filename.css"> The beauty of this method is that a single external style sheet can be linked to multiple HTML pages. This means that when you create new rules or modify existing ones, you only have to work with one file. The changes that you make in that one file will effect all the linked HTML documents. This saves you time. And as we all know, 'time is money'! Inline CSS
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. Use this method sparingly as you loose some of the advantages of the other methods. (We will not learn this method in our class) |