CSS_final.pptx

(1)

(2)

The Resulting Page

Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse at pede ut purus malesuada dictum. Donec vitae neque non magna aliquam dictum.

• _{Vestibulum et odio et ipsum}

• _{accumsan accumsan. Morbi at} • _{arcu vel elit ultricies porta. Proin}

(5)

(6)

CSS Introduction

•

Cascading Style Sheets (CSS)

– _{Used to describe the presentation of documents} – _{Define sizes, spacing, fonts, colors, layout, etc.} – _{Improve content accessibility}

– _{Improve flexibility}

(7)

CSS Introduction

 _{CSS stands for Cascading Style Sheets}

 _{Styles define how to display HTML elements}  _{Styles are normally stored in Style Sheets}

 _{Styles were added to HTML 4.0 to solve a}

problem

 _{External Style Sheets can save you a lot of work}  _{External Style Sheets are stored in CSS files}

(8)

Cont…

•

CSS can be applied to any XML document

(9)

Multiple Styles Will Cascade into One

• _{Style sheets allow style information to be specified in}

(10)

Cascading Order

Generally speaking we can say that all the styles

will cascade into a new virtual style sheet by

ʺ

the following rules, where number four has the

highest priority:

 _{Browser default}

 _{External style sheet}

(11)

CSS Syntex

The CSS syntax is made up of three parts: a selector, a property and a value:

Selector Property Value

Ex : ‐ selector { property : value }

body { color: black }

(12)

Style Sheets Syntax

•

More then one property, Separate each

property with semicolon

(13)

Grouping

•

Selectors are separated by commas

•

Declarations are separated by semicolons

•

Properties and values are separated by colons

(14)

Class selector

p.right {text-align: right} p.center {text-align: center}

HTML Code

This paragraph will be right-aligned.

</p><p class="center">

(15)

Id Selector

You can also define styles for HTML elements

with the id selector. The id selector is defined as

a #.

(16)

CSS Comments

•

Comments are used to explain your code, and

may help you when you edit the source code

at a later date. A comment will be ignored by

browsers. A CSS comment begins with /* ,

ʺ ʺ

and ends with */ , like this:

ʺ ʺ

(17)

•

Selectors determine which element the rule

applies to:

– _{All elements of specific type (tag)}

– _{Those that match a specific attribute (id, class)}

– _{Elements may be matched depending on how they}

are nested in the document tree (HTML)

•

Examples:

.header a { color: green }

(18)

Cont…

 _{Three primary kinds of selectors are :}

 _{By tag (type selector):}

 _{By element id:}

 _{By element class name (only for HTML): Example}

 _{Selectors can be combined with commas:}

This will match <h1> tags, elements with class link, and element with id top-link

h1 { font-family: verdana,sans-serif; }

#element_id { color: #ff0000; }

.myClass {border: 1px solid red}

(19)

Cont…

•

Pseudo-classes define state

– _:hover_,_:visited_,_:active_,_:lang

•

Pseudo-elements define element "parts" or are

used to generate content

– _:first-line_,_:before_,_:after

a:hover { color: red; }

p:first-line { text-transform: uppercase; } .title:before { content: "»"; }

(20)

Cont…

•

Match relative to element placement:

This will match all

<a>

tags that are inside of

<p>

•

*

– universal selector (avoid or use with care!):

Universal selectors are used to select any element. The above rule will color all HTML elements on a page blue - regardless of their position in the document tree.

Click Here

•

+

selector – used to match “next sibling”:

This will match all siblings with class name

link

that appear immediately after

<img>

tag

p a {text-decoration: underline}

* {color: blue}

(21)

Cont…

• _>_{selector – matches direct child nodes:}

This will match all elements with class error, direct children of <p> tag

• _[ _]_{– matches tag attributes by regular expression:}

This will match all <img> tags with alt attribute containing the word logo

• _{.class1.class2}_{(no space) - matches elements}

with both (all) classes applied at the same time

p > .error {font-size: 8px}

(22)

Values in the CSS Rules

•

Colors are set in RGB format (decimal or hex):

– _Example:_{#a0a6aa = rgb(160, 166, 170)}

– _{Predefined color aliases exist:}_black_,_blue_{, etc.}

•

Numeric values are specified in:

– _{Pixels, ems, e.g.}_12px_,_1.4em

– _{Points, inches, centimeters, millimeters}

• _E.g.10pt , 1in, 1cm, 1mm

– _{Percentages, e.g.}_50%

(23)

Default Browser Styles

•

Browsers have default CSS styles

– _{Used when there is no CSS information or any other}

style information in the document

•

Caution: default styles differ in browsers

– _{E.g. margins, padding and font sizes differ most}

(24)

Linking HTML and CSS

•

HTML (content) and CSS (presentation) can be linked

in three ways:

– _Inline_{: the CSS rules in the}_style_attribute

• _{No selectors are needed}

– _Embedded_{: inside the <head> in a}_<style> _tag – _External_{: CSS rules in separate file (best)}

• _{Usually a file with} .css extension

• _{Linked via}_{<link rel="stylesheet" href=…>}_{tag or}

@import directive in embedded CSS block

•

Using external files is highly recommended

– _{Simplifies the HTML document}

(25)

Cont…

1. Inline Styles: Example

2. Embedded Styles: Example

– _{Embedded in the HTML in the}_<style>_tag:

• _The_<style>_{tag is placed in the}_<head>_{section of the} document

• _type_{attribute specifies the MIME type}

– _{MIME describes the format of the content}

– _{Other MIME types include}_text/html_,_image/gif_, text/javascript …

(26)

External Style Sheet

An external style sheet is ideal when the style is

applied to many pages.

<head>

</head>

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

body {background-image: url("back40.gif")}

(27)

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 by using the <style> tag, like this:

<head>

p {margin-left: 20px}

body {background-image: url("images/back40.gif")} </style>

(28)

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.

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

(29)

Cont…

3. External CSS Styles

– _{Separate pages can all use a shared style sheet}

– _{Only modify a single file to change the styles across}

your entire Web site



link

tag (with a

rel

attribute) :

Example_1

– _{Specifies a relationship between current document}

and another document

– _{link elements should be in the <head>}

(30)

Cont…



@import :

Example_2

,

Example_3

– _{Another way to link external CSS files} – _Example:

– _{Ancient browsers do not recognize @import} <style type="text/css">

@import url("styles.css"); /* same as */

(31)

CSS - Background

• You can set the following background properties of an element −

• _The_{background-color property}_{is used to set the background color of}

an element.

• _The_{background-image property}_{is used to set the background image of}

an element.

• _The_{background-repeat property is used to control the repetition of an}

small image in the background.

1. Use no repeat value for no repetition.

2. Use repeat-y to repeat background image vertically 3. Use repeat-x to repeat background image horizontally

• _The_{background-position} _property_{is used to control the position of an}

image in the background.

• _The_{background-attachment property}_{is used to control the scrolling of}

(32)

(33)

(34)

Background-image

(35)

(36)

(37)

(38)

CSS TEXT

• _{The CSS text properties allow you to control the appearance} of text.

• _{It is possible to change the color of a text, increase or decreas} e the space between characters in a text, align a

(39)

(40)

(41)

CSS font

(42)

(43)

(44)

(45)

CSS border

• _{The CSS border properties allow you to specify}

the style and color of an element's border.

• _{In HTML we use tables to create borders around}

a text, but with the CSS border

(46)

(47)

(48)

Border style

• _{dotted - Defines a dotted border} • _{dashed - Defines a dashed border} • _{solid - Defines a solid border}

• double - Defines a double border

• _{groove - Defines a 3D grooved border. The effect depends on the border-color}

value

• _{ridge - Defines a 3D ridged border. The effect depends on the border-color}

value

• _{inset - Defines a 3D inset border. The effect depends on the border-color value} • _{outset - Defines a 3D outset border. The effect depends on the border-color}

value

• _{none - Defines no border}

(49)

(50)

CSS Margin

• _{The CSS margin properties define the space}

around elements. It is possible to use negative values to overlap content. The top, right,

bottom, and left margin can be

changed independently using separate properties.

• _{A shorthand margin property can also be used to}

(51)

(52)

(53)

CSS padding

•

The CSS padding properties define the

space between the element border and

the

element content.

•

Negative values are not allowed. The top,

(54)

(55)

(56)

CSS list

•

The CSS list properties allow you to place the li

st-item marker, change between different

item markers, or set an image as the

(57)

(58)

(59)

CSS table

•

The CSS table properties allow you to set the

(60)

(61)

html> <head> <style type="text/css"> table.one { table-layout: automatic } table.two { table-layout: fixed } </style> </head> <body>

<table class="one" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000 000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br />

(62)

(63)

CSS Table

<style type="text/css"> table.one { border-collapse: separate; border-spacing: 10px } table.two { border-collapse: separate; border-spacing: 10px 50px }

</style>

<body>

<table class="one" border="1"> <tr> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>Lois</td> <td>Griffin</td> </tr> </table> <br />

(64)

(65)

CSS Dimension

The CSS dimension properties allow you to control the height and width of an element.

(66)

(67)

CSS Pseudo Classes

• _{CSS pseudo classes are used to add special effects to}

some selectors.

The syntax of pseudo-classes:

(68)

(69)

(70)

CSS Image Opacity

• _{To create transparent Image}

<html> <head> <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40) } </style> </head> <body> <h1>Image Transparency</h1>

<img src="logo.jpg" width="150" height="113" onmouseover="this.style.opacity=1;

this.filters.alpha.opacity=100“ onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> </body>

CSS_final.pptx

Table of Contents

Title

The Resulting Page

Title

CSS Introduction

CSS can be applied to any XML document

highest priority:

The CSS syntax is made up of three parts: a selector, a property and a value:

Style Sheets Syntax

Id Selector

browsers. A CSS comment begins with /* ,

Examples:

.header a { color: green }

#element_id { color: #ff0000; }

Pseudo-classes define state

a:hover { color: red; }

Match relative to element placement:

selector – used to match “next sibling”:

p a {text-decoration: underline}

p > .error {font-size: 8px}

Values in the CSS Rules

Caution: default styles differ in browsers

Using external files is highly recommended

External Style Sheet

Inline Styles

3. External CSS Styles

@import :

@import url("styles.css"); /* same as */

CSS - Background

an element.

Background-image

Border style

CSS Margin

CSS padding

item markers, or set an image as the

html> <head> <style type="text/css"> table.one { table-layout: automatic } table.two { table-layout: fixed } </style> </head> <body>

CSS Table

</style>

CSS Dimension

<html> <head> <style type="text/css"> img { opacity:0.4; filter:alpha(opacity=40) } </style> </head> <body> <h1>Image Transparency</h1>