Introduction to

CASCADING STYLE SHEET

STLYE SHEET
is a set of instructions that tells a browser how to present HTML elements, such as what font to use, what size the paragraph text should be, what color the header text should be, whether or not there should be a background color applied to specific elements, and so on. Each style rule is made up of two parts: 1.) The selector identifies the element affected by the rule, 2.) the definition identifies how the element will be displayed. The definition contains the property and the value of the element.

CASCADING STYLE SHEET

a set of instructions that tells the Web browser how to display different HTML elements. You can use multiple style sheets to customize the display of your Web site for different browsers, different platforms, and different devices.

is

a form of HTML mark-up that provides web designers with greater control over typography and spacing between elements on a page.

WHAT DOES CSS LOOK LIKE?

The basic template for CSS code looks like this: Tag: {Property: value; Property2: value2}
Tag The element that will be affected Property What part of the selector will be affected Value How it will be affected

Notice that CSS makes use of curly brackets { and } instead of < and > .

SIGNIFICANCE OF CSS

The best practice for using cascading style sheets with HTML is to separate the structure of the document from the presentation of the document. This will help to ensure that your Web pages display correctly, whether the Web site is being displayed on an older browser, on a cell phone or other handheld device, or read by a screen reader. This will also help to eliminate excess code, so your Web pages will load faster.

CSS SYNTAX

A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

example

CSS BACKGROUND

CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment


example example example

Sets whether a background image is fixed or scrolls with the rest of the page example

background-position

CSS TEXT PROPERTIES

Color - Sets the color of text Direction - Specifies the text direction/writing direction letter-spacing - Increases or decreases the space between characters in a text line-height - Sets the line height text-align - Specifies the horizontal alignment of text text-decoration - Specifies the decoration added to text text-indent - Specifies the indentation of the first line in a textblock text-shadow - Specifies the shadow effect added to text text-transform - Controls the capitalization of text Unicode-bidi vertical-align - Sets the vertical alignment of an element white-space - Specifies how white-space inside an element is handled word-spacing - Increases or decreases the space between words in a text

CSS FONTS PROPERTIES

Description Sets all the font properties in one declaration

font-family Specifies the font family for text font-size font-style Specifies the font size of text Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-caps font font-weight Specifies the weight of a font

CASCADING STYLE SHEETS CAN BE LOCATED IN THREE DIFFERENT PLACES IN YOUR WEB SITE.

An external, or linked style sheet

example

which you use when you want to apply the same styles consistently across all the pages in your Web site that are linked to it.
example

An embedded style sheet.

which you use when you want to define styles for the current page.
example

An inline style sheet.

which you apply to individual elements on a page.

NOTE:

The three different kinds of style sheet are applied to a Web page in cascading order. The more specific the style rule, the higher it is in the order in which it is applied. Each one has advantages and disadvantages, and you can use all three types in a Web site, making it easier to manage the look and feel of the entire site while also being able to control each individual element down to the letter.

OTHER BENEFITS OF CSS

More control over the display of individual elements on a page. Faster download times. Easier site management.

CASCADING STYLE SHEETS HELP KEEP THE

An H1 tag used to define the element's structure. An external style sheet used to define the look and feel of <h1> tags.

Separating the structure of the HTML document from the presentation of the document means you keep certain HTML elements (H1, H2, and P elements, for example) that control the structure of the document separate from the elements that control the presentation, such as font family, font size, and text color.

Using HTML elements correctly to structure your document also makes it easier to apply styles across the site and ensures that your document will display correctly. By separating the structure from the presentation, you also reduce download times because you dont have FONT and other style elements cluttering your HTML. Once you've planned the structure of your HTML document, you can define the styles you want to apply throughout the site by using the three types of style sheets.

WHY SHOULD I BOTHER USING CSS?

Greater control over layout and typography. CSS provides you as a designer with precise control over the fonts used on your site, including size, letter spacing and text decoration. Site-wide changes become easy. Rather than having a style sheet as part of the HTML code of a page, it is possible to specify the URL of a stylesheet that is to be used when formatting a particular page. This makes it very easy to modify the entire site by simply editing a single file.

WHAT ABOUT BROWSER COMPATIBILITY?

CSS support is provided in Internet Explorer 4+ and Netscape Navigator 4+. However, some annoying browser inconsistencies continue to make life difficult for those deciding to use CSS on their site. It is possible with a little bit of JavaScript to serve up different style-sheets depending on the browser that is being used to view your site. Alternatively, workarounds can be used so that the style-sheet works in both browsers correctly.

FOR MORE KNOWLODGE ABOUT CSS

http://www.w3schools.com/css/default.asp http://www.w3.org/TR/html4/present/styles.html http://www.wdvl.com/Authoring/Style/Sheets/Exa mples/ TNX FOR LISTENING!

EXTERNAL OR LINKED STYLE SHEET

For example, if all of the H1 elements in your Web site are blue, and you decide you want them to be red, you simply open your linked style sheet, change the H1 color value to red, and the changes will apply throughout every page to which you have linked the style sheet. The link from a Web page to a style sheet is included in the document header (between the<head> and </head> tags using the <link> tag: <link rel="stylesheet" type="text/css" href="styles.css">

Your style sheet would include the actual style definitions, such as: h1 {color: red; }
back

EMBEDED STYLE SHEET

To include an embedded style in a Web page, you enclose it in <style> tags. It is also good practice to include comment tags to hide the styles from older browsers that don't support CSS: <style> <!-h1 {color: red; } --> </style>
BACK

INLINE STYLE SHEET

If you apply an inline style directly to an element, affecting everything that is contained within that element. For example, if all of your H1 elements are blue, but there's one that you want to appear red, you'd apply the following inline style rule to that H1 element:

<h1 >Heading</h1>

If you want to change the appearance of only a portion of the content within a single tag (to change just one word within the H1 element, for example), you would use the SPAN element. The code would look like this:

<h1>This heading is blue, but the last word is <span >red</span></h1>

EXAMPLE:
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this: p { color:red; text-align:center; }
back

BACKGROUND COLOR

Sets the background color of an element. body {background-color:#b0c4de;}

With CSS, a color is most often specified by:

BACK

BACKGROUND IMAGE
Sets the background image for an element. The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

body { background-image:url('paper.gif'); }
BACK

BACKGROUND REPEAT
Sets how a background image will be repeated. By default, the background-image property repeats an image both horizontally and vertically.

body { background-image:url('gradient2.png'); background-repeat:repeat-x; background-repeat:no-repeat; }

BACKGROUND POSITION

Sets the starting position of a background image.

body { background-image:url(hundred.jpg'); background-position:right top; }

BACK

TYPOGRAPHY

(from the Greek words (typos) = form and (graphy) = writing) is the art and technique of arranging type. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning). Type design is a closely related craft, which some consider distinct and others a part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. is performed by typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, clerical workers, and anyone else who arranges type for a product. Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of visual designers and lay users. According to David Jury, "Typography is now something everybody does.
BACK