1. NSWI142 – Web Applications Lecture 3 – CSS (Part 1) Martin Nečaský, Ph.D. necasky@ksi.mff.cuni.cz Web Applications (NSWI142 ), Lecture 31

2. CSS Style and appearance is no longer a part of (X)HTML CSS is used for that CSS – Cascading Style Sheets – (X)HTML contains data to display – CSS says how to display it CSS sources: http://www.w3schools.com/css/ http://www.w3.org/Style/CSS/ http://www.w3schools.com/css/ http://www.w3.org/Style/CSS/ Web Applications (NSWI142 ), Lecture 32

3. CSS Levels Instead of versions – Each level extends and refines the previous one CSS Level 1 – CSS1 specification obsolete – CSS Level 1: features from CSS1 in CSS2.1 syntax CSS Level 2 – CSS2 became W3C Recommendation before there was a „Candidate Recommendation“ stage - many problems over time – CSS Level 2 Revision 1 (CSS2.1) created, obsoleted CSS2, Defines CSS Level 2 W3C Recommendation 07 June 2011 CSS Level 3 – Modular instead of a monolithic document – Core: CSS2.1 – Modules add/replace features of CSS2.1 – Each module levels individually (Selectors Level 4 before Line Module Level 3) current status: http://www.w3.org/standards/techs/css#w3c_all http://www.w3.org/standards/techs/css#w3c_all Web Applications (NSWI142 ), Lecture 33

4. CSS Profiles Not all implementations will implement all functionality defined in CSS. – CSS Mobile Profile 2.0 – CSS Print Profile 1.0 – CSS TV Profile 1.0 Web Applications (NSWI142 ), Lecture 34

5. CSS Lecture Content CSS2.1 – Basics – Examples Web Applications (NSWI142 ), Lecture 35

6. CSS Hello World (1/2) Bach's home page Bach's home page Johann Sebastian Bach was a composer. CSS: h1 { color: red; } Web Applications (NSWI142 ), Lecture 36

7. CSS Hello World (2/2) h1 { color: red; } CSS style saying that H1 headings will be red h1 is a selector – selects HTML elements affected by the following style Syntax: { property1: value1; property2: value2; } Web Applications (NSWI142 ), Lecture 37

8. CSS – How to add to a web page 1.Sometimes appropriate: – To the HTML head add: – … – Content of the element is the style sheet itself 2.Better: External style – One style for multiple web pages – A separate file, e.g. style.css – To the HTML head add: – – Possibly multiple style sheets For various media, browsers, … 3.Not recommended: Inline style – … Web Applications (NSWI142 ), Lecture 38

9. Example body { background-color: green; font-weight: bold; color: white; } This time we specify a style for the whole The style is inherited – E.g. elements inside styled like this unless overwritten Web Applications (NSWI142 ), Lecture 39

10. CSS and (X)HTML id and class attributes can be specified for each (X)HTML element – One id uniquely identifies ONE specific element – One class can be assigned to MULTIPLE elements These (X)HTML attributes are commonly used for CSS styles (and other things – JavaScript, …) Using CSS we can say: – „heading with id= " xy " will be red“ – „each element with class= " blue " will be blue Example: … In CSS we will exploit the div and span elements Web Applications (NSWI142 ), Lecture 310

11. (X)HTML -, Block and inline elements and are elements without HTML meaning But they can have id and class attributes They are used for specifying various web page and text parts for formatting There are 2 visual types of (X)HTML elements according to CSS – Block Takes up all available width Followed by a newline,,,,,, … This behavior can be forced by display: block; even for inline elements – Inline Takes up only necessary width Not followed by a newline,,,,, … This behavior can be forced by display: inline; even for block elements Web Applications (NSWI142 ), Lecture 311

12. Selectors (1/5) – classes and IDs Web Applications (NSWI142 ), Lecture 312 elements with class= " blue ".blue { color: blue; } the element with id= " red " #red { color: red; } example1_id_class.html

13. (X)HTML - and - example XHTML: This is my blue paragraph Red word CSS: div.blue { color: blue; } #redword { color: red; } Web Applications (NSWI142 ), Lecture 313

14. (X)HTML - and - example XHTML: 1-1 1-2 2-1 2-2 3-1 3-2 4-1 4-2 CSS: tr.odd { background-color: white; } tr.even { background-color: grey; } Web Applications (NSWI142 ), Lecture 314 example2_striped_table.html

15. Selectors (2/5) - attributes elements with a title attribute [title] { color: blue; } elements with an attribute with a specific value type= " text " [type=text] { color: blue; } elements with an attribute with a specific value alt= " myTitle " in a space separated list [alt~=myTitle] { color: red; } elements with an attribute with a specific value alt= " myTitle " in a " - " separated list [lang|=cs] { color: blue; } Web Applications (NSWI142 ), Lecture 315 example3_striped_table_attributes.html

16. Selectors (3/5) – pseudo-classes when the mouse pointer is over it a:hover { background-color: yellow; } :visited – visited link :link – unvisited link :active – when the user activates the element :hover – when the mouse pointer is over it – Works with multiple elements, not just :focus – when an element has focus Web Applications (NSWI142 ), Lecture 316 example4_hover.html

17. Selectors (4/5) – pseudo-elements :first-line – p:first-line { text-transform: uppercase } – This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. – THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several … :first-letter :before, :after – Insert content before resp. after the actual content Web Applications (NSWI142 ), Lecture 317 example5_first_line.html

18. Selectors (5/5) – more More selectors – * - matches any element – E > F – matches any F element that is a child of an element E – E:first-child – matches element E when it is a first child of its parent – E:lang(c) – matches element E when it is in language c – E + F – matches F element immediately preceded by a sibling element E Web Applications (NSWI142 ), Lecture 318 example6_first_child.html example7_sibling.html

19. Selector combination examples h1 em { color:blue } – This headline is very important – Matches EM that is a descendant of H1 div p *[href] – matches any element that (1) has the "href" attribute set and (2) is inside a P that is itself inside a DIV p.special:before {content: "Special! "} p.special:first-letter {color: #ffd800} – Generates „Special!“ text before content of each content – Will render the "S" of "Special!" in gold. Web Applications (NSWI142 ), Lecture 319

20. Properties and values Some properties have multi-part values border-width: 9px; – 9 pixels on all sides border-width: 10px 0px 10px 0px; – Order: top, right, bottom, left – Top and bottom 10 pixels, left and right none Units – Absolute: px, pt, pc, in, cm, mm – Relative: em, ex – No space between value and unit! font-size: 12pt; Web Applications (NSWI142 ), Lecture 320 example8_border.html

21. Colors aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow numerical – red, green, blue - rgb(123,123,123) – 0-255 – #ffffff – hexadecimal Web Applications (NSWI142 ), Lecture 321 http://www.w3.org/TR/CSS21/syndata.html#color-units

22. Box model CSS based on a box model Each element has – Margin – distance from border to another box – Border – Padding – between border and main content – Content – the content of the element itself div { margin: 10px 0px 0px 0px; border-width: 5px; } Web Applications (NSWI142 ), Lecture 322 example9_box.html

23. Borders Border Interesting properties: – border-width: width + units; – border-style: [solid|dotted|double|none|dashed|hidden|groove |ridge|inset|outset]; – border-color: color Web Applications (NSWI142 ), Lecture 323

24. Position 1.position: static; – Normal placement according to content flow – Ignores top, left, right, bottom 2.position: relative; – Position relative to normal – Using top, left, right, bottom 3.position: fixed; – Position in the browser window, takes only necessary space – Using top, left, right, bottom 4.position: absolute; – Absolute in the content of the parent, takes only necessary space – Using top, left, right, bottom – Possible overlays of multiple elements z-index: -1; Larger the z-index means more in front Web Applications (NSWI142 ), Lecture 324 example11_position_static.html example12_position_relative.html example10_position_fixed.html example13_position_absolute.html

25. Floating float: right; float: left; Element floats left or right Content floats around it Suitable for example for navigation box on the left Or for an image with text around it Web Applications (NSWI142 ), Lecture 325 example14_float.html

26. @import rule Imports other stylesheets – Must precede all other rules (except @charset) @import "mystyle.css"; @import url("mystyle.css"); Can be media dependent @import url("fineprint.css") print; @import url("bluish.css") projection, tv; Web Applications (NSWI142 ), Lecture 326

27. Inheritance body { font-size: 10pt } h1 { font-size: 130% } A large heading 'font-size' for H1 element will have the computed value '13pt‚ – (130% times 10pt, the parent's value) the computed value of 'font-size' is inherited'font-size' – the EM element will have the computed value '13pt' as well. If the user agent does not have the 13pt font available, the actual value of 'font-size' for both H1 and EM might be, for example, '12pt'.'font-size' Web Applications (NSWI142 ), Lecture 327

28. Cascading 3 sources of rules: Author, User, User-agent Some rules may be marked !important – body { color: black !important; } Sort according to importance (higher is more important) 1.user agent declarations 2.user normal declarations 3.author normal declarations 4.author important declarations 5.user important declarations Sort rules with the same importance and origin by specificity – More specific selector will override more general ones Finally, sort by specified order Web Applications (NSWI142 ), Lecture 328

29. Counters Used for automated numbering 2 properties – counter-increment Increments specified counters by an optionally specified values (default 1) – counter-reset Sets specified counters to optionally specified values (default 0) BODY { counter-reset: chapter; /* Create a chapter counter scope */ } H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Add 1 to chapter */ } H1 { counter-reset: section; /* Set section to 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } Web Applications (NSWI142 ), Lecture 329

30. Lists Special list properties – Apply to elements with display: list-item (X)HTML: – list-style-type disc | circle | square | decimal | decimal-leading-zero | lower- roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inheritinherit – list-style-image ul { list-style-image: url("http://png.com/ellipse.png") } – list-style-position Sets whether the list symbol is inside or outside the box outside | inside Web Applications (NSWI142 ), Lecture 330

31. Tables Document language elements must be mapped to table elements using the display property (e.g. XML languages) For HTML4: table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } Web Applications (NSWI142 ), Lecture 331

32. Validation How to determine whether a style is valid? – does it comply with the CSS2.1 standard? http://jigsaw.w3.org/css-validator – Validates a link to a page using CSS – Validates through a direct input of the CSS style3 Web Applications (NSWI142 ), Lecture 332