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. – CSS allows us to make global and instantaneous changes easily.

Using Style Sheets External Style Sheet Embedded Styles body {} Inline Styles Lorem ipsum

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 This is my introduction text.intro { font: 12px verdana, sans-serif; margin: 10px; }

The Identifier Selector This is my introduction text #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 body { background-color:#b0c4de; } My CSS web page! Hello world! This is a W3Schools.com example. body { background-color:#b0c4de; } My CSS web page! Hello world! This is a W3Schools.com example.

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

Example 3 body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} This is heading 1 This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector. This is a paragraph with class="ex". This text is blue. body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} This is heading 1 This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector. This is a paragraph with class="ex". This text is blue.

Example 4 p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; } Some text. Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } p.three { border-style:solid; border-width:1px; } Some text. Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.

Example 5 div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The total width of this element is also 250px. Important: This example will not display correctly in IE! However, we will solve that problem in the next example. div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The total width of this element is also 250px. Important: This example will not display correctly in IE! However, we will solve that problem in the next example.

Questions?