Cascading Style Sheets(final)

8/7/2019 Cascading Style Sheets(final)

1/18


2/18

Allow you to control the layout and look of yourpage easily

Styles define how to display HTML elements Style web pages written in a markup language

like HTML, XHTML etc. Allows the same markup page to be presented

in different styles for different rendering

methods(on-screen, in print etc.) Specifies a priority scheme to determine whichstyle rules apply if more than one rule matchesagainst a particular element


3/18

The basic CSS syntax is made up of following

three parts:

Selector Property

Value

For ex:


4/18

Three ways of inserting a style sheet:

Inline Style Sheet

(inside the HTML document, style on a singleelement, specified using the style attribute)

Embedded Style Sheet(Internal Style Sheet)

(blocks of CSS information inside the HTML itself) External Style Sheet

(separate CSS file referenced from the document)


5/18

Page Level CSS

this requires the style sheet code to be embedded in a web page

Site Level CSS

somewhere in the website a single page is stored, usually with the

extension .css, containing style definitions: for example

Web Level CSS an extension of Site Level CSS in which the web page is stored

somewhere else on the Web and the link includes a complete URL:for instance


6/18

What style will be used when there is more than onestyle specified for an HTML element?

All style will cascade into a new virtual style sheetby the following rules, where no. 4 has highestpriority:

1. Browser default (lowest priority)

2. External Style Sheet3. Internal Style Sheet

4. Inline Style Sheet (highest priority)


7/18

If some properties have been set for the sameselector in different style sheets, the values will be

inherited from the more specific style sheet. For ex:, an external style sheet has these properties

for the h3 selector:

H3

{Color:red;Text-align:left;Font-size:8pt;}


8/18

And an internal style sheet has these properties forh3 selector:

If the page with the internal style sheet also links tothe external style sheet the properties for h3selector will be:

H3{Text-align:right;Font-size:20pt;}


9/18

The color is inherited from the external stylesheet and the text-alignment and the font-

size is replaced by the internal style sheet.

Color:red;Text-align:right;

Font-size:20pt;


10/18

The fl at r erty ena les y t eter ine here t siti n anelement relative t the ther element n the a e.

When y se the fl at r erty, ther elements ill simply rap ar ndtheelement y applied the fl at t .

r example:

CSSfloat

If your browser supports the CSS float Property, this text

will be flowing around the heading. If this does not seem to work, it could

be a browser compatibility thing...


11/18

It is directly responsible for the layout of the website. It determines how a particular element is positioned on the

site. If the positioning property is not used properly, the websites

layout can become rather messy and crippled.

Relative PositioningAbsolute Positioning Fixed Positioning Static Positioning


12/18

defined by the top, bottom, left and right CSS properties determine how much an element will shift in relation to its natural position

these four additional properties have default value of 0. they can accept both positive and negative values.

this is a paragraph having no style

this is a paragraph having relativepositioning

This is a paragraph having relativepositioning


13/18

element ill epositioned a solutely it ill not affect other elements, and it ill epositioned according to its

containing lock if a solutepositioning is used, topor ottom, left or right, and idth andheightshould eused as ell.

odyp>This is a paragraphhavingno style

Thisis a paragraphhaving a solutepositioning

xyza c


14/18

a subcategory of Absolute Positioning if an element has this type of position assigned, its viewport is the same as its

containing block. on the computer screen, an element using a fixed CSS positioning will not move

if a website is scrolled.


15/18

Media Type Description

all For all media type device.

aural For speech synthesizers.

braille For Braille tactile feedback devices.

embossed For paged Braille printers.

handheld For handheld devices.

print For printed versions and print preview onthe screen.

projection For projected presentations such as

projectors and transparencies.

screen Computer screens.

tty Media using a fixed-pitch character grid,such as teletypes, terminals, or portable

devices with limited display capabilities.

Tv Television-type devices.


16/18

There are two methods for creating separate stylesdepending on the media type:

Use the @media rule. For example:

Use the media attribute when linking to an external stylesheet. For example:

@media print{

p{font-family: Georgia, times, serif}}


17/18

Advantages: CSS saves times

(CSS automatically apply the specified styles whenever that elementoccurs)

Pages load faster(less code means faster download times)

Easy maintenance(to change the style of an element, you only have to make an edit in one

place)

Superior styles to HTML(CSS has a much wider array of attributes than HTML)

Disadvantages: Browser compatibility

Advantages and Disadvantages


18/18

The if statement in CSS is placed within an HTML commentconstruct.

It is used to identify the browser version for Internet Explorer, andload various parts of the style sheet based on that parameter.

The constructs only works with IE because the browser IE is theonly one that interprets HTML comments instead of ignoringthem entirely. Other browsers, on the other hand, do not interpretcomments at all.

The notation is similar to standard if statement, asdemonstrated in the following example:

Thisis Internet Explorer

Cascading Style Sheets(final)

Documents