1 / 95

Unit-3 Style Sheets

Unit-3 Style Sheets. Prepared by: Prof. Harish I Rathod Computer engineering department Gujarat power engineering & Research institute. WEB APPLICATION DEVELOPMENT (170705). Need for CSS. HTML concerned with structural elements of a document . Elements include:

zudora
Download Presentation

Unit-3 Style Sheets

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. 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

More Related