css part i

Cascading Style Cascading Style Sheets (CSS) – Part ISheets (CSS) – Part I

Svetlin NakovSvetlin Nakov

Telerik Mobile Development CourseTelerik Mobile Development Coursemobiledevcourse.telerimobiledevcourse.telerik.comk.com

Technical TrainerTechnical Trainerhttp://http://www.nakov.com www.nakov.com

Table of Contents (Part Table of Contents (Part I)I)

What is CSS?What is CSS? Styling with Cascading Styling with Cascading

Stylesheets (CSS)Stylesheets (CSS) Selectors and style definitionsSelectors and style definitions Linking HTML and CSSLinking HTML and CSS Fonts, Backgrounds, BordersFonts, Backgrounds, Borders

2

CSS: A New PhilosophyCSS: A New Philosophy Separate content from Separate content from

presentation!presentation!

3

TitleTitle

Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetuer amet, consectetuer adipiscing elit. adipiscing elit. Suspendisse at pede ut Suspendisse at pede ut purus malesuada dictum. purus malesuada dictum. Donec vitae neque non Donec vitae neque non magna aliquam dictum.magna aliquam dictum.

• Vestibulum et odio et Vestibulum et odio et ipsumipsum

• accumsan accumsan. accumsan accumsan. Morbi atMorbi at

• arcu vel elit ultricies arcu vel elit ultricies porta. Proinporta. Proin

tortor purus, luctus non, tortor purus, luctus non, aliquam nec, interdum aliquam nec, interdum vel, mi. Sed nec quam vel, mi. Sed nec quam nec odio lacinia molestie. nec odio lacinia molestie. Praesent augue tortor, Praesent augue tortor, convallis eget, euismod convallis eget, euismod nonummy, lacinia ut, nonummy, lacinia ut, risus. risus.

BoldBold

ItalicsItalics

IndentIndent

Content Content (HTML document)(HTML document)

PresentationPresentation(CSS Document)(CSS Document)

The Resulting PageThe Resulting Page

4

TitleTitle

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. consectetuer adipiscing elit. Suspendisse at pede ut Suspendisse at pede ut purus malesuada dictum. purus malesuada dictum. Donec vitae neque non Donec vitae neque non magna aliquam dictum.magna aliquam dictum.

• Vestibulum et odio et Vestibulum et odio et ipsumipsum

• accumsan accumsan. accumsan accumsan. Morbi atMorbi at

• arcu vel elit ultricies arcu vel elit ultricies porta. Proinporta. Proin

Tortor purus, luctus non, Tortor purus, luctus non, aliquam nec, interdum vel, aliquam nec, interdum vel, mi. Sed nec quam nec odio mi. Sed nec quam nec odio lacinia molestie. Praesent lacinia molestie. Praesent augue tortor, convallis eget, augue tortor, convallis eget, euismod nonummy, lacinia euismod nonummy, lacinia ut, risus. ut, risus.

CSS IntroCSS IntroStyling with Cascading Styling with Cascading

StylesheetsStylesheets

CSS IntroductionCSS Introduction Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)

Used to describe the presentation of Used to describe the presentation of documentsdocuments

Define sizes, spacing, fonts, colors, layout, Define sizes, spacing, fonts, colors, layout, etc.etc.

Improve content accessibilityImprove content accessibility

Improve flexibilityImprove flexibility

Designed to separate presentation from Designed to separate presentation from contentcontent

Due to CSS, all HTML presentation tags and Due to CSS, all HTML presentation tags and attributes are deprecated, e.g. attributes are deprecated, e.g. fontfont, , centercenter, , etc.etc. 6

CSS Introduction (2)CSS Introduction (2) CSS can be applied to any XML CSS can be applied to any XML

documentdocument Not just to HTML / XHTMLNot just to HTML / XHTML

CSS can specify different styles for CSS can specify different styles for different mediadifferent media On-screenOn-screen

In printIn print

Handheld, projection, etc.Handheld, projection, etc.

… … even by voice or Braille-based even by voice or Braille-based readerreader 7

Why “Cascading”?Why “Cascading”? Priority scheme determining which Priority scheme determining which

style rules apply to elementstyle rules apply to element Cascade prioritiesCascade priorities or or specificity specificity

(weight)(weight) are calculated and are calculated and assigned to the rulesassigned to the rules

Child elements in the HTML DOM Child elements in the HTML DOM tree inherit styles from their parenttree inherit styles from their parent

Can override themCan override them

Control via Control via !important!important rule rule

8

Why “Cascading”? (2)Why “Cascading”? (2)

9

Why “Cascading”? (3)Why “Cascading”? (3) Some CSS styles are inherited and Some CSS styles are inherited and

some notsome not Text-related and list-related Text-related and list-related

properties are inherited - properties are inherited - colorcolor, , font-font-sizesize, , font-familyfont-family, , line-heightline-height, , text-text-alignalign, , list-stylelist-style, etc, etc

Box-related and positioning styles are Box-related and positioning styles are not inherited - not inherited - widthwidth, , heightheight, , borderborder, , marginmargin, , paddingpadding, , positionposition, , floatfloat, etc, etc

<a><a> elements do not inherit color and elements do not inherit color and text-decorationtext-decoration

10

Style Sheets SyntaxStyle Sheets Syntax Stylesheets consist of rules, selectors, Stylesheets consist of rules, selectors,

declarations, properties and valuesdeclarations, properties and values

Selectors are separated by commasSelectors are separated by commas Declarations are separated by Declarations are separated by

semicolonssemicolons Properties and values are separated by Properties and values are separated by

colonscolons11

h1,h2,h3 { color: green; font-weight: h1,h2,h3 { color: green; font-weight: bold; }bold; }

http://css.maxdesign.com.au/

SelectorsSelectors Selectors determine which element Selectors determine which element

the rule applies to: the rule applies to: All elements of specific type (tag)All elements of specific type (tag)

Those that mach a specific attribute Those that mach a specific attribute (id, class)(id, class)

Elements may be matched Elements may be matched depending on how they are nested depending on how they are nested in the document tree (HTML)in the document tree (HTML)

Examples:Examples:

12

.header a { color: green }.header a { color: green }

#menu>li { padding-top: 8px }#menu>li { padding-top: 8px }

Selectors (2)Selectors (2) Three primary kinds of selectors:Three primary kinds of selectors:

By tag (type selector):By tag (type selector):

By element id:By element id:

By element class name (only for HTML): By element class name (only for HTML):

Selectors can be combined with commas:Selectors can be combined with commas:

This will match This will match <h1><h1> tags, elements with tags, elements with class class linklink, and element with id , and element with id top-linktop-link

13

h1 { font-family: verdana,sans-serif; }h1 { font-family: verdana,sans-serif; }

#element_id { color: #ff0000; }#element_id { color: #ff0000; }

.myClass {border: 1px solid red}.myClass {border: 1px solid red}

h1, .link, #top-link {font-weight: bold}h1, .link, #top-link {font-weight: bold}

Selectors (3)Selectors (3) Pseudo-classes define statePseudo-classes define state

:hover:hover, , :visited:visited, , :active:active , , :lang:lang Pseudo-elements define element Pseudo-elements define element

"parts" or are used to generate "parts" or are used to generate contentcontent :first-line:first-line , , :before:before, , :after:after

14

a:hover { color: red; }a:hover { color: red; }p:first-line { text-transform: uppercase; }p:first-line { text-transform: uppercase; }.title:before { content: "»"; }.title:before { content: "»"; }.title:after { content: "«"; }.title:after { content: "«"; }

Selectors (4)Selectors (4) Match relative to element placement:Match relative to element placement:

This will match all This will match all <a><a> tags that are inside of tags that are inside of <p><p>

** – universal selector (avoid or use with – universal selector (avoid or use with care!):care!):

This will match all descendants of This will match all descendants of <p><p> element element ++ selector – used to match “next sibling”: selector – used to match “next sibling”:

This will match all siblings with class name This will match all siblings with class name linklink that appear immediately after that appear immediately after <<imgimg>> tag tag

15

p a {text-decoration: underline}p a {text-decoration: underline}

p * {color: black}p * {color: black}

img + .link {float:right}img + .link {float:right}

Selectors (5)Selectors (5) >> selector – matches direct child nodes: selector – matches direct child nodes:

This will match all elements with class This will match all elements with class errorerror, , direct children of direct children of <p><p> tag tag

[[ ] ] – matches tag attributes by regular – matches tag attributes by regular expression:expression:

This will match all This will match all <img><img> tags with tags with altalt attribute containing the word attribute containing the word logologo

.class1.class2 .class1.class2 (no space) - matches (no space) - matches elements with both (all) classes applied at elements with both (all) classes applied at the same timethe same time 16

p > .error {font-size: 8px}p > .error {font-size: 8px}

img[alt~=logo] {border: none}img[alt~=logo] {border: none}

Values in the CSS RulesValues in the CSS Rules Colors are set in RGB format (decimal or Colors are set in RGB format (decimal or

hex): hex): Example: Example: #a0a6aa = rgb(160, 166, 170)#a0a6aa = rgb(160, 166, 170)

Predefined color aliases exist: Predefined color aliases exist: blackblack, , blueblue, , etc.etc.

Numeric values are specified in:Numeric values are specified in: Pixels, ems, e.g. Pixels, ems, e.g. 12px12px , , 1.4em1.4em

Points, inches, centimeters, millimetersPoints, inches, centimeters, millimeters E.g. E.g. 10pt10pt , , 1in1in, , 1cm1cm, , 1mm1mm

Percentages, e.g. Percentages, e.g. 50%50% Percentage of what?...Percentage of what?...

Zero can be used with no unit: Zero can be used with no unit: border: 0;border: 0;17

Default Browser StylesDefault Browser Styles Browsers have default CSS stylesBrowsers have default CSS styles

Used when there is no CSS Used when there is no CSS information or any other style information or any other style information in the documentinformation in the document

Caution: default styles differ in Caution: default styles differ in browsersbrowsers E.g. margins, paddings and font E.g. margins, paddings and font

sizes differ most often and usually sizes differ most often and usually developers reset themdevelopers reset them

18

* { margin: 0; padding: 0; }* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding: body, h1, p, ul, li { margin: 0; padding: 0; }0; }

Linking HTML and CSSLinking HTML and CSS HTML (content) and CSS (presentation) HTML (content) and CSS (presentation)

can be linked in three ways:can be linked in three ways: InlineInline: the CSS rules in the : the CSS rules in the stylestyle attribute attribute

No selectors are neededNo selectors are needed

EmbeddedEmbedded: in the <head> in a : in the <head> in a <style><style> tag tag

ExternalExternal: CSS rules in separate file (best): CSS rules in separate file (best)

Usually a file with Usually a file with .css.css extension extension

Linked via Linked via <link<link rel="stylesheet"rel="stylesheet" href=…>href=…> tag tag or or @import@import directive in embedded CSS block directive in embedded CSS block

19

Linking HTML and CSS Linking HTML and CSS (2)(2)

Using external files is highly Using external files is highly recommendedrecommended Simplifies the HTML document Simplifies the HTML document

Improves page load speed as the Improves page load speed as the CSS file is cachedCSS file is cached

20

Inline Styles: ExampleInline Styles: Example

21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"><head><head> <title>Inline Styles</title><title>Inline Styles</title></head></head><body><body> <p>Here is some text</p><p>Here is some text</p> <p style="font-size: 20pt">Here is some<p style="font-size: 20pt">Here is some more text</p>more text</p> <p style="font-size: 20pt;color:<p style="font-size: 20pt;color: #0000FF" >Even more text</p> #0000FF" >Even more text</p> </body></body></html></html>

inline-styles.htmlinline-styles.html

Inline Styles: ExampleInline Styles: Example

22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"><head><head> <title>Inline Styles</title><title>Inline Styles</title></head></head><body><body> <p>Here is some text</p><p>Here is some text</p> <p style="font-size: 20pt">Here is some<p style="font-size: 20pt">Here is some more text</p>more text</p> <p style="font-size: 20pt;color:<p style="font-size: 20pt;color: #0000FF" >Even more text</p> #0000FF" >Even more text</p> </body></body></html></html>

inline-styles.htmlinline-styles.html

CSS Cascade CSS Cascade (Precedence)(Precedence)

There are browser, user and author There are browser, user and author stylesheets with "normal" and stylesheets with "normal" and "important" declarations"important" declarations Browser styles (least priority)Browser styles (least priority)

Normal user stylesNormal user styles

Normal author styles (external, in Normal author styles (external, in head, inline)head, inline)

Important author stylesImportant author styles

Important user styles (max priority)Important user styles (max priority)

23

a { color: red !important ; }a { color: red !important ; }

http://www.slideshare.net/maxdesign/css-cascade-1658158

CSS SpecificityCSS Specificity CSS specificity is used to determine the CSS specificity is used to determine the

precedence of CSS style declarations precedence of CSS style declarations with the same origin. Selectors are what with the same origin. Selectors are what mattersmatters Simple calculation: #id = 100, .class = 10, Simple calculation: #id = 100, .class = 10,

:pseudo = 10, [attr] = 10, tag = 1, * = 0:pseudo = 10, [attr] = 10, tag = 1, * = 0

Same number of points? Order matters.Same number of points? Order matters.

See also:See also:

http://www.smashingmagazine.com/2007/07/27/css-specificity-http://www.smashingmagazine.com/2007/07/27/css-specificity-

things-you-should-know/ things-you-should-know/

http://css.maxdesign.com.au/selectutorial/http://css.maxdesign.com.au/selectutorial/

advanced_conflict.htmadvanced_conflict.htm 24

CSS Rules CSS Rules Precedence Precedence

Live DemoLive Demoprecedence.htmprecedence.htm

ll

Embedded StylesEmbedded Styles Embedded in the HTML in the Embedded in the HTML in the <style><style> tag: tag:

The The <style><style> tag is placed in the tag is placed in the <head><head> section of the document section of the document

typetype attribute specifies the MIME type attribute specifies the MIME type MIME describes the format of the MIME describes the format of the

contentcontent

Other MIME types include Other MIME types include text/htmltext/html, , image/gifimage/gif, , text/javascripttext/javascript … …

Used for document-specific stylesUsed for document-specific styles26

<style type="text/css"><style type="text/css">

Embedded Styles: Embedded Styles: ExampleExample

27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"><head><head> <title>Style Sheets</title><title>Style Sheets</title> <style type="text/css"><style type="text/css"> em {background-color:#8000FF; em {background-color:#8000FF; color:white}color:white} h1 {font-family:Arial, sans-serif}h1 {font-family:Arial, sans-serif} p {font-size:18pt}p {font-size:18pt} .blue {color:blue}.blue {color:blue} </style></style><head><head>

embedded-embedded-stylesheets.htmlstylesheets.html

Embedded Styles: Embedded Styles: Example (2)Example (2)

28

……<body><body> <h1 class="blue">A Heading</h1><h1 class="blue">A Heading</h1> <p>Here is some text. Here is some text. <p>Here is some text. Here is some text. HereHere is some text. Here is some text. Here is is some text. Here is some text. Here is somesome text.</p> text.</p> <h1>Another Heading</h1> <h1>Another Heading</h1> <p class="blue">Here is some more text.<p class="blue">Here is some more text. Here is some more text.</p>Here is some more text.</p> <p class="blue">Here is some <em>more</em><p class="blue">Here is some <em>more</em> text. Here is some more text.</p> text. Here is some more text.</p> </body></body></html></html>

……<body><body> <h1 class="blue">A Heading</h1><h1 class="blue">A Heading</h1> <p>Here is some text. Here is some text. <p>Here is some text. Here is some text. HereHere is some text. Here is some text. Here is is some text. Here is some text. Here is somesome text.</p> text.</p> <h1>Another Heading</h1> <h1>Another Heading</h1> <p class="blue">Here is some more text.<p class="blue">Here is some more text. Here is some more text.</p>Here is some more text.</p> <p class="blue">Here is some <em>more</em><p class="blue">Here is some <em>more</em> text. Here is some more text.</p> text. Here is some more text.</p> </body></body></html></html>

Embedded Styles: Embedded Styles: Example (3)Example (3)

29

External CSS StylesExternal CSS Styles External linkingExternal linking

Separate pages can all use a shared style Separate pages can all use a shared style sheetsheet

Only modify a single file to change the styles Only modify a single file to change the styles across your entire Web site across your entire Web site (see (see

http://www.csszengarden.com/)http://www.csszengarden.com/)

linklink tag (with a tag (with a relrel attribute) attribute)

Specifies a relationship between current Specifies a relationship between current document and another documentdocument and another document

linklink elements should be in the elements should be in the <head><head> 30

<link rel="stylesheet" type="text/css"<link rel="stylesheet" type="text/css" href="styles.css">href="styles.css">

External CSS Styles (2)External CSS Styles (2)@import@import

Another way to link external CSS filesAnother way to link external CSS files Example:Example:

Ancient browsers do not recognize Ancient browsers do not recognize @import@import

Use @import in an external CSS file to Use @import in an external CSS file to workaround the IE 32 CSS file limitworkaround the IE 32 CSS file limit

31

<style type="text/css"><style type="text/css"> @import url("styles.css");@import url("styles.css"); /* same as */ /* same as */ @import "styles.css";@import "styles.css";</style></style>

External Styles: External Styles: ExampleExample

32

/* CSS Document *//* CSS Document */

a a { text-decoration: none } { text-decoration: none }

a:hover { text-decoration: underline;a:hover { text-decoration: underline; color: red;color: red; background-color: #CCFFCC }background-color: #CCFFCC }

li em { color: red; li em { color: red; font-weight: bold }font-weight: bold }

ulul { margin-left: 2cm } { margin-left: 2cm }

ul ulul ul { text-decoration: underline; { text-decoration: underline; margin-left: .5cm }margin-left: .5cm }

styles.cssstyles.css

External Styles: External Styles: Example (2)Example (2)

33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html xmlns="http://www.w3.org/1999/xhtml"><head><head> <title>Importing style sheets</title><title>Importing style sheets</title> <link type="text/css" rel="stylesheet"<link type="text/css" rel="stylesheet" href="styles.css" />href="styles.css" /></head></head><body><body> <h1>Shopping list for <em>Monday</em>:</h1><h1>Shopping list for <em>Monday</em>:</h1> <li>Milk</li><li>Milk</li> … …

external-external-styles.htmlstyles.html


34

… … <li>Bread<li>Bread <ul><ul> <li>White bread</li><li>White bread</li> <li>Rye bread</li><li>Rye bread</li> <li>Whole wheat bread</li><li>Whole wheat bread</li> </ul></ul> </li></li> <li>Rice</li><li>Rice</li> <li>Potatoes</li><li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li><li>Pizza <em>with mushrooms</em></li></ul></ul><a href="http://food.com" title="grocery<a href="http://food.com" title="grocery store">Go to the Grocery store</a>store">Go to the Grocery store</a></body></body></html></html>

… … <li>Bread<li>Bread <ul><ul> <li>White bread</li><li>White bread</li> <li>Rye bread</li><li>Rye bread</li> <li>Whole wheat bread</li><li>Whole wheat bread</li> </ul></ul> </li></li> <li>Rice</li><li>Rice</li> <li>Potatoes</li><li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li><li>Pizza <em>with mushrooms</em></li></ul></ul><a href="http://food.com" title="grocery<a href="http://food.com" title="grocery store">Go to the Grocery store</a>store">Go to the Grocery store</a></body></body></html></html>


35

Text-related CSS Text-related CSS PropertiesProperties

colorcolor – specifies the color of the text – specifies the color of the text font-sizefont-size – size of font: – size of font: xx-smallxx-small, , x-smallx-small, , smallsmall, , mediummedium, , largelarge, , x-largex-large, , xx-largexx-large, , smallersmaller, , largerlarger or numeric value or numeric value

font-familyfont-family – comma separated font names – comma separated font names Example: Example: verdanaverdana, , sans-serifsans-serif, etc. , etc.

The browser loads the first one that is The browser loads the first one that is availableavailable

There should always be at least one generic There should always be at least one generic fontfont

font-weightfont-weight can be can be normalnormal, , boldbold, , bolderbolder, , lighterlighter or a number in range [ or a number in range [100100 …… 900900]]

36

CSS Rules for Fonts (2)CSS Rules for Fonts (2) font-stylefont-style – styles the font – styles the font

Values: Values: normalnormal, , italicitalic, , obliqueoblique text-decorationtext-decoration – decorates the – decorates the

texttext Values: Values: nonenone, , underlineunderline, , line-line-troughtrough, , overlineoverline, , blinkblink

text-aligntext-align – defines the alignment – defines the alignment of text or other contentof text or other content Values: Values: leftleft, , rightright, , centercenter, , justifyjustify

37

Shorthand Font Shorthand Font PropertyProperty

fontfont Shorthand rule for setting multiple Shorthand rule for setting multiple

font properties at the same timefont properties at the same time

is equal to writing this:is equal to writing this:

38

font:italic normal bold 12px/16px font:italic normal bold 12px/16px verdanaverdana

font-style: italic;font-style: italic;font-variant: normal;font-variant: normal;font-weight: bold;font-weight: bold;font-size: 12px;font-size: 12px;line-height: 16px;line-height: 16px;font-family: verdana;font-family: verdana;

FontsFontsLive DemoLive Demo

font-rules.htmlfont-rules.html

BackgroundsBackgrounds background-imagebackground-image

URL of image to be used as background, URL of image to be used as background, e.g.:e.g.:

background-colorbackground-color Using color and image and the same timeUsing color and image and the same time

background-repeatbackground-repeat repeat-xrepeat-x, , repeat-yrepeat-y, , repeatrepeat, , no-repeatno-repeat

background-attachmentbackground-attachment fixedfixed / / scrollscroll

40

background-image:url("back.gif");background-image:url("back.gif");

Backgrounds (2)Backgrounds (2) background-positionbackground-position: specifies : specifies

vertical and horizontal position of vertical and horizontal position of the background imagethe background image Vertical position: Vertical position: toptop, , centercenter, , bottombottom

Horizontal position: Horizontal position: leftleft, , centercenter, , rightright

Both can be specified in percentage Both can be specified in percentage or other numerical valuesor other numerical values

Examples:Examples:

41

background-position: top left;background-position: top left;

background-position: -5px 50%;background-position: -5px 50%;

Background Shorthand Background Shorthand PropertyProperty

backgroundbackground: shorthand rule for setting : shorthand rule for setting background properties at the same time:background properties at the same time:

is equal to writing:is equal to writing:

Some browsers will not apply BOTH color Some browsers will not apply BOTH color and image for background if using and image for background if using shorthand ruleshorthand rule

42

background: #FFF0C0 url("back.gif") no-background: #FFF0C0 url("back.gif") no-repeat fixed top;repeat fixed top;

background-color: #FFF0C0;background-color: #FFF0C0;background-image: url("back.gif");background-image: url("back.gif");background-repeat: no-repeat;background-repeat: no-repeat;background-attachment: fixed;background-attachment: fixed;background-position: top;background-position: top;

Background-image or Background-image or <img><img>??

Background images allow you to Background images allow you to save many image tags from the save many image tags from the HTML HTML Leads to less codeLeads to less code

More content-oriented approachMore content-oriented approach All images that are not part of the All images that are not part of the

page content (and are used only page content (and are used only for "beautification") should be for "beautification") should be moved to the CSSmoved to the CSS

43

Background StylesBackground StylesLive DemoLive Demo

background-background-rules.htmlrules.html

BordersBorders border-widthborder-width: : thinthin, , mediummedium, , thickthick or or

numerical value (e.g. numerical value (e.g. 10px10px)) border-colorborder-color: color alias or RGB value: color alias or RGB value border-styleborder-style: : nonenone, , hiddenhidden, , dotteddotted, , dasheddashed, , solidsolid, , doubledouble, , groovegroove, , ridgeridge, , insetinset, , outsetoutset

Each property can be defined Each property can be defined separately for left, top, bottom and separately for left, top, bottom and rightright border-top-styleborder-top-style, , border-left-colorborder-left-color, …, …

45

Border Shorthand Border Shorthand PropertyProperty

borderborder: shorthand rule for setting : shorthand rule for setting border properties at once:border properties at once:

is equal to writing:is equal to writing:

Specify different borders for the sides Specify different borders for the sides via shorthand rules: via shorthand rules: border-topborder-top, , border-leftborder-left, , border-rightborder-right, , border-border-bottombottom

When to avoid When to avoid border:0border:0 46

border: 1px solid redborder: 1px solid red

border-width:1px;border-width:1px;border-color:red;border-color:red;border-style:solid;border-style:solid;

BordersBordersLive DemoLive Demo

border-rules.htmlborder-rules.html

CSS ReferenceCSS Reference A list of all CSS 2.1 properties is A list of all CSS 2.1 properties is

available at available at http://www.w3.org/TR/CSS2/propidhttp://www.w3.org/TR/CSS2/propidx.html x.html

48

CSS – Part ICSS – Part I

Questions?Questions?

http://frontendcourse.telerik.com

ExercisesExercises

50

1.1. Create the following page section using Create the following page section using HTML and external CSS (no inline HTML and external CSS (no inline styles). Use a table or a definition list styles). Use a table or a definition list (in this case the layout will be (in this case the layout will be different).different).

Exercises (2)Exercises (2)

51

2.2. Create the following Web page using Create the following Web page using external CSS styles. The country flags external CSS styles. The country flags should be PNG images with text over should be PNG images with text over them.them.

Exercises (3)Exercises (3)

3.3. Create the following Web page region Create the following Web page region using HTML with external CSS file. Note using HTML with external CSS file. Note that each of the sections should be a that each of the sections should be a hyperlink.hyperlink.

Hints: use Hints: use display:inline-blockdisplay:inline-block style style for the list items and paddings where for the list items and paddings where needed.needed.

52

css part i

Technology