Scribd
Upload
44 views

Ascading Tyle Heet

The document introduces CSS (Cascading Style Sheets) which allows separation of document content from document presentation. CSS is used to define styles that specify how HTML elements should be displayed. There are three main ways to insert CSS - external style sheets, internal style sheets, and inline styles. External style sheets define styles in separate CSS files to allow consistent formatting across multiple pages. Common CSS properties for backgrounds include background-color, background-image, background-repeat, background-position, and background-attachment.

Uploaded by

Zhencie Guino Gonzaga
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
44 views

Ascading Tyle Heet

The document introduces CSS (Cascading Style Sheets) which allows separation of document content from document presentation. CSS is used to define styles that specify how HTML elements should be displayed. There are three main ways to insert CSS - external style sheets, internal style sheets, and inline styles. External style sheets define styles in separate CSS files to allow consistent formatting across multiple pages. Common CSS properties for backgrounds include background-color, background-image, background-repeat, background-position, and background-attachment.

Uploaded by

Zhencie Guino Gonzaga
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 30

CSS

Cascading Style Sheet

Introduction to CSS

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like:

<h1>This is a heading</h1> <p>This is a paragraph.</p>

cont.
When tags like <font>, and color attributes were added to the HTML, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

cont.

To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today.

CSS Saves a Lot of Work

CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file.

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

cont.

The selector is normally the HTML element you want to style. (background,p,h1 etc.) Each declaration consists of a property and a value. (color, size, alignment etc.) The property is the style attribute you want to change. Each property has a value.

CSS Example

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

p {color:red;text-align:center;}

cont.
To make the CSS more readable, you can put one declaration on each line, like this:

p { color:red; text-align:center;

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/

cont.
p {

text-align:center; /*This is another comment*/ color:black; font-family:arial;

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

External style sheet Internal style sheet Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

cont.

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension

An example of a style sheet file is shown below:


hr {color:sienna;} p {margin-left:20px;} body
{

background-image:url("images/back40.gif");
}

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

cont.
<head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {
background-image:url("images/back40.gif");

} </style> </head>

Inline Styles

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">

This is a paragraph. </p>

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 background-position

Background Color
The background-color property specifies the background color of an element. The background color of a page is defined in the body selector: body {background-color:#b0c4de;} With CSS, a color is most often specified by:

a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red"

cont.
h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:blue;}

Background Image

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. The background image for a page can be set like this:

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

Background Image - Repeat


By default, the background-image property repeats an image both horizontally and vertically. Body { backgroundimage:url('gradient2.png'); background-repeat:repeat-x; }

background-repeat Properties and values

repeat - The background image will be repeated both vertically and horizontally. This is default repeat-x - The background image will be repeated only horizontally repeat-y - The background image will be repeated only vertically no-repeat - The background-image will not be repeated inherit - Specifies that the setting of the background-repeat property should be inherited from the parent element

Background-position
Sets the starting position of a background image. body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }

cont.
left top left center left bottom right top right center right bottom center top center center center bottom

Background-attachment

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

body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; }

background-attachment Properties

scroll - The background image scrolls with the rest of the page. This is default. fixed - The background image is fixed.

You might also like