Cascading style sheets

1. Cascading Style Sheets By Dr.Smitha.P.S Associate Professor Velammal Engineering College

2. 1.0 Introduction to Cascading Style Sheets • What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles were added to HTML 4.0 to solve a problem • CSS can save a lot of work • External Style Sheets are stored in CSS files

3. • CSS Solved a Big Problem • HTML was never intended to contain tags for formatting a document. • HTML was intended to define the content of a document, like: • <h1>This is a heading</h1> • <p>This is a paragraph.</p> • When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. • To solve this problem, the World Wide Web Consortium (W3C) created CSS. • In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. • All browsers support CSS today. • The key property of style sheet technology is that it can be used to separate the presentation of information from the information content and semantic tagging. • Style sheets gives all the elements on a page a consistent appearance

4. 2.0 CSS Core Syntax CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: 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. CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:

5. CSS Example • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces: • p {color:red;text-align:center;} • To make the CSS code more readable, you can put one declaration on each line. • In the following example all <p> elements will be center-aligned, with a red text color:

6. • <!DOCTYPE html> • <html> • <head> • <style> • p { • color: red; • text-align: center; • } • </style> • </head> • <body> • <p>Hello World!</p> • <p>This paragraph is styled with CSS.</p> • </body> • </html>

8. 3.0 Cascading Style Sheet Features Three Ways to Insert CSS There are three ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style

9. External Style Sheet • An external style sheet is ideal when the style is applied to many pages. • With an external style sheet, you 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“ title=“style1”/> </head> • An external style sheet can be written in any text editor. • The file should not contain any html tags. • Your style sheet should be saved with a .css extension.

10. • An example of a style sheet file is shown below: • hr {color:sienna;} p {margin-left:20px;} body {background- image:url("images/back40.gif");} • Do not add a space between the property value and the unit (such as margin-left: 20 px). The correct way is: margin-left:20px

11. Internal Style Sheet • Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style> h1 {color:blue;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

12. Inline Styles An inline style may be used to apply a unique style for a single element. • An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly! • To use inline styles you use the style attribute in the relevant tag. • The style attribute can contain any CSS property. • The example shows how to change the color and the left margin of a paragraph: • <p style="color:blue;margin-left:20px">This is a paragraph.</p>

13. Multiple Style Sheets • If some properties have been defined for the same selector in different style sheets, the value will be inherited from the more specific style sheet. • For example, assume that an external style sheet has the following properties for the <h1> element: • h1 { color: navy; margin-left: 20px; } • then, assume that an internal style sheet also has the following property for the <h1> element: • h1 { color: orange; } • If the page with the internal style sheet also links to the external style sheet the properties for the <h1> element will be: • color: orange; margin-left: 20px; • The left margin is inherited from the external style sheet and the color is replaced by the internal style sheet. •

14. Cascading order • Browser default • External and internal style sheets (in the head section) • Inline style (inside an HTML element) • So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). • If the link to the external style sheet is placed below the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

15. External style sheet types Style sheets can be associated with documents using a list of link elements in the head. There are three different relationships external style sheets can have with the document: persistent, preferred, and alternate. Persistent • These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. • They can be used for shared rules common to every style sheet. • To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set. • To make the style sheet paul.css persistent, the following link element would be included in the head: • <link rel="stylesheet" type="text/css" href="paul.css" />

16. Preferred • These style sheets are enabled by default (they are “on” when the page is loaded). • They can then be disabled if the user selects an alternate style sheet. • To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute. • Several preferred style sheets can be grouped together by giving them identical title attributes. • These grouped style sheets are then all enabled and disabled together. • If more than one group of preferred style sheets are declared, the first group takes precedence. • To make paul.css preferred, a title attribute is added, giving the default style a name. • <link rel="stylesheet" type="text/css" href="paul.css" title="bog standard" />

17. Alternate(user selection) • These style sheets can be selected by the visitor as alternatives to the preferred style sheet. • This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility. • To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. • As with preferred sheets, these style sheets can also be grouped together by giving them identical title attributes. • Using the previous example again; to make paul.css into an alternate style sheet, the keyword “alternate” is added to the rel attribute. • <link rel="alternate stylesheet" type="text/css" href="paul.css" title="wacky" /> • Note that these relationships only apply to external style sheets which are included using the link element.

18. External Style Sheet-Media Attribute <link rel=“stylesheet” type=“text/css” href=“style1.css” media=“screen,tv,projection”/> Possible values for media attribute Value Media type All All types Aural Speech synthesizer Braille Device generating braille characters Handheld Handheld device such as cellphone or PDA Print Printer Projection Projector Screen Computer monitor Tv television

19. 4.0 Selector Strings • Type Selector • Universal Selector • ID Selector • Class Selector – Pseudo classes • Descendant Selector

20. CSS Example-Type Selector <html> <head> <style> p { color:red; text-align:center; } h1,h2,h3,h4,h5,h6 {background-color:green} </style> </head> <body> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> <h1>hai</h1> </body> </html>

21. Universal Selector • The * selector selects all elements. • The * selector can also select all elements inside another element <html> <head> <style> * { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <p>My best friend is Mickey.</p> </body> </html>

22. Universal Selector <html> <head> <style> div * { background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div > <p >My name is Donald.</p> <p >I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> </body> </html>

23. ID Selector • The id Selector • 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 "#". <html> <head> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>

24. Class Selector • The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several 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 ".“ • <html> • <head> • <style> • .center • { • text-align:center; • } • </style> • </head> • <body> • <h1 class="center">Center-aligned heading</h1> • <p class="center">Center-aligned paragraph.</p> • </body> • </html>

25. Pseudo classes • CSS pseudo-classes are used to add special effects to some selectors. • Syntax • The syntax of pseudo-classes: • selector:pseudo-class {property:value;} • CSS classes can also be used with pseudo- classes: • selector.class:pseudo-class {property:value;}

26. <html> <head> <style> a:link {color:red;} /* unvisited link */ a:visited {color:blue;} /* visited link */ a:hover {color:green;} /* mouse over link */ a:active {color:yellow;} /* selected link */ </style> </head> <body> <p><b><a href="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p> </body> </html>

27. Descendant Selector A selector may be specialised so that it holds only within the content of certain element types. Ul span {font-variant:small-caps} The above statement says that the text within a span element that is in turn part of the content of an unordered or bulleted list should be displayed in small-cap font form.

28. Descendant Selector Class selector can also be included in the ancestor list. .special span Would apply to any span element within the content of any element belonging to the class special. Ul ol li {letter-spacing:1cm} Applies only to an li element within ol element that is within a ul element.

29. At-Rules The @import at-rule is a mechanism for importing one style sheet into another. It should be followed by a URI value and a semicolon, but it’s possible to use a string value instead of the URI value. @import url(“ a.css”); The @import rules in a style sheet must precede all rule sets

30. 5.0 Style Inheritance *while cascading is based on the structure of style sheets,inheritance is based on the tree structure of the document itself *An element inherits a value for one of its properties by checking to see if its parent element in the document has a value for that property and if so,inheriting the parents value. *The parent may in turn inherits a property value from its parent and so on.

31. Few points about inheritance • The height property of an element is not inherited from it parent • The value contained in a style declaration for a property is known as the specified value for the property.This property can be either relative or absolute.An absolute value is a value that can be understood without the need for any context such as the value 2cm.A relative value on the other hand cannot be understood without knowing some context.for example the property declaration font- size:larger uses the relative value larger to set the size of the font of an element. • CSS2 recommendantion allows every style property to be given the value inherit,whether or not the property is inherited normally.

32. 6.0 Text Properties 1)Text Color • The color property is used to set the color of the text. • With CSS, a color is most often specified by: • a HEX value - like "#ff0000" • an RGB value - like "rgb(255,0,0)" • a color name - like "red"

33. Text Color-Example <html> <head> <style> body {color:red;} h1 {color:#00ff00;} .ex {color:rgb(0,0,255);} </style> </head> <body> <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> </body> </html>

34. Text Color contd… Colors in CSS can be specified by the following methods: Hexadecimal colors RGB colors Hexadecimal Colors • Hexadecimal color values are supported in all major browsers. • A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 0 and FF. • For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 0. RGB Colors • RGB color values are supported in all major browsers. • An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%). • For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0. • Also, the following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).

35. Formats for specifying numeric color values Format Example Functional,integer arguments Rgb(255,170,0) Functional,percentage arguments Rgb(100%,66.7%,0%) Hexadecimal #ffaa00 Abbreviated hexadecimal #fa0 Divide 170/255

36. Color names and RGB Values Color Name RGB Value Black #000000 Gray #808080 Silver #c0c0c0 White #ffffff Red #ff0000 Lime #00ff00 Blue #0000ff Yellow #fffff00 Maroon #800000 Green #008000 Acqua #00ffff

37. 2.Text Formatting Primary CSS text properties property Text-decoration Letter-spacing Word -spacing Text-transform Text-indent Text-align White-space

38. Text-decoration The text-decoration property specifies the decoration added to text. • Property Values • none -Defines a normal text. • Underline- Defines a line below the text • overline -Defines a line above the text • line-through - Defines a line through the text • Blink - Defines a blinking text

39. Text decoration-example <!DOCTYPE html> <html> <head> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p> </body> </html>

40. Letter-spacing • The letter-spacing property increases or decreases the space between characters in a text. • Property Values • Normal - No extra space between characters. This is default • length -Defines an extra space between characters (negative values indicate space to be removed)

41. Word-spacing The word-spacing property increases or decreases the white space between words. • Property Values • normal -Defines normal space between words . • length - Defines an extra space between words in px, pt, cm, em, etc. • Negative values indicate space to be removed

42. Text-transform The text-transform property controls the capitalization of text. Property Values • none - No capitalization. The text renders as it is. This is default • Capitalize- Transforms the first character of each word to uppercase • uppercase -Transforms all characters to uppercase • lowercase -Transforms all characters to lowercase

43. Text-indent The text-indent property specifies the indentation of the first line in a text-block. • Property Values • length Defines a fixed indentation in px, pt, cm, em, for box width etc. • % Defines the indentation in % of the width of the parent element

44. Text indent-Example <html> <head> <style> p {text-indent:50px;} </style> </head> <body> <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> </body> </html>

45. Text-align The text-align property specifies the horizontal alignment of text in an element. • Property Values left- Aligns the text to the left right -Aligns the text to the right center- Centers the text justify - Stretches the lines so that each line has equal width (like in newspapers and magazines)

46. White-space The white-space property specifies how white-space inside an element is handled. • Property Values • normal - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default • Nowrap - Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encountered • pre - Whitespace is preserved by the browser. Text will only wrap on line breaks Acts like the <pre> tag in HTML

47. Text Properties • Css defines a direction property which specifies the direction in which the text is written. • Ltr indicate left to right language and rtl indicates right to left. Font Families A font family is a collection of related fonts,and a font is a mapping from a character to a visual representation of the character(glyph).Each glyph is drawn relative to a rectangular character cell. The font family to be used for displaying text within an HTML element is specified using the font-family style property.

48. 3.CSS generic font families Font family Description Serif A serif is a short decorative line at the end of the stroke of a letter Sans-serif Usually proportionately spaced Cursive Looks more like cursive handwriting and printing Fantasy Glyphs are still recognizable but are non traditional Monospace All glyphs have the same width.

49. 4.Length specification in CSS • In css the size of the font is specified using the font-size property. • Some example declaration include Font-size:0.25in Font-size:12pt Font-size:15px Css length identifiers Identi fier meaning In Inch Cm centimeter Mm Millimeter Pt Point:1/72 inch Pc Pica:12 points Px Pixel;1/96 inch Em Em:reference font size Ex Ex:roughly the height of lowercase “x” character in the reference font

50. Length specification in CSS • Mozilla 1.4 and IE 6 maintain the relationship 1in = 2.54 cm = 25.4mm=72pt=6pc=96px both on screen and when printing document • Absolute units do not depend on other style property values.(e.g) in,cm,mm • Relative units depend on the medium displaying the document.(e.g) px

51. Some features and quantities defined by a font Baseline height is the distance from the bottom of a character cell to an imaginary line known as the baseline. M x Cell height Ex height Baseline height baseline

52. 5.Font Properties • Additional font-style properties Property Possible values Font-style Normal,italic,oblique Font-weight Bold,normal Font-variant Small-caps,normal

53. 5.Line Boxes • Each line box contains one line of text. The height of a line box is precisely the height of a character cell . • The height of the box will be number of line boxes multiplied by the height of character cell. • The browsers default setting of the height of line boxes can be overridden by specifying a value for the line height property • Line-height:1.5em Line height:150% Line-height:1.5

54. Line boxes T h I s I s G Half-Leading Text Cell Height Half-Leading Line-height

55. 7.0 Some other useful style properties 1.Lists The list-style-type specifies the type of list-item marker in a list. <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li>

56. Style Properties 2.tables Table Borders • To specify table borders in CSS, use the border property. • The example below specifies a black border for table, th, and td elements: • Example • table, th, td { border: 1px solid black; } Collapse Borders • The border-collapse property sets whether the table borders are collapsed into a single border or separated: • Example • table { border-collapse:collapse; } table,th, td { border: 1px solid black; } Table Width and Height • Width and height of a table is defined by the width and height properties. • The example below sets the width of the table to 100%, and the height of the th elements to 50px: • Example • table { width:100%; } th { height:50px; }

57. Style Properties 2.tables Table Text Alignment • The text in a table is aligned with the text-align and vertical-align properties. • The text-align property sets the horizontal alignment, like left, right, or center: • Example • td { text-align:right; } • The vertical-align property sets the vertical alignment, like top, bottom, or middle: • Example • td { height:50px; vertical-align:bottom; } Table Padding • To control the space between the border and content in a table, use the padding property on td and th elements: • Example • td { padding:15px; } Table Color • The example below specifies the color of the borders, and the text and background color of th elements: • Example • table, td, th { border:1px solid green; } th { background-color:green; color:white; }

58. Style Properties 3.Cursor Styles The cursor property specifies the type of cursor to be displayed when pointing on an element. <html> <body> <p>Mouse over the words to change the cursor.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>

59. 8.0 CSS BOX MODEL Padding-top Padding- right Padding- bottom Padding -left Content Height Content width Border-bottom-width Border-top-width Margin-top Margin-bottom Border -left- width Margin -left Border- right- width Margin -right Box width B o x h e i g h t

60. CSS box model-basic concepts and properties <html> <head> <style> div.ex { width:320px; padding:10px; border:5px solid gray; margin:0px; } </style> </head> <body> <div class="ex">The picture above is 250px wide. The total width of this element is also 250px.</div> </body> </html>

61. Box model shorthand properties Property 1.padding-{top,right,bottom,left} 2.border-{top,right,bottom,left}-width 3.border-{top,right,bottom,left}-color 4.border-{top,right,bottom,left}-style 5. border-{top,right,bottom,left} 6.margin- {top,right,bottom,left} Number of values Meaning One Assign this value to all four asscoiated properties{top,right,bottom,left} Two Assign first value to associated top and bottom properties , second value to associated right and left position Three Assign first value to associated top property, second value to right and left , and third value to bottom Four Assign first value to associated top property,second to right,third to bottom and fourth to left

62. Box model shorthand properties- example Padding:30px is equivalent to four declaration Padding-top:30px; Padding-right:30px; Padding-bottom:30px; Padding-left:30px; Margin:15px 45px 30px is equivalent to Margin-top:15px Margin-right:45px Margin-left:45px Margin-bottom:30px

Cascading style sheets

Cascading style sheets

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Cascading style sheets

Similar a Cascading style sheets(20)

Más de smitha273566

Más de smitha273566(6)

Último

Último(20)

Cascading style sheets