cascading style sheet
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
Cascading Style SheetBayu 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”>Lorem ipsum</p>
CSS Syntaxselector/element {
property: value;
}
The selector can either be a grouping of elements, an indentifier, class, or single XHTML element (body, div, etc)
Type (Element) SelectorSpecify the style(s) for a single XHTML
element.
body { margin: 0; padding: 0; border-top: 1px solid #ff0;}
Grouping ElementsAllows 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?