css

30
CSS (Cascading Style Sheets)

Upload: venkatachalam84

Post on 27-Jan-2015

3.347 views

Category:

Documents


0 download

DESCRIPTION

Introduction to css

TRANSCRIPT

Page 1: CSS

CSS (Cascading Style Sheets)

Page 2: CSS

Already Know

Before you continue you should have a basic understanding of the following:

HTML / XHTML

Page 3: CSS

CSS Introduction

Styles define how to display HTML elements

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

Page 4: CSS

Styles Solved a Big Problem

Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem,created CSS.

All formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

Page 5: CSS

CSS Saves a Lot of Work!

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!

Page 6: CSS

CSS Syntax

h1{color:red;font-size:12px;}

h1=selector

The selector is normally the HTML element you want to style

Each declaration consists of a property and a value

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

Page 7: CSS

CSS Example

<html><head><style type="text/css">p{color:red;text-align:center;} </style></head><body><p>Hello World!</p></body></html>

Page 8: CSS

CSS ID

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#"

Page 9: CSS

Example

<html><head><style type="text/css">#para1{text-align:center;color:red;} </style></head><body><p id="para1">Hello World!</p></body></html>

Page 10: CSS

CSS Class

The class selector is used to specify a style for a group of elements.

Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

Page 11: CSS

Example

<html><head><style type="text/css">.center{text-align:center;}</style></head><body><h1 class="center">Center-aligned heading</h1><p class="center">Center-aligned paragraph.</p> </body></html>

Page 12: CSS

Three Ways to Insert CSS

External style sheet

Internal style sheet

Inline style

Page 13: CSS

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

Page 14: CSS

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

Page 15: CSS

Inline Styles

To use inline styles you use the style attribute in the relevant tag.

The style attribute can contain any CSS property

Page 16: CSS

CSS Styling

Styling Backgrounds

Styling Text

Styling Fonts

Styling Links

Styling Lists

Styling Tables

Page 17: CSS

Styling Backgrounds

CSS properties used for background effects:

background-color

background-image

background-repeat

background-attachment

background-position

Page 18: CSS

Styling Text

Text Color

Text Alignment

Text Decoration

Text Transformation

Page 19: CSS

Styling Fonts

Font Family

Font Style

Font Size

Font-weight

Page 20: CSS

Styling Lists

Set different list item markers for ordered lists

Set different list item markers for unordered lists

Page 21: CSS

Styling Tables

Table Borders

Table Width and Height

Table Text Alignment

Table Padding

Table Color

Page 22: CSS

The CSS Box Model

Content

Border

Outline

Margin

Padding

Page 23: CSS

Content

The content of the box, where text and images appear

Page 24: CSS

CSS Border

A border that lies around the padding and content.

Border Style

Border Width

Border Color

Border - Individual sides

Page 25: CSS

CSS Outlines

An outline is a line that is drawn around elements, outside the border edge

The outline properties specifies the style, color, and width of an outline.

Page 26: CSS

CSS Margin

Clears an area around the border.

The margin does not have a background color

The top, right, bottom, and left margin can be changed independently using separate properties.

Page 27: CSS

CSS Padding

The padding clears an area around the content (inside the border) of an element.

The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties.

Page 28: CSS

Grouping Selectors

To minimize the code, you can group selectors.

Separate each selector with a comma

Page 29: CSS

Example

h1,h2,p

{

color:green;

}

Page 30: CSS

Thank You

Presented by P.Venkatachalam