1 / 32

NSWI142 – Web Applications

NSWI142 – Web Applications. Lecture 3 – CSS (Part 1) Martin Nečaský , Ph.D. necasky @ksi.mff.cuni.cz. 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

duke
Download Presentation

NSWI142 – Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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/ Web Applications (NSWI142 ), Lecture 3

  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 Web Applications (NSWI142 ), Lecture 3

  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 3

  5. CSS Lecture Content • CSS2.1 • Basics • Examples Web Applications (NSWI142 ), Lecture 3

  6. CSS Hello World (1/2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a composer. </BODY> </HTML> CSS: h1{color: red;} Web Applications (NSWI142 ), Lecture 3

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

  8. CSS – How to add to a web page • Sometimes appropriate: • To the HTML head add: <style> • <style type="text/css">…</style> • Content of the element is the stylesheet itself • Better: External style • One style for multiple web pages • A separate file, e.g. style.css • To the HTML head add: <link> • <link rel="stylesheet" href="style.css"/> • Possibly multiple stylesheets • For various media, browsers, … • Not recommended: Inline style • <p style="font-size: 5pt;" >…</p> Web Applications (NSWI142 ), Lecture 3

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

  10. CSS and (X)HTML • idand classattributes 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: <pclass="blue">…</p> • In CSS we will exploit the div and span elements Web Applications (NSWI142 ), Lecture 3

  11. (X)HTML - <div>, <span>Block and inline elements • <div> and <span> 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 • <div>, <h1>, <p>, <ul>, <ol>, <li>, … • This behavior can be forced by display: block; even for inline elements • Inline • Takes up only necessary width • Not followed by a newline • <span>, <i>, <b>, <img>, <input>, … • This behavior can be forced by display: inline; even for block elements Web Applications (NSWI142 ), Lecture 3

  12. Selectors (1/5) – classes and IDs example1_id_class.html Web Applications (NSWI142 ), Lecture 3

  13. (X)HTML - <div> and <span> - example XHTML: <div class="blue"> <p>This is my blue paragraph</p> <p>Red <span id="redword">word</span> </p> </div> CSS: div.blue { color: blue; } #redword{ color: red; } Web Applications (NSWI142 ), Lecture 3

  14. (X)HTML - <div> and <span> - example XHTML: <table> <trclass="odd"> <td>1-1</td><td>1-2</td></tr> <trclass="even"><td>2-1</td><td>2-2</td></tr> <trclass="odd"> <td>3-1</td><td>3-2</td></tr> <trclass="even"><td>4-1</td><td>4-2</td></tr> </div> CSS: tr.odd{ background-color: white; } tr.even{ background-color: grey; } example2_striped_table.html Web Applications (NSWI142 ), Lecture 3

  15. Selectors (2/5) - attributes example3_striped_table_attributes.html Web Applications (NSWI142 ), Lecture 3

  16. Selectors (3/5) – pseudo-classes • <a>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 <a> • :focus – when an element has focus example4_hover.html Web Applications (NSWI142 ), Lecture 3

  17. Selectors (4/5) – pseudo-elements • :first-line • p:first-line { text-transform: uppercase } • <P>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.</P> • THIS IS A SOMEWHAT LONG HTML PARAGRAPH THATwill be broken into several … • :first-letter • :before, :after • Insert content before resp. after the actual content example5_first_line.html Web Applications (NSWI142 ), Lecture 3

  18. Selectors (5/5) – more • More selectors • * - matchesany element • E > F – matchesany F element thatis a childofan element E • E:first-child – matches element E whenitis a firstchildofitsparent • E:lang(c) – matches element E whenitis in language c • E + F – matches F element immediatelypreceded by a sibling element E example6_first_child.html example7_sibling.html Web Applications (NSWI142 ), Lecture 3

  19. Selectorcombinationexamples • h1em { color:blue } • <H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1> • Matches EM thatis a descendantof 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 beforecontentofeach <p class=„special“>content</p> • Will render the "S" of "Special!" in gold. Web Applications (NSWI142 ), Lecture 3

  20. Properties and values • Some properties have multi-part values • border-width: 9px; • 9 pixels on all sides • border-width: 10px0px10px0px; • 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; example8_border.html Web Applications (NSWI142 ), Lecture 3

  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 http://www.w3.org/TR/CSS21/syndata.html#color-units Web Applications (NSWI142 ), Lecture 3

  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 0px0px; border-width:5px; } example9_box.html Web Applications (NSWI142 ), Lecture 3

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

  24. Position • position: static; • Normal placement according to content flow • Ignores top, left, right, bottom • position: relative; • Position relative to normal • Using top, left, right, bottom • position: fixed; • Position in the browser window, takes only necessary space • Using top, left, right, bottom • 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 example11_position_static.html example12_position_relative.html example10_position_fixed.html example13_position_absolute.html Web Applications (NSWI142 ), Lecture 3

  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 example14_float.html Web Applications (NSWI142 ), Lecture 3

  26. @import rule • Importsotherstylesheets • Mustprecedeallotherrules (except @charset) @import "mystyle.css"; @import url("mystyle.css"); • Canbe media dependent @import url("fineprint.css") print;@import url("bluish.css") projection, tv; Web Applications (NSWI142 ), Lecture 3

  27. Inheritance • body { font-size: 10pt } h1 { font-size: 130% } • <BODY> <H1>A <EM>large</EM> heading</H1> </BODY> • '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 • 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'. Web Applications (NSWI142 ), Lecture 3

  28. Cascading • 3 sourcesofrules: Author, User, User-agent • Somerulesmaybemarked !important • body { color: black !important; } • Sort according to importance (higheris more important) • user agent declarations • user normaldeclarations • authornormaldeclarations • authorimportantdeclarations • user importantdeclarations • Sort ruleswiththesameimportance and origin by specificity • More specificselectorwilloverride more generalones • Finally, sort by specifiedorder Web Applications (NSWI142 ), Lecture 3

  29. Counters • Usedforautomatednumbering • 2 properties • counter-increment • Incrementsspecifiedcounters by anoptionallyspecifiedvalues (default 1) • counter-reset • Setsspecifiedcounters to optionallyspecifiedvalues (default 0) BODY { counter-reset: chapter; /* Create a chaptercounterscope */ } 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 3

  30. Lists • Special list properties • Applyto elementswith display: list-item • (X)HTML: <li> <ul> <ol> • 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 | inherit • list-style-image • ul { list-style-image: url("http://png.com/ellipse.png") } • list-style-position • Setswhetherthe list symbol isinsideoroutsidethe box • outside | inside Web Applications (NSWI142 ), Lecture 3

  31. Tables • Documentlanguageelementsmustbemapped to table elementsusingthedisplayproperty (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 3

  32. Validation • How to determinewhether a style isvalid? • doesitcomplywiththe CSS2.1 standard? • http://jigsaw.w3.org/css-validator • Validates a link to a pageusing CSS • Validatesthrough a direct input ofthe CSS style3 Web Applications (NSWI142 ), Lecture 3

More Related