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.

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.

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>

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)

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

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; }

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

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

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.

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

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

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

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

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

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

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;

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>

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>

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>

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>

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>

Questions?

Cascading Style Sheet