1 / 66

TP 2543 Web Programming Cascading Style Sheet (CSS)

TP 2543 Web Programming Cascading Style Sheet (CSS). 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

kenyon-turner
Download Presentation

TP 2543 Web Programming Cascading Style Sheet (CSS)

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

More Related