1 / 28

Internet pub lishing cascading style sheets , CSS

Internet pub lishing cascading style sheets , CSS. Petr Zámostný room : A-72a phone : 4222 e-mail: petr.zamostny @ vscht.cz. Visually “perfect " pages. Reasons leading to visually " perfect " pages Customer requirements to have pages as similar to printed propagation materials as possible

jbenner
Download Presentation

Internet pub lishing cascading style sheets , CSS

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. Internet publishingcascading style sheets, CSS Petr Zámostnýroom: A-72aphone: 4222e-mail: petr.zamostny@vscht.cz

  2. Visually“perfect" pages • Reasons leading to visually "perfect" pages • Customer requirements to have pages as similar to printed propagation materials as possible • Beginners effort to show everything they know

  3. Problems • High share of ballast code • Limited support for minor platforms • Misuse of graphics – long time needed to download pages • Pages look poorly on unsupported resolutions • Difficult content management • Changes in design must be made directly in documents

  4. Old style formatting (bad example) • Why is it a bad example? • Formatting instructions are mixed with the information • Appearance is hard to modify • TIP try to alter emphasized text color in example bellow to red http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-004/spatny-priklad.html

  5. Better example • Why is it better than the example in previous slide? • Formatting is separated from the information • Appearance can be easily modified • Look of all instances of <em> elements can be modified by altering the style http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-004/lepsi-priklad.html

  6. Cascading Style Sheets • HTML document formatting separated from the main content • Possible ways of its implementation • Style specification for each element in ‘style’ attribute • Style definition in document head • Linking external style sheet

  7. Styledefinition in HTML head • Good for single HTML file <head> <style type="text/css"> <!– this line is HTML comment (hides style from ancient browsers ... Style definition ... --> </style> </head>

  8. CSS rule structure • selector • The simplest selector is type selector (the name of element, e.g. b, p, div …) • property • Name of adjustable property (> 90 in CSS 2.1) • value • value assigned to property • property type specify which values are allowed selector { property1: value; property2: value; ... propertyN: value }

  9. Property values v CSS • Distances, sizes • URL • Strings • ‘string’ • “string” • Keyword • Color

  10. Distances and sizes in CSS • Relative

  11. Distances and sizes in CSS • Absolute • These units can be used only if the physical resolution is known

  12. Distances and sizes in CSS • Precentuals

  13. URL • url(text_url) • May or may not be closed in double quotes • background: url("http://www.example.com/pinkish.png") • background: url(http://www.example.com/pinkish.png)

  14. Rules merging Rules with the same declarations can be merged into single rule h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } Is equivalent to: h1, h2, h3 { font-family: sans-serif }

  15. Colors in CSS More on cololors

  16. Font properties • family-name • Coma separated list of font names in descending priority order • First available font is used • Example. • font-family: "Franklin Gothic Book", "Arial"; • „Franklin Gothic Book“ is used if it is present on targer computer, otherwise Arial is used

  17. Font properties • generic-family • Generic font famillies – always available • Choices • 'serif' (e.g. Times) • 'sans-serif' (e.g. Helvetica) • 'cursive' (e.g. Zapf-Chancery) • 'fantasy' (e.g. Western) • 'monospace' (e.g. Courier) • The list should always end by the generic family member • font-family: "Franklin Gothic Book", "Arial", sans-serif;

  18. Font properties

  19. Font properties • Sizes from xx-small to xx-large are absolute • Smaller / larger indicate size by one notch smaller/larger than the parent element • Similarly behave percentages %

  20. Color and background properties

  21. Text properties

  22. Formatting model margin border padding Element content

  23. Margin and padding properties • Paddingproperties are defined analogically • e.g. padding-left

  24. Border properties • Each side of the border can be specified separately by properties border–top-, -bottom-, -left-, -right- • e.g. border-left-width

  25. List properties

  26. Properties inheritance • The word “text” dispalys in red because the red property is inherited from the parent element • Most properties are inherited <head> <style type="text/css"> p { color: red } </style> </head> <body> <p>Red<em>text<em></p> </body>

  27. W3schools examples • http://www.w3schools.com/css/css_examples.asp

  28. Tools for easier CSS development • TopStyle Lite 3.10 • http://www.newsgator.com/download/products/ts3lite.exe

More Related