Programming PDF – Web Technologies for the CSS presentation

Web Technologies for the presentation
CSS

Web Applications / Web Systems

Juan Pavón Mestras
Dep. Software Engineering and Artificial Intelligence
Facultad de Informática
Universidad Complutense Madrid

Licensed material Creative Commons

CSS

 Cascading Style Sheets

 text with the extension .css
 They define the appearance of the Web pages
 They facilitate the management of large and sophisticated websites

• The CSS sheets are created once and can be shared among several

WEB developers
• For example, corporate style

• To make a style change in the whole site, you just have to

do it in one place: the corresponding CSS sheet

 Versions

 CSS level 1 (1996, revised in 2008) – http://bit.ly/2Ae4ko9
 CSS level 2 (1998), current: 2.1 (2011) – http://www.w3.org / TR / CSS21

• CSS 2.1 Supported by all common browsers

 CSS level 3 (in development) – http://bit.ly/rtYA2N

• Several already defined features (selectors, pseudoclasses and many
properties) are supported by all common browsers ( MS
Internet Explorer is the most delayed, only since version 10.0)

Juan Pavón – UCM 2012-13

CSS

2

CSS and XHTML

 With HTML both content as the presentation is

mixed

 With XHTML + CSS

 XHTML specifies contents and structure

First section

A paragraph of text.

 CCS specifies presentation and format

Juan Pavón – UCM 2012-13

CSS

3

Process of XHTML and CSS in a browser

Content

XHTML

Parser
] HTML

DOM

Tree
DOM

Assembly

Arrangement

Tree

of Formatted
elements

Sheet of
Sheet of
Sheet of
style
style
style
CSS
CSS
CSS

Parser
CSS

Rules
style

Drawn

Screen [19659002] Adapted from:
Tali Garsiel. How browsers work. Behind the scenes of modern web browsers
http://bit.ly/rdGOHt

Juan Pavón – UCM 2012-13

CSS

4

DOM

 Defined by W3C
 Document Object Model

 DOM defines objects and properties of HTML and XML elements, and

methods to access them
• Representation of HTML documents and XML
• API for consulting and manipulating documents (content,

structure, style)

 Objects in a document are organized in a hierarchy

(tree): DOM hierarchy

var element = document.getElementById ("intro");
var header = document.getElemnentByTag ("title");
// …

Juan Pavón – UCM 2012-13

CSS

CSS integration in HTML / XHTML

 The definition of styles for an element can be done:

]  Within the element itself (internal to the element)

• NOT advisable

Bla bla bla

 With an internal style sheet (in the same document)

• With the label