Session 8: Cascading Style Sheet J 0394 – Perancangan Situs Web Program Studi Manajemen Program Studi Manajemen Universitas Bina Nusantara

BWD Bina Nusantara University 2 Cascading Style Sheet HTML was originally developed primarily as a universal coding system that would enable anyone to view the same pages. HTML offered structural formatiing but did not allow designers much control over the appearance of the page. While the browser manufacturers were trying to satisfy this, the World Wide Web Consortium went to work on a system that would keep HTML universal while allowing designers more control over the look of their pages that is called Cascading Style Sheet

BWD Bina Nusantara University 3 Cascading Style Sheet (2) CSS is a simple style that let you assign several properties at once to all the elements on your page marked with a particular TAG. For example, display H1 headers in a particular size, font, and color.

BWD Bina Nusantara University 4 Cascading Style Sheet (3) The Advantages of using Style Sheet: –Save time –Easy to change –Computers are better at applying styles consistently than you are –Styles let you control text in ways that are out of reach of HTML TAGS –Styles make it easy to create a common format for all your Webpages and you still only have to define the style once

BWD Bina Nusantara University 5 Cascading Style Sheet (4) Disadvantages of using style sheets: –No browser supports them completely. –CSS is in a state of change –Take a more time to learn how to use them, because they have a distinct syntax.

BWD Bina Nusantara University 6 Cascading Style Sheet (5) The Anatomy of a Style: –Made up of a tag name –Each definition contains a property, a colon, and one or more values –Some properties can be grouped together with a special umbrella property

BWD Bina Nusantara University 7 The Anatomy of a Style (continued): –Definition always look the same, whether the style is applied locally, internally, or externally. The only difference is in the punctuation surrounding them (curly brackets vs. quote marks) –Some properties are automatically inherited from tag to tag.

BWD Bina Nusantara University 8 Cascading Style Sheet (6) Style Sheets Properties : –Colour and background properties –Font properties –Text properties –Box properties –Classification properties –Positioning properties –Printing properties –Filter properties –Miscellaneous properties

BWD Bina Nusantara University 9 Cascading Style Sheets (7) Colour and Background Properties –color:”color_value” –background-color:”color_value | transparent” –background-image:”URL | none”

BWD Bina Nusantara University 10 Cascading Style Sheets (8) Font Properties –font-size:”absolute_size | relative_size | length | percentage” –font-family:“[[family_name | generic_family],]* [family_name | generic_family]” –font-weight:”normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900” –font-style:”normal | italic | oblique”

BWD Bina Nusantara University 11 Cascading Style Sheets (9) Text Properties –letter-spacing:”normal | length” –text-decoration:none | [ underline || overline || line-through || blink ] –text-align:“right | left | center | justify” –text-indent:”length | percentage”