Sérgio Nunes

CSS Lab. Bases de Dados e Aplicações Web MIEIC, FEUP 2010/11 Sérgio Nunes 1 Summary • Quick Overview • The CSS Language • CSS Selectors & Properties • The Box Model • CSS Positioning • A Note on CSS3 2 Quick Overview 3 The Big Picture • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. • Client-side technology used to format the presentation of web documents. Can exist within a HTML document or be referenced by it. 4 HTML + CSS HTML only 5 Original Vision • HTML for content and structure. • Presentation is left to the user allowing local configurations. Each user has its settings. • However, web authors want to control presentation. Browsers introduced tags and attributes. • HTML language "degenerated" to also include presentation markup. <b>...</b> <i>...</i> <font size="x"...>...</font> <blink>...</blink> 6 Problems • Bloated code. No "separation of concerns". • Difficult to redesign. • Difficult to support different devices. • Content formatted to a given form. • Hard coded decoration and layout - bad! 7 Motivation for CSS • Separate structure from presentation. • Different tools for different skills. Content versus Design. • Avoid redundancy. Centralized rules for presentation. Control multiple HTML documents with one CSS file. • Easier support for different devices (e.g. mobile, desktop, print, web). • Simpler maintenance. 8 HTML CSS A CSS B CSS C From "css Zen Garden: The Beauty in CSS Design" http://www.csszengarden.com/ 9 CSS Document A CSS document is a text document containing CSS rules. CSS rules can also be directly included in a HTML document. 10 CSS Specifications • Cascading Style Sheets at CERN (1994). http://www.w3.org/People/howcome/p/cascade.html • CSS 1 published as a W3C Recommendation in 1996. • CSS 2 published as a W3C Recommendation in 1998. • CSS 3 published as W3C Working Draft in 2000. • CSS 2.1 published as W3C Working Draft in 2002. 11 The CSS Language 12 Applying CSS 13 Cascading Style Sheets • Three different levels of styles (cascading): • Inline - element level. • Internal - document level. • External - site level. 14 Inline Styles • HTML elements can be directly styled using the style attribute. <h1 style="color: red;">A Title</h1> <em style="font-weight: bold;">this is important</em> 15 Internal Styles • Style sheets can be embedded into the head element of a HTML document. <head> <style type="text/css"> h1 { CSS color: red; } HTML em { font-weight: bold; } </style> </head> 16 External Styles • Both inline and internal rules cannot be reused across a site. • Using external styles, CSS rules are included in a specific CSS file and linked to HTML documents. <link rel="stylesheet" type="text/css" rel="path/to/file.css"> HTML HTML CSS HTML 17 Priorities • Browser defaults. • External style sheets. • Internal styles. • Inline styles. 18 CSS Syntax 19 CSS Files • A CSS file (style sheet) consists of a list of rules (or statements). • Each rule consists of one or more selectors and a declaration block, enclosed in curly brackets. • Each declaration consists of a property, a colon (:), a value and a semicolon (;). 20 Anatomy of a Rule Selector(s) body { font-family: Verdana, Arial, sans-serif; Properties font-size: 12px; color: grey; } Values 21 Coding Conventions • CSS files can have comments that are ignored by the browser. Useful for documenting or organizing code. /* This is a /* This is a comment */ multiline comment */ • Layout CSS rules in multiple lines for improved readability. Use a single line in special cases. h1 { font-size: 18px; .alert { color: red; } text-align: center; } 22 CSS Selectors 23 CSS Selectors A CSS selector identifies an object on a web page to which CSS declarations are applied. body { div.nav p strong { color: red; color: yellow font-family: Arial; } font-size: 18px; } 24 Type Selectors • HTML Elements as selectors. • Used when you want to affect every instance of a HTML element. h1 { color: red; } p { color: black; } img { border: none; } div { border: 1px solid black; } 25 Class Selectors • How to change a specific instance of an element? For instance, how to style the 2nd paragraph only? • It is possible to define classes in CSS and apply them to HTML elements. A given class can be used multiple times on the same document. .current {} <h2 class="title">...</h2> .title {} <p>...</p> CSS file <p class="current">...</p> <p class="current">...</p> HTML document 26 Using Class Selectors • Class selectors can either be applied to all elements of a given class, or only applied to a specific HTML element of that class. p.current {} .current {} h2.current {} .title {} p.title {} 27 Multiple Classes • A single HTML element may be associated with multiple classes, separated by spaces. .current {} <p class="current">...</p> .note {} <p class="current">...</p> CSS file <p class="current note">...</p> HTML document 28 ID Selectors • ID selectors are similar to class selectors, except that they can only be applied to exactly one element on a page. One ID per document. • ID selectors are defined in CSS with '#', and applied to elements with the 'id' attribute. #active {} p#footer {} <p id="active">...</p> div#footer {} <div id="footer">...</p> CSS file HTML document 29 ID and Class Naming • ID and Class names can contain lowercase letters, uppercase letters, digits, underscores and dashes. Cannot start with digits. .current #Header1 .itemTitle #item-title • Names should define function, not appearance. • Good: header, footer, active, note. • Bad: italic, red, big. 30 Descendent Selectors • Can be used to select an element based on its position within the document's HTML structure, e.g. paragraph inside div 'footer'. a {} p a {} p.current a {} ul li a {} #footer .note em a {} 31 Link Pseudo Class Selectors • Link pseudo class selectors are used to select links in a number of different states. Links have 4 states: • normal — standard, unvisited link. • visited — visited link. • hover — when the cursor is over the link. • active — while the link is being clicked. a:link {} a:visited {} a.note:link {} a:hover {} May be combined with class selectors. a:active {} 32 Pseudo Element Selectors • Two types of pseudo element selectors :first-line :before :first-letter :after • first-line — selects first line of element. • first-letter — selects first letter of element. • before — inserts content before the element selected. • after — inserts content after the element selected. 33 p:first-line { text-transform: uppercase; } Hello world, this is my first HELLO WORLD, THIS IS CSS rule using pseudo my first CSS rule using element selectors. pseudo element selectors. p:first-letter { font-size: 2em; } Hello world, this is my Hello world, this is my second CSS rule using second CSS rule using pseudo element selectors. pseudo element selectors. 34 h1:before { content:"Chapter: "; } Introduction Chapter: Introduction a:after { content:attr(href); } U.Porto U.Porto http://www.up.pt 35 Grouping Selectors • Different selectors may be grouped in a single CSS rule, using commas. ul li { color: red; margin: 5px; } p { color: red; } h1 a { color: red; } .new { color: red; } ul li, p, h1 a { color: red; } ul li { margin: 5px; } 36 Universal Selector • The universal selector matches the name of any element. It selects any single element from the document. * { font-family: Verdana, sans-serif; } * { margin: 0; padding: 0; } 37 Child Selectors • A child selector matches when an element is the direct descendent (child) of some element. p > a {} ul > li {} 38 First Child Selectors • The first child selector matches an element that is the first child of some element. The first child of any parent, not the first child of an element. p:first-child {} p:first-child em {} 39 Adjacent Selectors • Adjacent (sibling) selectors matches an element that immediately follows another element at the same level. strong + em {} Matches em elements that follow strong elements ul + p {} Matches paragraphs that immediately follows lists 40 Attribute Selectors • Attribute selectors matches elements that have specific attributes defined. • Attributes may match in four ways: • [att] — match when attribute att is set. • [att=val] — match when attribute att has value val. [att~=val] — match when attribute att includes • the val keyword among a space separated list. [att|=val] — match when attribute att includes the • val keyword among a dash separated list. 41 h1[title] <h1 title="Portugal">...</h1> <h1 class="some">...</h1> h1[title="Porto"] <h1 title="Porto">...</h1> <h1 title="Portugal">...</h1> h1[title~="Porto"] <h1 title="Porto Portugal">...</h1> <h1 title="Porto-Portugal">...</h1> h1[title|="Porto"] <h1 title="Porto Portugal">...</h1> <h1 title="Porto-Portugal">...</h1> 42 Advices • Don't "over DIV" your page. Keep it simple. • Reuse HTML native elements if adequate. • Don't "over class" your CSS. Use advanced selectors. • Group selectors in common rules. 43 Text Formatting 44 Color Property • The color property sets the foreground color of an element (i.e. text). • The color property can be set by different ways: keyword, RGB code, Hex code. Keyword: RGB code: Hex code: black rgb(100%, 40%, 0%) = rgb(255, 102, 0) #326432 yellow rgb(40%, 20%, 20%) = rgb(102, 51, 51) #0088ff red #000000 blue 45 Text Properties • text-indent: specifies the indentation of the first line of the text in a block. • text-align: describes how inline content of a bloc container is aligned (left, right, center, justify). • text-decoration: decorations added to the text (underline, overline, line-through). • text-transform: controls the capitalization effects of text (capitalize, uppercase, lowercase). 46 Text Properties • letter-spacing: spacing behavior between text characters. • word-spacing: spacing behavior between words. • line-height: minimal height of lines within a block element. • vertical-align: specifies the vertical position of content within a block element. 47 Font Properties • font-family: prioritized list of font family names and/or generic names. • font-style: selects between normal and italic faces within a font family.

Sérgio Nunes

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support