Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Engineering - Introduction to CSS

1,496 views

Published on

Cascading Stylesheets

Published in: Education
  • Be the first to comment

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

×