1 / 23

Cascading Style Sheet

Cascading Style Sheet. Bayu Priyambadha, S.Kom. Definition. Cascading Style Sheets (CSS) form the presentation layer of the user interface. Structure (HTML ) Behavior (Client-Side Scripting) Presentation (CSS) Tells the browser agent how the element is to be presented to the user.

brittania-sellers
Télécharger la présentation

Cascading Style Sheet

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. Cascading Style Sheet Bayu Priyambadha, S.Kom

  2. Definition • Cascading Style Sheets (CSS) form the presentation layer of the user interface. • Structure (HTML) • Behavior (Client-Side Scripting) • Presentation (CSS) • Tells the browser agent how the element is to be presented to the user.

  3. Why CSS? • CSS removes the presentation attributes from the structure allowing reusability, ease of maintainability, and an interchangeable presentation layer. • HTML was never meant to be a presentation language. Proprietary vendors have created tags to add presentation to structure. • <font> • <b> • <i> • CSS allows us to make global and instantaneous changes easily.

  4. Using Style Sheets • External Style Sheet <link href=“stylesheet” type=“text/css” href=“location.css” /> • Embedded Styles <style type=“text/css”> body {} </style> • Inline Styles <p style=“font-size: 12px”>Loremipsum</p>

  5. CSS Syntax selector/element { property: value; } The selector can either be a grouping of elements, an indentifier, class, or single XHTML element (body, div, etc)

  6. Type (Element) Selector Specify the style(s) for a single XHTML element. body { margin: 0; padding: 0; border-top: 1px solid #ff0; }

  7. Grouping Elements Allows you to specify a single style for multiple elements at one time. h1, h2, h3, h4, h5, h6 { font-family: “Trebuchet MS”, sans-serif; }

  8. The Class Selector <p class=“intro”>This is my introduction text</p> .intro { font: 12px verdana, sans-serif; margin: 10px; }

  9. The Identifier Selector <p id=“intro”> This is my introduction text</p> #intro { border-bottom: 2px dashed #fff; }

  10. CSS Selectors • Identifier or class? What’s the difference? • An identifier is specified only once on a page and has a higher inheritance specificity than a class. • A class is reusable as many times as needed in a page. • Use identifiers for main sections and sub-sections of your document.

  11. CSS Fonts • Font-family • Font-weight • Font-style • Font-size

  12. CSS Units & Colors • Units • % • in • cm • mm • em • px • pt • Colors • color name (red, etc) • rgb(x,x,x) • #rrggbb (HEX)

  13. CSS Layout • Margin • Padding • Border • Z-index • Positioning • Width • Height • Float • Text-align • Vertical-align

  14. CSS Text • Text-indent • Text-align • Text-decoration • Letter-spacing • Text-transform • Word-spacing • White-space

  15. CSS Background • Background-color • Background-image • Background-position • Background-repeat

  16. CSS Lists • List-style • List-style-image • List-style-position • List-style-type

  17. CSS Shorthand • Consolidates many styles into a single declaration. font-family: verdana, sans-serif; font-weight: bold; font-size: 12px;  font: bold 12px verdana, sans-serif; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 10px;  padding: 5px 8px 5px 10px;

  18. Example 1 <html> <head> <style type="text/css"> body { background-color:#b0c4de; } </style> </head> <body> <h1>My CSS web page!</h1> <p>Hello world! This is a W3Schools.com example.</p> </body> </html>

  19. Example 2 <html> <head> <style type="text/css"> body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background no-repeat, set postion example.</p> <p>Now the background image is only show once, and positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p> </body> </html>

  20. Example 3 <html> <head> <style type="text/css"> body {color:red;} h1 {color:#00ff00;} p.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>

  21. Example 4 <html> <head> <style type="text/css"> p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; } </style> </head> <body> <p class="one">Some text.</p> <p class="two">Some text.</p> <p class="three">Some text.</p> <p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> </body> </html>

  22. Example 5 <head> <style type="text/css"> div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head> <body> <hr /> <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>

  23. Questions?

More Related