Web Style Sheets Style sheets for the Web Aims An Introduction to CSS describing how elements in a document must be presented on different media types, as paper print, video, audio, Prof. Ing. Andrea Omicini medium for people with disabilities, etc. Ingegneria Due, Università di Bologna a Cesena separating style’ s description from content and its structure andrea.omicini@unibo.it See http://w3c.org/Style/ 2006-2007 Many specifications: CSS1, CSS2, XPath, XSLT, XSL-FO Two languages: CSS & XSL 2 Why two languages? Dynamic HTML HTML pages with dynamic content CSS composed using three technologies can be used with HTML and XML HTML / XHTML but it has its own syntax, and it’ s not general enough CSS to be a transformational language JavaScript / ECMAScript XSL (union of XSLT / XSL-FO / XPath) sharing the DOM it’ s a transformational language Document Object Model e.g., it can be used to transform an XML page in HTML/CSS which describes the conceptual general structure of a featuring an XML syntax DHTML document but it can be used with XML only, not with HTML which is referenced by browsers Indeed, they share the same “formatting model”... which feature their own detailed DOM specifications ...and they can be used together which we have to know and avoid 3 4 AJAX CSS Specifications Asynchronous JavaScript And XML goal: improve interaction between browsers & servers CSS1, CSS2, and above composed using three technologies CSS3 under development a combination of: We focus our work on CSS1 XHTML / HTML & CSS study CSS1 besides tutorials JavaSCript for DOM manipulation see http://www.w3c.org/TR/REC-CSS1 XMLHttpRequest object because questions in the exam will be based on that to exchange data asynchronously with server specification usually, XML for data transfer so you’ll benefit from learning how to quickly search needed information in that document example: changing a portion of a web page according to some user interaction without reloading a whole page 5 6
How to embody CSS in Why “cascading”? (X)HTML Referencing an external CSS document (within <head> ) <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> Because there can be many different styles specified for Specifying the <style> element (within <head> ) the same document <style type="text/css"><!-- in a cascading flow @import url(style.css) a.smalllink, a.medlink, a.biglink { for different reasons font-family: Tahoma, Verdana, “Myriad Web”, Syntax, sans-serif; font-weight: bold; text-decoration: none; white-space: nowrap; } modularity a.smalllink { font-size: 8pt; } a balance between author and reader a.medlink { font-size: 9pt; } a.biglink { font-size: 10pt; } A thing to learn is the priority order of the “cascade” --></style> Specifying the style attribute within a tag <p style="color: green">Let this text be green</p> 7 8 CSS Declarations A CSS stylesheet Declaration It is a text file h1 { font-size: 14pt; } you can create it in the usual ways Groups a new file in a text editor or word processor h1, h2, h3 { font-family: helvetica; } then you save it as plain text h1 { font-weight: bold; font-style: normal; } with .css extension Inheritance It only contains all non-specified properties for an element are CSS declarations inherited by its parent element comments <h1>If the emphasis tag does not specify its font <em>this</em> is Neither prologue nor structure displayed as Helvetica</h1> 9 10 Classes as selectors ID as selectors Classes user defined names to group elements Also the id attribute can be specified for every element by means of the class attribute and used as a style selector Dot notation for class styles using # instead of a dot .smalllink { font-size: 8pt; } #exampleID { font-size: 8pt; } The difference is conceptual rather than syntactic or “generic” class semantic a.smalllink { color: blue; } “regular” class classes group homogeneous elements they make ID is used to define individual characterizations <p class=”smalllink”>Tiny text</p> any ID is unique in an XHTML page to be 8 points, while useful in dynamically generated pages to change a style <a class=”smalllink”>Tiny link</a> to be 8 points and blue 11 12
Contextual selectors Comments Inheritance can be exploited to define nested styles e.g. “emphasis within a level 1 header is green” h1 em { color: green; } /* This is a comment */ “stack” model, without limits (just use common sense) which fits the inheritance model It can be mixed with classes and IDs with no problems 13 14 Pseudo-classes Cascading Anchor pseudo-classes Many declarations can be applied to the same property a:link { color: red; } Resolution algorithm a:visited { color: blue; } a:active { color: green; } 1. find all the declarations and their default inheritance specify the link’ s color, respectively: when the link is values visualized; after the link has been visited; and when the 2. order declaration by importance pointer hovers on the link h1 { color: green ! important; } There are also pseudo-elements as first-line and first- 3. order by source: author > reader > browser letter 4. order by specificity: more specific > less specific have a look by yourself :) 5. order by appearance: the last one wins Pseudo-classes can be combined with CSS classes 15 16 What should we learn Formatting model from our lab activity? As a minimum Two kinds of elements CSS syntax, and interoperation with XHTML in-line CSS fundamentals: fonts, text, lists, colors they do not have a “newline” after and before, it’ s the default for most tags as <span> , <em> , <b> , … Classes, inheritance, cascading block How to manage tables with CSS it’ s as if they are displayed on a line of their own In general, how to format web pages using CSS it’ s the default for headers of all levels, and list elements Syntax is as simple in structure as complex for quantity The DOM property defining this behaviour is called display and details so, it can be changed using a CSS declaration it is better to learn using quick access to knowledge values: inline , block , none sources 17 18
Recommend
More recommend
