cascading style sheets css by pavlovic nenad by. 2cascading style sheets presentation contents what...

CCascading ascading SStyle tyle SSheetsheetsCSSCSS

by by

Pavlovic NenadPavlovic Nenad

by by

Pavlovic NenadPavlovic Nenad

22Cascading Style SheetsCascading Style Sheets

Presentation ContentsPresentation Contents

What are CSS? What are CSS? History of CSSHistory of CSS Why CSS?Why CSS? Types of Style SheetsTypes of Style Sheets Style Sheets SyntaxStyle Sheets Syntax Cascading ModelCascading Model Box Formatting ModelBox Formatting Model CSS SyntaxCSS Syntax Inheritance Inheritance Classes, Pseudo Classes & IDsClasses, Pseudo Classes & IDs Groups of elements (DIV & SPAN)Groups of elements (DIV & SPAN) BenefitsBenefits DisadvantagesDisadvantages ConclusionConclusion


What are CSS?What are CSS?

Cascading Style Sheets are formatting Cascading Style Sheets are formatting information that is applied to HTML.information that is applied to HTML.

Cascading Style Sheets enable a Web Cascading Style Sheets enable a Web site's presentation (design) to be separated site's presentation (design) to be separated from its content and structure. from its content and structure.

Using the CSS every existing HTML tag Using the CSS every existing HTML tag (element) can be formatted as we desire.(element) can be formatted as we desire.


HistoryHistory

First version of CSS (CSS1) is forged by W3C First version of CSS (CSS1) is forged by W3C (World Wide Web Consortium) in 1996.(World Wide Web Consortium) in 1996.

It was partially supported by Browsers.It was partially supported by Browsers.

In 1998 CSS2 have been released. In 1998 CSS2 have been released.

Fully supported by Browsers. Fully supported by Browsers.


Types of Style SheetsTypes of Style Sheets

Style sheets can be delivered to an HTML in Style sheets can be delivered to an HTML in three ways:three ways:

InlineInline (add a style to an element):(add a style to an element):

<P style=“font: 13pt verdana”>Text</P><P style=“font: 13pt verdana”>Text</P>

EmbeddedEmbedded (add a style to specific page):(add a style to specific page):<HEAD><HEAD>

<STYLE><STYLE>

P { font: 13pt verdana; }P { font: 13pt verdana; }

</STYLE></STYLE>

</HEAD></HEAD>

LinkedLinked (add an external style definition):(add an external style definition):<HEAD><HEAD>

<LINK rel=“stylesheet” href=“./path/file_name.css” <LINK rel=“stylesheet” href=“./path/file_name.css” type=“txt/css”>type=“txt/css”>

</HEAD></HEAD>


Cascading ModelCascading Model

Global styles defined in theirown document: GLOBAL.CSS

Page-specific (also knownas local) styles defined

within an document(in the HEAD), using the

STYLE element.

Element-specific styles aredefined within the elementdefinition using the STYLE

attribute.

Title

HTML page

PAGE.HTML


Box Formatting ModelBox Formatting Model

Element

Padding

Border

Margin

4th

1st

2nd

3rd


Style Sheet SyntaxStyle Sheet Syntax

Whatever method we use to deliver style to Whatever method we use to deliver style to HTML (inline, embedded or linked), the syntax will HTML (inline, embedded or linked), the syntax will going to be similar in all cases.going to be similar in all cases.

CSS syntax contains of three parts:CSS syntax contains of three parts:

SELECTOR | SELECTOR | PROPERTYPROPERTY | | VALUEVALUE

BODYBODY { { colorcolor: : yellowyellow; }; }


SelectorsSelectors are usually standard HTML are usually standard HTML elements (H1, P, BODY, TABLE, etc.).elements (H1, P, BODY, TABLE, etc.).

PropertiesProperties are names of attributes that are are names of attributes that are used to describe an object (color, text, font-used to describe an object (color, text, font-face, font-size, etc.).face, font-size, etc.).

ValuesValues are “describing” properties(yellow, are “describing” properties(yellow, bold, fixed, Arial, etc.).bold, fixed, Arial, etc.).


Classes, Pseudo Classes, Pseudo ClassesClasses and IDs and IDs

ClassesClasses are the instances of style definitions. are the instances of style definitions.

If we want to brake down our style rules into If we want to brake down our style rules into small very precise peaces, we will use classes.small very precise peaces, we will use classes.

Everything that is not redefined in a class is Everything that is not redefined in a class is inherited from the higher level class or element. inherited from the higher level class or element.

P.highlight {

background-color: yellow;

color: red;

}

P.highlight {

background-color: yellow;

color: red;

}


Pseudo-classes Pseudo-classes are predefined classes are predefined classes that already mean something to the browser. that already mean something to the browser.

They can’t be defined by user, but user They can’t be defined by user, but user can apply values to them!can apply values to them!

A:link A:link A:visited A:visited

{{ {{ color: blue;color: blue; color: red; color: red;}} }}


List of pseudo classes:List of pseudo classes::first-child:first-child

:link (A):link (A)

:visited (A):visited (A)

:hover (A):hover (A)

:active (A):active (A)

:focus (A):focus (A)

:lang :lang

:first-line (P):first-line (P)

:first-letter (P) :first-letter (P)

:before:before

:after:after


IDsIDs are groups of style definitions that can are groups of style definitions that can be applied to any HTML element (tag).be applied to any HTML element (tag).

If ID is applied to an element that is If ID is applied to an element that is already defined in the style sheet, the already defined in the style sheet, the definition will be overridden.definition will be overridden.

IDs are defined as follows:IDs are defined as follows:#important {#important {

font-weight : bold;font-weight : bold;

color : Yellow;color : Yellow;

}}


Advanced page lookAdvanced page look

CSS gives us much more flexibility in layout CSS gives us much more flexibility in layout designing.designing.

The advantage is that we can place “objects” The advantage is that we can place “objects” (words, paragraphs, pictures, lines, etc.) exactly (words, paragraphs, pictures, lines, etc.) exactly where we want on the page (positioning and Z-where we want on the page (positioning and Z-index). index).

Also, we can group elements and then control Also, we can group elements and then control them as a group. For this purpose DIV tag is used.them as a group. For this purpose DIV tag is used.

On the same way we can control parts of text On the same way we can control parts of text which is “bounded” with SPAN tag.which is “bounded” with SPAN tag.


Groups of elements Groups of elements (DIV & SPAN)(DIV & SPAN)

DIVDIV provides means for grouping provides means for grouping elements and assigning attributes to the elements and assigning attributes to the group. It is nested within the BODY!group. It is nested within the BODY!

SPANSPAN encloses text within generic inline encloses text within generic inline element that you can define with style sheet. element that you can define with style sheet. It is nested within any BLOCK element.It is nested within any BLOCK element.


Z-indexZ-index

Z-indexZ-index enables us to position elements enables us to position elements in the third dimension (depth).in the third dimension (depth).

It orders the elements with the lower index It orders the elements with the lower index on the top of elements with higher index.on the top of elements with higher index.

Z = 100

Z = 50

Z=70


Benefits of Using CSSBenefits of Using CSS

Separation of the document from the Separation of the document from the presentation.presentation.

Easier coding and maintenance. Easier coding and maintenance. Site control.Site control.

Consistency (Uniformity). Consistency (Uniformity). All pages in the site looks the same.All pages in the site looks the same.

Rich design and layout.Rich design and layout. Avoidance of tag misuse.Avoidance of tag misuse.

Solves speech synthesizer problemsSolves speech synthesizer problems..


Benefits of Using CSS (2)Benefits of Using CSS (2)

Avoidance of images misuse.Avoidance of images misuse.Increases download time ( a lot! ).Increases download time ( a lot! ).

Text on images is not searchable!!!Text on images is not searchable!!!

CSS allow user to override authors style.CSS allow user to override authors style.Personalization of the page.Personalization of the page.

Auto generated content.Auto generated content.First letter, numbered lists, before and after First letter, numbered lists, before and after elements, etc…elements, etc…


Benefits of Using CSS (3)Benefits of Using CSS (3)

Aural style.Aural style.Define how the text synthesizer will read the Define how the text synthesizer will read the content. content.

Accessibility.Accessibility.PC browsers, mobiles, PDAs, tty terminals, PC browsers, mobiles, PDAs, tty terminals, printers, TVs, users with disabilities, etc…printers, TVs, users with disabilities, etc…

No browser specific requirements, such as No browser specific requirements, such as plug-ins.plug-ins.


Compatibility IssueCompatibility Issue

CSS1 was partially supported by browsers CSS1 was partially supported by browsers Internet Explorer 3, Internet Explorer 4, and Internet Explorer 3, Internet Explorer 4, and Netscape Navigator 4.7.Netscape Navigator 4.7.

CSS2 is fully supported by all new versions of CSS2 is fully supported by all new versions of popular Web browsers like: Internet Explorer 6, popular Web browsers like: Internet Explorer 6, Netscape 6, Opera 5, and Micro Browsers for Netscape 6, Opera 5, and Micro Browsers for Mobiles.Mobiles.

If browser does not support CSS it will display If browser does not support CSS it will display page in HTML formatted form, ignoring the page in HTML formatted form, ignoring the styles. styles.


DisadvantagesDisadvantages

The only disadvantage that can be The only disadvantage that can be assigned to CSS is non-compatibility with assigned to CSS is non-compatibility with all internet browsers.all internet browsers.

Surveys says that today 85% of users are Surveys says that today 85% of users are able to see pages that uses CSS, while able to see pages that uses CSS, while the others are not.the others are not.


ConclusionConclusion

As you can see, CSS can be useful for As you can see, CSS can be useful for everyone, starting from Web designers to everyone, starting from Web designers to the ordinary users. the ordinary users.

The fact is that today’s Web Sites can not The fact is that today’s Web Sites can not be imagined without CSS.be imagined without CSS.


Thank you for participating in Thank you for participating in the presentation the presentation

For any further questions, you may contact me at e-mail: For any further questions, you may contact me at e-mail:

[email protected]@city.academic.gr

cascading style sheets css by pavlovic nenad by. 2cascading style sheets presentation contents what...

Documents

style element

style rules

cascading style sheetsclasses

cascading style sheetshistory

groups of style definitions

external style definition

instances of style definitions

ids classes