css_.pptx

Table of Contents

•

What is CSS?

•

Styling with Cascading Style sheets (CSS)

•

Selectors and style definitions

•

Linking HTML and CSS

CSS: A New Philosophy

•

Separate content from presentation!

Title

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

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}

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}

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}

Cont…

•

CSS can be applied to any XML document

Multiple Styles Will Cascade into One

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

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}

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 }

Style Sheets Syntax

•

More then one property, Separate each

property with semicolon

Grouping

•

Selectors are separated by commas

•

Declarations are separated by semicolons

•

Properties and values are separated by colons

Class selector

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

HTML Code

<p class="right">

This paragraph will be right-aligned.

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

Id Selector

You can also define styles for HTML elements

with the id selector. The id selector is defined as

a #.

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:

ʺ ʺ

•

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 }

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}

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: "»"; }

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}

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}

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%}

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}

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}

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 …

External Style Sheet

An external style sheet is ideal when the style is

applied to many pages.

<head>

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

</head>

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

body {background-image: url("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 by using the <style> tag, like this:

<head>

<style type="text/css"> hr {color: sienna}

p {margin-left: 20px}

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

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

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>}

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 */

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}

Background-image

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

CSS font

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

Border style

• _{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}

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}

CSS padding

•

The CSS padding properties define the

space between the element border and

the

element content.

•

Negative values are not allowed. The top,