DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-1 LESSON 4 CASCADING STYLE SHEET G H...

Copyright @ Genetic Computer School 2008 4-1

DHTML AND JAVASCRIPT

LESSON 4

CASCADING STYLE SHEET

G H

E F



Cascading Style Sheet, CSS

A set of rules that determine how the

styles are applied to the HTML tags

in your documents.



Three Types Of Style Sheets

Embedded

Inline

Link



Embedded Style

The style properties are included (within the

<style> tags) at the top of the HTML

document. A style assigned to a

particular tag applies to all those tags in

this type of document.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>

<title>Embedded Style</title></head>

<style type=text/css>Write the Style here.

</style>

<body>Here are some texts, those are applied by style.

</body></html>

Example: Embedded Style



Inline Style

The style properties are included

throughout the HTML page. Each HTML

tag receives its own style attributes as

they occur in the page.

The style properties are added to the HTML

tag as the tag is entered.



It is fine for documents in which you need

to apply styles to only one or two

elements, but you wouldn't want to do

all that work when you have a lot of

styles to add.

When You Should Apply Inline Style



The style properties are stored in a separate

file. That file can be linked to any HTML

document using a <link> tag placed within

the <head> tags.

Link Style



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>Link Style</title>

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

</head><body>

Here are some texts, those are applied by style.</body>

</html>

Linked style sheets hold all the style properties in a separate file.

Example: Link Style



Cascading Precedence

1) Inline styles, which appear as attributes within the tag itself, are most important.

2) Embedded styles, which appear at the top of the HTML file, are applied next.

3) Linked styles, which appear in another file altogether, are applied last.

Web browsers give precedence to the style

that appears closest to the tag.



Working With Fonts

font-family

font-size

font-variant

font-weight

short hand property- font



Font-family PropertyA font family is simply a collection of fonts.

Use this property to assign a list of specific and generic font families to any HTML block or element.

Supply a list of specific fonts, separated from one another by commas, and end the list with a generic font that is to be used if none of the specific fonts are available

Example:

font-family: Helvetica, Arial, sans-serif;

If the name of a font family that you want to specify contains embedded spaces, you will need to enclose that family name in quotation marks

Example:

font-family: “New Century Schoolbook”, Baskerville, serif;



Font-size Property

Absolute Font Size

Relative Font Size



Absolute Font Size

xx-small

x-small

small

medium

large

x-large

xx-large.

Define absolute font sizes is to specify a length

value in units.

By using pixels to set font size, the visitors will be

unable to resize the font using the browser

setting in Internet Explorer.



Relative Font Size

It can be defined in three ways:

using the constants larger and smaller

using the relative measurement of ems

using a percentage value



What is the base measurement?In the case of text that is contained directly in the body of a

document, the base measurement is the browser’s default font size.

Example:

The default setting for text in a browser is 12 points

A font-size setting of 1.5em

Produces 18 point type

For text inside other elements, the base measurement used by relative font sizing is the font-size of the element’s parent container, rather than the size of the element’s default font, as you may have expected.



Font-style Property

The font-style property determines whether the

text inside an element is rendered in an italic,

oblique, or roman (or normal) font style.



font-variant property

The font- variant property has only one effect: it determines whether text should be displayed in small-caps format. The only other value this property can take is normal.



font-weight property

Here weight refers to the boldness of the characters. The font-weight property can take two types of values: relative and absolutes. Relative values are bolder or lighter. Absolute values range from 100 (lightest) to 900 (boldest) in 100 units increment, and also include the shortcut names normal (= 400) and bold (=700).



Shorthand property : font

This short hand property allows you to set multiple font-related properties in one CSS declaration, separating the values by spaces from one another and using commas in multiple-value situations.



Color

Use style sheet rules to control the colour of any HTML element that can be displayed in colour.



Elements That Can Be Displayed In Colour

Text

Headings

Page Backgrounds

Background Colour Of Text

Background Colour Of Headings

Borders

Links

Outlines



Methods To Specify Colour

Descriptive colour names

System colour names

RGB decimal values

RGB hexadecimal values

RGB percentage values

color: blue;

color: rgb(0, 0, 255);

color: #0000ff;

color: #00f;

color: rgb(0%, 0%, 100%);



The Selection Of Colours

It becomes an important issue primarily in two situations:

when you have adjacent objects with coloured backgrounds and you want to avoid a clash

when you have coloured text on coloured backgrounds and you want to ensure readability



Important

If you set a foreground colour,

always set a background colour,

and vice versa.



Colouring Alternative Rows in Data Tables

<html>

<head>

.....

<style type="text/css">

.odd { background-color: lightgrey; }

.even{background-color: yellow;}

</style>

....

</head>

<body>

......

<table>

<tr class="odd">

<td>This is 1,1</td>



</tr>

<tr class="even">



Background Images

body {

background-color: white;

color: black;

background-image: url(“money.jpg”);

}



It will appear underneath other content.

Background Image

You should specify an appropriate background colour.

This colour will display while the image is loading, and will

appear for site users who have disabled images in their

browsers.

If you define a graphic as the background for a page, that

graphic will repeat, or tile, itself to fill up the entire

browser viewport. As you scroll through the document,

the image will also scroll along. This is the normal

behaviour of backgrounds.



Background ImageNormal Behaviour

As you scroll through the

document, the image will

also scroll along.



Tiling And Scrolling Characteristics

Use CSS to change both the

tiling and scrolling

characteristics of images.



Fixed Background Image Position

You can instruct the background graphic to remain

in place while other objects that are placed on top

of it, including text, effectively scroll over it.



background-repeat:

no-repeat

stops the background image from tiling.

only one instance of the image will appear in the background.

repeat

is the default value

repeat-x and repeat-y

repeat the image horizontally and vertically respectively.



background-attachment:

Controls whether or not the background image scrolls with

the content.

By default, it is set to scroll

It can also be set to fix, background-attachment: fixed;.



background-position:

The background-position: (1st value)(2nd value) The first value controls the horizontal position and can

be left, center, or right The second value controls the vertical position, which

can be top, center, or bottom.

The default value is left top.

You can use percentage, instead of these keywords, for either value.

Example:background-position:right bottombackground-position: 80% 80%



How Inheritance Works In CSS



Parts Of CSS Style Rule

a selector, which defines the type(s) of HTML

element(s) to which the style rule applies

a series of declarations, consisting of properties and

values, those define the style



Selector

Universal Selector

Element Type Selector

Class Selector

ID Selector

Pseudo-element Selector

Pseudo-class Selector

Descendant Selector

Parent-child Selector

Adjacent Selector

Attribute Selectors



Universal Selector

It matches every element in the document.

Example:

*{color: red;}

All elements in the page are given a text colour of red.



Element Type Selector

It is the most common selector.

It specifies one HTML element type with no qualifiers.

In the absence of other style rules that might apply to the element type provided in the selector, this rule applies to all such elements on the page.

Example:

a{ color: white;

background-color: green;

}

All hyperlinks in the document will appear as white text on a green background.



Class Selector

To apply a style rule to a potential arbitrary group of elements in a web page

Define a class in the style sheet

Identify the HTML elements that belong to the class using the class attribute

Must precede the class name with a period. No space is permitted between the period and the name of the class.



Example:

.special {font-family: Verdana, Helvetica, Arial, sans-serif;}

<h1 class=”special”>A Special Heading</h1>

<p class=”special”>This is a special paragraph.</p>

Example:

p.special {font-family: Verdana, Helvetica, Arial, sans-serif;}

Create the same special class, but this time it applies only to paragraph elements.

Class Selector: Example



ID Selector

Used to target a single HTML element within a page.

Must be defined in the style sheet and included explicitly in

the HTML tag.

Use the # symbol to identify an ID selector in the style sheet,

and the id attribute to give an element an ID.

IDs must be unique within a document.

No two HTML elements in a single document should have the same id.



ID Selector: Example

Example:

#unique {font-size: 70%; }

<h4 id=”unique”> This will be a very tiny headline.</h4>



Pseudo-element And Pseudo-class

They are supported by some older browsers

Their implementations are not complete.

They are unique among the CSS selectors in that

they have no equivalent HTML tag or attribute



Pseudo-element Selector

Example:

p:first-letter{ font-face: serif;

font-size:500%;

float: left;

color: gray;}

A drop-caps effect for the first letter :

The first letter in each paragraph will be five times larger than the usual type used in paragraphs.

CSS specification has defined only three pseudo-

elements: first-letter, first-line and first-child.

To define a pseudo-element for a style rule, precede

the pseudo-element name with a colon.



Pseudo-class SelectorA pseudo-class selector applies to a whole element, but only

under certain condition.

The pseudo-class selector comes into play only when the user

interacts with the affected element.

CSS2 defines hover, active, focus, link, visited and lang.



Descendant Selector

All HTML elements (except the html element) are descendants of

at least one other HTML element.

A descendant selector restricts the applicability of the rule of

elements that are descendants of other elements.

The scope of the descendant selector is determined by reading

the rule from right to left.

Spaces separate the element types.

The descendant relationship need not be an immediate parent-

child connection.

Example:

li em{color: green;}

It will be applied to any text contained in an em, or

emphasis, element only when the emphasized

text is a descendant of a list item.



Parent-child Selector

To apply to element patterns that match a specific

sequence of parent and child elements.

It is a special case of the descendant selector .

It must be related directly to one another in a strict

inheritance sequence.



Adjacent Selector

Adjacency is not related to inheritance.

Adjacency refers to the sequence in which elements appear

in an HTML document.

Adjacent elements are always siblings, but it is their

placement in the document, rather than their inheritance

relationship.

The adjacent selector uses the +sign as its connector.



Adjacent Selector: Example

h1 + h2 {margin-top: 11px;}

Put 11 extra pixels of space between the bottom of an

h1 heading and an h2 heading that followed

immediately.



Attribute Selector

It declares that the rule with which it is associated is

applied only to elements that have a specific attribute

defined, or have that attribute defined with specific

value.



Attribute Selector

There are four levels of attribute matching:

[attribute] matches if the attribute attribute is defined at all for the element(s)

[attribute=”value”] matches only if attribute has a value of value

[attribute~=”value”] matches only if the attribute is defined with a space-separated list of values, one of which exactly matches value.

[attribute|=”value”] matches only if the attribute is defined with a hyphen-separated list of “words” and the first of these words begins with value.



Measurements

There are two types of measurements.

Absolute

Relative



Absolute Measurement

It tells the browser to render the affected content.



Relative Measurement

It instructs the browser to scale a value by some

percentage or multiple, relative to the size of the object

before the scaling take place.

Units are em and percentage.

Both the em and the percentage generate font sizes based

on the inherited or default size of the font for the object to

which they are applied.

ems and percentages are 1:100 in equivalent.



Relative Measurement

[an optional sign] [a number] [a unit of measurement]

[(+ or -)] [(integer or decimal point)] [(em or %)]

No spaces are permitted between the number and the unit

of measurement.



Layout



The display property

It determines how a browser displays an element, whether

it treats it as a block, an inline text fragment, or

something else.



Six Possible Values For The Display Property

block

inline

list-item

None

table-footer-group

table header-group

The default value varies from element to element.



The Box Model

Date post:	17-Jan-2016
Category:	Documents
Upload:	antonia-mitchell
View:	212 times
Download:	0 times

DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-1 LESSON 4 CASCADING STYLE SHEET G H...

Documents