Unit-3 Style Sheets - PowerPoint PPT Presentation

unit 3 style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Unit-3 Style Sheets PowerPoint Presentation
Download Presentation
Unit-3 Style Sheets

play fullscreen
1 / 95
Unit-3 Style Sheets
81 Views
Download Presentation
zudora
Download Presentation

Unit-3 Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Unit-3 Style Sheets Prepared by: Prof. Harish I Rathod Computer engineering department Gujarat power engineering & Research institute WEB APPLICATION DEVELOPMENT (170705)

  2. Need for CSS • HTML concerned with structural elements of a document. • Elements include: • Descriptions of paragraphs, • Lists, • Heading and • Hyperlink. GPERI – WAD - UNIT-2

  3. Need for CSS • If a page has no structure, • Then it become difficult to use in several ways: • Hard to follow and difficult to understand. • Search engine indexing become more difficult. • To solve this problem, • the World Wide Web Consortium (W3C) created CSS. GPERI – WAD - UNIT-2

  4. Introduction to CSS What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements: • Control of text color of any element. • Control of background colors. • Control of borders around elements. • Spacing between elements and borders. • Text manipulation and decoration. GPERI – WAD - UNIT-2

  5. Introduction to CSS What is CSS? • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save a lot of work • External Style Sheets are stored in CSS files. GPERI – WAD - UNIT-2

  6. Introduction to CSS What is CSS? • Ex: <h1>The main heading</h1> h1{ color:red; font: Times, serif; text-decoration:underline; background: black; } GPERI – WAD - UNIT-2

  7. Syntax and Structure What is CSS? <html> <head> <style> body {background-color:yellow;} h1 {font-size:36pt;} h2 {color:blue;} p {margin-left:50px;} </style> </head> GPERI – WAD - UNIT-2

  8. Syntax and Structure What is CSS? • Ex: <body> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <p>This paragraph has a left margin of 50 pixels</p> </body> </html> GPERI – WAD - UNIT-2

  9. Syntax and Structure Syntax: • A CSS rule has two main parts: • A selector, and • One or more declarations: GPERI – WAD - UNIT-2

  10. Syntax and Structure Syntax: • The selector is normally the HTML element you want to style. • Each declaration consists of a property and a value. • The property is the style attribute you want to change. • Each property has a value. • A CSS declaration always ends with a semicolon, • and declaration groups are surrounded by curly brackets: GPERI – WAD - UNIT-2

  11. Syntax and Structure Example: p{font-family: “sans serif” color:red;text-align:center;} GPERI – WAD - UNIT-2

  12. Syntax and Structure Classes: • Sometimes need to make several styles for the same HTML element: • The class selector is used to specify a style for a group of elements. • This allows you to set a particular style for many HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a ".“ p.right {text-align: right} p.left{text-align: left} Within HTML document: <p class=“right”> This paragraph will be right-aligned </p> GPERI – WAD - UNIT-2

  13. Syntax and Structure Classes: • In the example below, all HTML elements with class=“right" will be center-aligned: .right {text-align: right} Within HTML document: <p class=“right”> This paragraph will be right-aligned </p> GPERI – WAD - UNIT-2

  14. Syntax and Structure Classes: .left {text-align: left} We can apply this to multiple tags as long as they share the same class: <h1 class=“left”> This paragraph will be left-aligned </h1> <pclass=“left”> This paragraph will be left-aligned </p> GPERI – WAD - UNIT-2

  15. Syntax and Structure ID: • The id selector is used to specify a style for a single, unique element. • The id selector uses the id attribute of the HTML element, and is defined with a "#". GPERI – WAD - UNIT-2

  16. Syntax and Structure ID: • The style rule below will be applied to the element with id=“bluepara": p#bluepara { text-align: center; color: red; } GPERI – WAD - UNIT-2

  17. Syntax and Structure ID: • It will create a style rule, it will match a paragraph the id value bluepara . • For Ex: <p id=“bluepara”> Some interesting thoughts … </p> GPERI – WAD - UNIT-2

  18. Syntax and Structure ID: • Match any elements with the id of bluepara by using: #bluepara { Text-align: center; Color: red; } GPERI – WAD - UNIT-2

  19. Syntax and Structure Difference between Class and ID: • When a browser reads a style sheet, it will format the document according to it. • . GPERI – WAD - UNIT-2

  20. Syntax and Structure Pseudo-Class Selector: • Some selectors can be considered different, • because of the way the elements can work. • For example: • Anchor create a link between document, • it can have pseudo(virtual) classes attached to it. • Because it does not know at the time of writing the markup what the state will be? GPERI – WAD - UNIT-2

  21. Syntax and Structure Pseudo-Class Selector: • It could be visited, not visited or in the process of being selected. • To catch this state, we can use pseudo-class selectors: a:link { color: red } a:active {color: yellow } a:visited {color:green} GPERI – WAD - UNIT-2

  22. Syntax and Structure Pseudo-Class Selector: • More pseudo classes for example: a:hover { font-weight: bold } GPERI – WAD - UNIT-2

  23. Using CSS • There are three ways of inserting a style sheet: • External style sheet. • Internal style sheet (Embedded). • Inline style sheet. GPERI – WAD - UNIT-2

  24. Using CSS External style sheet: • It is an ideal when the style is applied to many pages. • We can change the look of an entire Web site by changing one file. • Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head><link rel="stylesheet" type="text/css" href="mystyle.css"></head> GPERI – WAD - UNIT-2

  25. Using CSS External style sheet: • An external style sheet can be written in any text editor. • The file should not contain any html tags. • External style sheet should be saved with a .css extension. • Example: hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");} GPERI – WAD - UNIT-2

  26. Using CSS Internal style sheet: • An internal style sheet should be used when a single document has a unique style. • We define internal styles in the head section of an HTML page, by using the <style>tag. GPERI – WAD - UNIT-2

  27. Using CSS Internal style sheet: • Example: <head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head> GPERI – WAD - UNIT-2

  28. Using CSS Inline style sheet: • To use inline styles you use the style attribute in the relevant tag. • The style attribute can contain any CSS property. • Example: <p style="color:sienna;margin-left:20px;"> This is a paragraph. </p> GPERI – WAD - UNIT-2

  29. Background Images, Colors And Properties • Using CSS, it is possible to: • Control the color of an element’s background, • Use an image in the background, • Tile an image (repeat it horizontally or vertically) or • Place an image at a specific place on page. GPERI – WAD - UNIT-2

  30. Background Images, Colors And Properties • CSSbackground properties: • background-color • background-image • background-repeat • background-attachment • background-position GPERI – WAD - UNIT-2

  31. Background Images, Colors And Properties Background-color: • The background-color property specifies the background color of an element. • The background color of a page is defined in the body selector: • Example: body{ backgroud-color : yellow; } GPERI – WAD - UNIT-2

  32. Background Images, Colors And Properties Background-color: • A color is most often specified by: • A HEX value - like "#ff0000" • An RGB value - like "rgb(255,0,0)" • Acolor name - like "red" GPERI – WAD - UNIT-2

  33. Background Images, Colors And Properties Background-image: • This property specifies an image to use as the background of an element. • By default, the image is repeated so it covers the entire element. • Example: body {background-image:url('paper.gif');} GPERI – WAD - UNIT-2

  34. Background Images, Colors And Properties Background-image – Repeat Horizontally or Vertically: • By default, the background-image property repeats an image both horizontally and vertically. • Some images should be repeated only horizontally or vertically • Example: body {background-image:url('paper.gif'); background-repeat:repeat-x; } GPERI – WAD - UNIT-2

  35. Background Images, Colors And Properties Background - attachment: • Sets whether a background image is fixed or scrolls with the rest of the page • Example: body{ background-image:url(‘hello.gif');background-repeat:no-repeat;background-attachment:fixed;} GPERI – WAD - UNIT-2

  36. Background Images, Colors And Properties Background - position: • Sets the starting position of a background image • Example: body{ background-image:url('smiley.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center; } GPERI – WAD - UNIT-2

  37. Manipulating Text Text - Color: • The color property is used to set the color of the text. • The default color for a page is defined in the body selector. • Example: body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);} GPERI – WAD - UNIT-2

  38. Manipulating Text Text - Alignment: • This property is used to set the horizontal alignment of a text. • Text can be aligned centered, or leftor right, or justified. • Example: h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;} GPERI – WAD - UNIT-2

  39. Manipulating Text Text - Decoration: • This property is used to set or remove decorations from text. • It is mostly used to remove underlines from links for design purposes: • Example: h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;} GPERI – WAD - UNIT-2

  40. Manipulating Text Text - Transformation: • This property is used to specify uppercase and lowercase letters in a text. • It can be used to turn everything into: • Uppercase or • Lowercase letters, or • Capitalize the first letter of each word. GPERI – WAD - UNIT-2

  41. Manipulating Text Text - Transformation: • Example: p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;} GPERI – WAD - UNIT-2

  42. Manipulating Text Text - Indentation: • It is used to specify the indentation of the first line of a text. • Example: p {text-indent:50px;} GPERI – WAD - UNIT-2

  43. Using Fonts Font Family: • In CSS, there are two types of font family name: • Generic family - • A group of font families with a similar look (like "Serif" or "Monospace") • Font family- • A specific font family (like "Times New Roman" or "Arial") • Example: p {text-indent:50px;} GPERI – WAD - UNIT-2

  44. Using Fonts Font Family: GPERI – WAD - UNIT-2

  45. Using Fonts Font Family: Difference Between Serif and Sans-serif Fonts GPERI – WAD - UNIT-2

  46. Using Fonts Font Family: • The font family of a text is set with the font-family property. • The font-family property should hold several font names. • If the browser does not support the first font, it tries the next font. • Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. GPERI – WAD - UNIT-2

  47. Using Fonts Font Family: • Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. • Note: • If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". • More than one font family is specified in a comma-separated list: GPERI – WAD - UNIT-2

  48. Using Fonts Font Family: • Example: p{font-family:"Times New Roman", Times, serif;} GPERI – WAD - UNIT-2

  49. Using Fonts Font - Style: • The font-style property is mostly used to specify italic text. • This property has three values: • Normal- The text is shown normally • Italic- The text is shown in italics • Oblique- The text is "leaning" (oblique is very similar to italic, but less supported) GPERI – WAD - UNIT-2

  50. Using Fonts Font - Style: • Example: p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;} GPERI – WAD - UNIT-2