Cascading Style Sheets (CSS), is a new feature being added ...



CSS Notes

Cascading Style Sheets (CSS), is a new feature being added to HTML that allows Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. CSS was developed by the World Wide Web Consortium (W3C). Started in 1996 since then it has been used more often.

• It is a simple styling language which allows attaching style to HTML elements

• Purpose: separate style (presentation)

Information from content

• Used to specify styles such as fonts, background colors

Basic syntax Rules of CSS

H1 {color: blue}

A rule that sets h1 elements color to be blue

Rule consists two parts

• Selector-that comes before the left curly brace. Selector is a link between the HTML document and the style. It shows what element is being affected by the declaration.

• Declaration –is the other part of the rule that sets what the style effect will be.

*declaration has two parts separated by colon

-Property- part that comes before the colon

-Value-part that come after the colon

[pic]

The rule in CSS include selector, property, and value separated by curly braces and colon to make it easier for the browsers to identify which is selector, property, and value.

Repeated lines of CSS Rules for different selectors applying same style rules

H1 {color: blue}

H2 {color: blue}

H3 {color: blue}

Shortening CSS code by grouping the selectors together and apply only one declaration because they have same color.

H1, H2, H3 {color: blue} the outcome of this rule will be exactly same as above.

If you have

H1 {color: yellow}

H1 {text-align: center}

You can put it together in one brace like this for same output as above

H1 {

Color: yellow;

Text-align: center;

}

Background colors

body {background: yellow; color: green}

H1, p {background: white; color: blue}

P B,UL {color: red}

The above example shows that if you want to make the h1, p element in your html document to have different color than the rest of the text, you can give it different color.

And the last line shows that all the texts in the paragraph which are in bold (B) and unordered list UL will be displayed in red color.

Setting colors for links

a: link {color: blue; text-decoration: none}

a: visited {color: red}

a: active {color: green}

a: hover {color: yellow}

The above CSS rules show how to style a link, by placing this code inside the ---the above code goes here---, the link colors will be changed as requested.

Linking CSS to the HTML document

There are several ways you can link CSS to a HTML document

• Inline linking example

paragraph one

Inline is inflexible and takes too much of your time because you are spending allots of time writing code in each element in the html document and it is not well organized because you are mixing your code with the presentation

Internal linking

• Apply by using style element. –putting style inside the head tag of html document.

Example of style element

h1, h2{color: red}

Header one

Header two

The above outcome will be both h1, h2 element will be displayed in red color

Class attribute

Class attributes are used to specify style class that belongs to some elements.

Example of class attribute syntax is

.call {color: blue; Background: yellow}

p.warn {font-weight: bolder; color: red; background: white}

Header one

Paragraph one

Paragraph

In this example the call class applies to any element in the html code

But the warn class only applies to the p element in the html code

If more elements in the html document have same style, class is appropriate method to use.

Linking to an External style sheet

Here is a external style sheet code file that is ready to be link with html documents

TestStyle.css

h1 {

font-family: Arial;

font-size: 16pt;

color: red}

h2 {

font-family: Verdana;

font-size: 14pt;

font-weight: bold;

color: green }

h3 {

font-family: Century ;

font-size: 12pt;

text-decoration: underline;

color: blue }

p (font-style:Italic}

This is html code where the TestStyle.css is being linked

Header one

Paragraph one

Header two

Paragraph two

Header three

Paragraph three

The above link will result the h1, in red, h2, green, h3, in blue, and p element in italic style. Notice that I only specify the p element once but it will apply for all the p elements in the html document.

.

Browser and CSS

Most browsers support CSS some don’t

For instance,

• Microsoft internet Explorer 4(IE4), Netscape Navigator4 (NS4) and Opera 3.5(O3.5). support CSS

• Some browsers such as Netscape’s Navigator 1 and Microsoft Internet Explorer2 don’t support CSS. The browesers which don’t support CSS will ignore the CSS style but they will print out the contents of the style on the web page which is not needed. So to prevent this you could put CSS style inside html comments like this

Advantages of CSS

• Web sites pages will load faster because of the reduced redundant coding from each page.

• You can change colors, fonts, and more on all of your pages by editing only one CSS page.

• Easier to update web site designs. Editing the CSS is much easier than modifying the whole html document.

• More control over your web page design

• Structured content in your web documents and well organized because you have separated the style from you presentation.

• Share style sheets across multiple documents

Or entire Web site

• Reduce design/development time

Disadvantages of CSS

• Not all browsers support it, it could get complicated if you let it

Conclusions

• CSS improves the look of your pages

• Reduce coding time because you are specifying one class or element that will change the style of many of your web pages.

• I Recommend it for you to use if you are not already using it because it organizes your web pages neat and look nice

/* this is a comment */ this is how you can use to write comments in CSS

Source













................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download