O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Web Engineering - Introduction to CSS

1.515 visualizações

Publicada em

Cascading Stylesheets

Publicada em: Educação
  • Use this weird secret involving text messages to get your Ex to come crawling back! Learn how ♣♣♣ http://t.cn/R50e2MX
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Web Engineering - Introduction to CSS

  1. 1. Web Engineering Lecture 05 Introduction to CSS University of Lahore Nosheen Qamar 1
  2. 2. CASCADING STYLE SHEET • This is the language to add presentation styling to HTML documents. • CSS is a powerful and flexible way to add format to web page for resentation. • Through CSS it is relatively easy to take simple page of text and images, formatted to present as fully professional webpage. • CSS has a simple syntax, consist of selectors, properties and values it together make a style rules. • It gives developer find ways to control over how each element of page is formatted. • CSS styles can apply on HTML documents through several different ways. – Create an external CSS file. – Embed CSS code in HTML document. 2
  3. 3. CSS Syntax • A style rule is made of three parts: • Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc. • Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc. • Value: Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc. • You can put CSS Style Rule Syntax as follows: selector { property: value; } • Example: You can define a table border as follows: table { border: 1px solid #C00FDF; } 3
  4. 4. Applying CSS • There are three ways through which you apply CSS on your HTML doc.  Inline  Internal  External 4
  5. 5. Inline CSS • You can also embed your CSS code in HTML document. • Example: <p style=“font-family: monospace;”> 5 INTERNAL CSS • <style></style> always placed between <head></head> tags. • Example: <style> p { line-height: 120%; } </style> EXTERNAL CSS FILE External CSS file will always place between <HEAD></HEAD> tags. <link rel=“stylesheet” type=“text/css” href=“main.css” />
  6. 6. SELECTORS • There are three types of selectors:  Tag selectors  ID selectors  Class selectors 6
  7. 7. Example Tag Selector <style> p { font-family: sans-serif; font-size: 15pt; line-height: 150%; } </style> 7 Tag selector
  8. 8. Example Class Selector <style> .foo { font-family: sans-serif; font-size: 15pt; line-height: 150%; } </style> <p class=“foo”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet lorem ligula. Nam pulvinar nunc ac magna aliquam quis sodales dui elementum. Fusce a lacus leo. Maecenas ut dui eu quam condimentum sagittis. </p> 8 class selector
  9. 9. Example Class Selector <style> p.foo { font-family: sans-serif; font-size: 15pt; line-height: 150%; } </style> <body> <h1 class=“foo”></h1> <p class=“foo”></p> </body> 9 class selector
  10. 10. Example ID Selector <style> #p1 { font-family: sans-serif; font-size: 15pt; line-height: 150%; } </style> <p id=“p1”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet lorem ligula. Nam pulvinar nunc ac magna aliquam quis sodales dui elementum. Fusce a lacus leo. Maecenas ut dui eu quam condimentum sagittis. </p> 10 ID selector
  11. 11. RULE for ID selector • There is only be one element in a document with a particular ID selector. • ID selector can only be used once in one element/tag. 11
  12. 12. Descendant Selector <style> p a { font-family: sans-serif; font-size: 15pt; line-height: 150%; } </style> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.. Nam pulvinar nunc ac magna aliquam quis sodales dui nunc sit elementum. <a href=“page1.html”>Donec eu nisi turpis,</a> sit amet rutrum leo. </p> Click <a href=“page2.html”>here</a> 12
  13. 13. Grouping Selector • you can apply style to many selectors. • <style> h1, p, section { color: #35c; font-weight: bold; letter-spacing: .4em; } </style> 13
  14. 14. Grouping Class & ID Selectors • you can apply style to many selectors. <style> #content, #footer, .supplement { position: absolute; left: 510px; width: 200px; } </style> 14
  15. 15. PSEUDO SELECTOR <style> a:link { color: #008080; } a:hover { color: #FF0000; } </style> 15
  16. 16. COMMENTS IN CSS <style> /* p { font-family: sans-serif; font-size: 15pt; } */ </style> 16
  17. 17. CSS UNITS - Sizes • Relative length measurements: – px (pixels – size varies depending on screen resolution) – em (usually the height of a font’s uppercase M) – ex (usually the height of a font’s lowercase x) – Percentages (of the font’s default size) • Absolute-length measurements (units that do not vary in size): – in (inches) – cm (centimeters) – mm (millimeters) – pt (points; 1 pt = 1/72 in) – pc (picas; 1 pc = 12 pt) • Generally 1em = 12pt = 16px = 100% 17
  18. 18. Unit Description Example % Defines a measurement as a percentage relative to another value, typically an enclosing element. p { font-size: 16pt; line-height: 125%; } cm Defines a measurement in centimeters. div {margin-bottom: 2cm;} em A relative measurement for height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus 2em = 24pt. p { letter spacing: 7em; } ex This value defines a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x. p { font-size: 24pt; line-height: 3ex; } in Defines a measurement in inches. p { word-spacing: .15in;} mm Defines a measure in millimeters. p { word-spacing: 15mm;} pc Defines a measurement in picas. A pica is equivalent to 12 points. Thus, there are 6 picas per inch. p { font-size: 20pc;} 18
  19. 19. 19 Unit Description Example pt Defines a measurement in points. A point is defined as 1/72nd of an inch. body {font-size: 18pt;} px Defines a measurement in screen pixels. p {padding: 25px;}
  20. 20. CSS – Colors • You can specify your color values in various formats. 20 Format Syntax Example Hex Code #RRGGBB p {color: #FF0000; } Short Hex Code #RGB p {color: #6A7;} RGB % rgb(rrr%, ggg%, bbb%) p { color: rgb(50%, 50%, 50%); } RGB Absolute rgb(rrr, ggg, bbb) p { color: rgb(0, 0, 255); } keyword aqua, black etc. p { color: teal;}
  21. 21. CSS Box Model • A set of rules collectively known as CSS Box Model describes the rectangular region occupied with HTML elements. • The main idea is that every element’s layout is composed of:  the actual element’s content area.  a border around the element.  a padding between the content and the border (inside the border)  a margin between the border and other content (outside the border) 21
  22. 22. 22
  23. 23. Block-Level Elements • A block level element in HTML create a “block” or “box”. • Browsers typically display the block-level element with a new line. • Block level elements may contain inline elements and other block-level elements. • The block level elements create “larger” structure than inline elements.
  24. 24. List of Block-Level Elements <address> Contact information <figcaption> (HTML5) Figure caption <ol> Ordered list <article>(HTML5) Article content <figure>(HTML5) Groups media content with a caption <output>(HTML5) Form output <aside>(HTML5) Aside content <footer>(HTML5) Section or page footer <p> Paragraph <audio>(HTML5) Audio player <form> Input form <pre> Preformatted text <blockquote> Long (“block”) quotation <h1><h2><h3><h4><h5><h6> Heading levels 1 - 6 <section>(HTML5) Section of the page <canvas>(HTML5) Drawing canvas <header>(HTML5) Section or page header. <table> Table. <dd> Definition description <hgroup>(HTML5) Groups header information <tfoot> Table footer <div> Document division <hr> Horizontal rule (dividing line) <ul> Unordered list <dl> Definition list <fieldset> Field set label <video>(HTML5) Video player
  25. 25. Inline Elements • An Inline element in HTML occupies only the space bounded by the tags that define the inline element. • Generally, inline elements may contain only data and other inline elements. • By default, inline elements do not begin with new line.
  26. 26. The <span> & <div> Tags • A <span> ... </span> element defines an “inline” structure, i.e. it simply defines a stretch of text. Thus it can be used within a paragraph or table element without affecting the flow of the text. • A <div> ... </div> element defines a “block” structure. Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself.
  27. 27. CSS Font Properties • You can set following font properties of an element:  The font-family property is used to change the face of a font.  The font-style property is used to make a font italic or oblique.  The font-variant property is used to create a small-caps effect.  The font-weight property is used to increase or decrease how bold or light a font appears.  The font-size property is used to increase or decrease the size of a font.
  28. 28. font-family • <p style="font-family: georgia, garamond, serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> • Output: This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.
  29. 29. Generic Font Family • These are the generic name values for the font-family property, followed by an example of each that the browser might select from the user’s system fonts: 29 Generic font-family Names Example serif Times New Roman sans-serif Arial cursive Zapf-Chancery fantasy Western monospace Courier
  30. 30. font-style • <p style="font-style: italic;"> This text will be rendered in italic style. </p> • Output: This text will be rendered in italic style. • Possible Values: normal, italic, oblique(more slanted than normal) 30
  31. 31. font-size • <p style="font-size: 20pt;"> This font size is 20 pixels. </p> • Output: This font size is 20 points. • Possible values: px, small, xx-small, x-small, medium, large,31
  32. 32. font-weight • <p style="font-weight: bold;"> This font is bold. </p> • Output: This font is bold. • Possible values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 32
  33. 33. font-variant • <p style="font-variant: small-caps;"> This text will be rendered in small caps. </p> • Output: THIS TEXT WILL BE RENEDERED AS SMALL CAPS. • Possible values: normal, small-caps 33
  34. 34. line-height • The line-height property is used to set the vertical distance between the baselines of adjacent lines of text. • You can use only this property with block- level elements. 34
  35. 35. CSS Text Formatting • You can set following text properties of an element:  The color property is used to set the color of a text.  The letter-spacing property is used to add or subtract space between the letters.  The word-spacing property is used to add or subtract space between the words.  The text-indent property is used to indent the text of a paragraph.  The text-align property is used to align the text of a document.
  36. 36.  The text-decoration property is used to underline, overline and strikethrough text.  The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.  The text-shadow property is used to set the text shadow around a text.  The white-space property is used to control the flow and formatting of text. 36
  37. 37. color • <p style=“color: red;” > This text will be written in red. </p> • Output: This text will be written in red. • Possible values: any color name in any valid format. 37
  38. 38. letter-spacing • <p style=“letter-spacing: 5px;” > This text is having space between letters. </p> • Output: T h i s t e x t i s h a v i n g s p a c e b e t w e e n l e t t e r s. • Possible values: 38
  39. 39. word-spacing • <p style=“word-spacing: 5px;” > This text is having space between words. </p> • Output: This text is having space between words. • Possible values: 39
  40. 40. text-indent • The text-indent property is used to indent only the first line of text within an element. • The default value for this property is 0. • It only applies to block-level elements. 40
  41. 41. text-indent • <p style=“text-indent: 1cm;” > This text will have first line indent by 1cm. and this line will remain at its actual position. </p> • Output: This text will have first line indent by 1cm. and this line will remain at its actual position. 41
  42. 42. text-decoration • <p style=“text-decoration: underline;” > This will be underline. </p> • Output: This will be underline. • Possible values: none, underline, overline, line-through, blink 42
  43. 43. text-transform • <p style=“text-transform: uppercase;” > This will be in uppercase. </p> • Output: THIS WILL BE IN UPPERCASE. • Possible values: none, capitalize, uppercase, lowercase 43
  44. 44. white-space • The white-space property is used to specify whether the blank space between words both horizontally and vertically is collapsed to a single character space or is retained and preserved as is. • The white space property is used with block-level elements. 44
  45. 45. white-space • <p style=“white-space: pre;” > This text has a line break and the white-space pre setting tells the browser. </p> • Output: This text has a line break and the white-space pre setting tells the browser. 45
  46. 46. text-shadow • <p style=“text-shadow: 4px 4px 8px blue;” > If your browser supports the css text- shadow property, this text will have a blue shadow. </p> • Output: • Possible values: 46

×