TP 2543 Web Programming Cascading Style Sheet (CSS) - PowerPoint PPT Presentation

tp 2543 web programming cascading style sheet css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
TP 2543 Web Programming Cascading Style Sheet (CSS) PowerPoint Presentation
Download Presentation
TP 2543 Web Programming Cascading Style Sheet (CSS)

play fullscreen
1 / 66
TP 2543 Web Programming Cascading Style Sheet (CSS)
237 Views
Download Presentation
kenyon-turner
Download Presentation

TP 2543 Web Programming Cascading Style Sheet (CSS)

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

  1. TP 2543 Web ProgrammingCascading Style Sheet (CSS)

  2. Our objectives are… • Introducing Cascading Style Sheets • Working with Selectors • Using Inline Styles, Embedded Styles and External Style Sheet • Understanding Cascading Order • Working with the Box Model • Using Pseudo-Classes and Pseudo-Elements • Positioning Objects with CSS

  3. Introduction • CSS is a instruction tag which are used to format text, object and layout • Advantages of CSS • Time effective • Easy to edit • Loading time

  4. Element in CSS • Comment • Start with /* and end with */ • HTML Comment Delimiters • Are use to make sure the browser know the style element. • Start with the selector and then by the properties (attributes and values)

  5. H1 is a selector, followed by attribute and values. In between of attribute and values are separate with colon (:). And each attributes and values are separate with semicolon (;). H1 {background-color:gray; color:green; }

  6. Types of Selector • simple selector • ID selector • class selector • Grouped selector • contextual selector

  7. Simple Selector • Any HTML elements • For example… <style type="text/css"> p {font-size:12pt; color:#6666ff} </style>

  8. 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 "#". <style type="text/css"> #para1{ text-align:center; color:red } </style> </head> <body> <p id="para1“>DESIGN USING CSS</p> <p>This paragraph is not affected by the style.</p> </body></html> Example

  9. Class Selector • The selector can be owned by many classes. • Its allowed the element to have many style. • The class selector uses the HTML class attribute, and is defined with a "." <style type=“text/css”> H1.blue {color : blue} H1.red {color : red; font_weight : bold} </style> </head> <body> <H1 class=blue> A blue Header</H1> <H1 class=red> A Red Header</H1> </body> Example

  10. Class Selector • The class also can be create without combine with HTML tag. • This style will help the designer to use the class at different elements. <style type=“text/css”> .bluetext {color:blue; font-weight:bold} </style> </head> <body> <p class=bluetext> paragraph with bold and blue text. </p> <H2 class=bluetext> Header with bold and blue text </H2> Example

  11. Applying a style to a class

  12. Applying a style to a class and element

  13. Grouped Selector • The selector can be group if the properties and values are same. body {font-size: 12px; } body {font-family: arial, helvetica, sans-serif;} th {font-size: 12px; font-family: arial, helvetica, sans-serif;} td {font-size: 12px; font-family: arial, helvetica, sans-serif;} body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;} body, th, td{font:12px arial,helvetica,sans-serif;}

  14. Contextual Selector • Two or more simple selector are combine to perform a style • So… all the selector can use the same style. OR <style type=“text/css”> P EM {font-weight:bold} </style> H1 B, H2 B, H1 EM, H2 EM { color: red } H1 B { color: red } H2 B { color: red } H1 EM { color: red } H2 EM { color: red } equivalent to

  15. Types of CSS • There are 3 types of CSS • Inline CSS – in the same HTML page as a properties of tag HTML. In <BODY>…</BODY> • Embedded CSS – in the same page but are located in <HEAD>…</HEAD> • External CSS – in the new page (.css)

  16. Inline CSS • Inline styles are easy to use and interpret because they are applied directly to the elements they affect. • Can be use in many types of elements. • Located in between of HTML tag in <BODY>…</BODY> <p style=“font-size : 12pt; color :#0000ff”>Teks</p>

  17. Example: Inline CSS <html> <head> <title>Inline Styles</title> </head> <body> <p>This text does not have any style applied to it.</p> <p style = "font-size: 20pt">This text has the <em>font-size</em> style applied to it, making it 20pt. </p> <p style = "font-size: 20pt; color: #0000ff"> This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p> </body> </html>

  18. Using Embedded Styles • You can embed style definitions in a document head using the following form: <style> style declarations </style> Where style declarations are the declarations of the different styles to be applied to the document

  19. Embedded CSS • Suitable to the text with multiple format. • Create in <HEAD>…</HEAD> <html> <head> <title>Style Sheets</title> <style type = "text/css"> em{ background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt } .special { color: blue } </style> </head>

  20. <style type = "text/css"> em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt } .special { color: blue } </style> Embedded CSS <body><h1 class = "special“ >Deitel & Associates, Inc.</h1> <p>Deitel& Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technology and object technology education. Deitel & Associates, Inc. is a member of the World Wide Web Consortium. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology.</p> <h1>Clients</h1> <p class = "special">The company's clients include many <em>Fortune 1000 companies</em>, government agencies, branches of the military and business organizations. Through its publishing partnership with Prentice Hall, Deitel & Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses.</p> </body></html> Example

  21. Using an External Style Sheet • Because an embedded style sheet only applies to the content of the start.html file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site • An external style sheet is a text file that contains style declarations • It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site

  22. Using an External Style Sheet • You can add style comments as you develop an external style sheet • Use the link element to link a Web page to an external style sheet • You can import the content of one style sheet into another • You can link a single style sheet to multiple documents in your Web site by using the link element or the @import element • You can also link a single document to several style sheets

  23. External CSS • Advantages • Easy to edit • Time consuming • Type of this files is (.css) • To link to the .css file need to define in <HEAD>

  24. Example of external CSS <html > <head> <title>Linking External Style Sheets</title> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p> <a href = "http://www.food.com">Go to the Grocery store</a> </p> </body> </html>

  25. /* styles.css */ /* An external stylesheet */ a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } liem { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ulul { text-decoration: underline; margin-left: .5cm }

  26. Example of external CSS /* styles.css */ a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } liem { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ulul { text-decoration: underline; margin-left: .5cm } <html > <head> <title>Linking External Style Sheets</title> <link rel = "stylesheet" type = "text/css" href = "styles.css" /> </head> <body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread</li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p> <a href = "http://www.food.com">Go to the Grocery store</a> </p> </body> </html> Example

  27. Applying a single style sheet to multiple documents

  28. Applying multiple sheets to a single document

  29. Style Precedence • External style sheet • Embedded styles • Inline styles Less precedence More precedence

  30. Pseudo Class • A pseudo-class is a classification of an element based on its status, position, or current use in the document • Same as other class, but the different is it will represent just for one element. Involved of element A (anchor). Selector : pseudo-class {property : value} selector.class : pseudo-class {property : value}

  31. <style type=“text/css”> A:link {color:red} A:active {color:blue; font-size:125%} A:visited {color:navy; font-size :85%} </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> Example

  32. Pseudo- Element • This are use to format a part of document without know the content. • Pseudo-elements are elements based on information about an element’s content, use or position • CSS pseudo-elements are used to add special effects to some selectors. • There are 2 types • First line • First letter Selector : pseudo-element {property : value} selector.class : pseudo-element {property : value}

  33. <html> <head> <style type="text/css"> P:first-line {font-weight:bold} P:first-letter {font-size:300%; float:left; color:red} </style> </head> <body> <p>You can use the :first-letter pseudo-element to add a special effect to the first letter of a text and :first-line pseudo-element to add a special effect to the first line of a text.</p> </body> </html> Example

  34. Elemen DIV • Use to change style in one section • Suitable to be use in inline style <DIV align=center>Text and or image</DIV> <DIV style=“color:green”>Sentence or two of text </DIV>

  35. Can be combine with class selector in embedded style <style type=“text/css”> .boldblue {color:blue; font-weight:bold} </style> <BODY> <DIV class=boldblue>Text</DIV>

  36. Element SPAN • SPAN tag allowed to create style to certain words or to certain character. <p>You can use the <SPAN class=bluebold>SPAN tag with the CLASS attribute </SPAN> to apply a Style to a few words or even a few le<SPAN class=bluebold>tter</SPAN>s within a word. You can use the SPAN tag with the CLASS attribute to apply a Style to a few words or even a few letters within a word.

  37. Font Style

  38. Text Formating Style

  39. Background Style

  40. Background <html> <head> <title>Background Images</title> <style type = "text/css"> body { background-image: url(ukm_logo.jpg); background-position: bottom right; background-repeat: no-repeat; background-attachment: fixed; } p { font-size: 18pt; color: #aa5588; text-indent: 1em; font-family: arial, sans-serif; } .dark { font-weight: bold; color:blue} </style> </head> <body> <p> This example uses the background-image, background-position and background -attachment styles to place the <span class = "dark"> UniversitiKebangsaan Malaysia </span> logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window. </p> </body> </html> Example

  41. List Style

  42. Text Flow and Box Model • Value measurement • Px-pixels • Pt-point • In-inches • Cm-centimetres

  43. Text Flow and Box Model

  44. Text Flow and Box Model <html><head> <style type="text/css"> div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head><body> <imgsrc="logo-ukm.jpg" width="250" height="5" /><br /><br /> <div class="ex">The line above is 250px wide.<br /> The total width of this element is also 250px.</div> <p><b>Important:</b> This example will not display correctly in IE!<br /> However, we will solve that problem in the next example.</p> </body></html> Example

  45. Text Flow and Box Model For more example : • http://www.dev-archive.net/articles/layer-examples.html

  46. Border Styles

  47. Border Styles <body> <div style = "border-style: solid">Solid border</div></br> <div style = "border-style: double">Double border</div></br> <div style = "border-style: groove">Groove border</div></br> <div style = "border-style: ridge">Ridge border</div></br> <div style = "border-style: inset">Inset border</div></br> <div style = "border-style: outset">Outset border</div></br> </body> Example

  48. More Border Styles Example <head><style type = "text/css"> body { background-color: #ccffcc } div { text-align: center; margin-bottom: 1em; padding: .5em } .thick { border-width: thick } .medium { border-width: medium } .thin { border-width: thin } .groove { border-style: groove } .inset { border-style: inset } .outset { border-style: outset } .red { border-color: red } .blue { border-color: blue } </style> </head> <body> <div class = "thick groove">This text has a border</div> <div class = "medium groove">This text has a border</div> <div class = "thin groove">This text has a border</div> <p class = "thin red inset">A thin red line...</p> <p class = "medium blue outset"> And a thicker blue line</p> Example

  49. Positioning Objects with CSS • The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P • To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value;

  50. Stacking Elements • Specify stacking order with: z-index: value z-index: 1 z-index: 3 z-index: 2