Cascading Style Sheets (CSS): An Introduction

Transcript Cascading Style Sheets (CSS): An Introduction

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”>Lorem ipsum</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 subsections 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
<p>Now the background image is only show once,
from the text.</p>
<p>In this example we have also added a margin
the background image will never disturb the
</body>
</html>
example.</p>
and positioned away
on the right side, so
text.</p>
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 Sheets (CSS): An Introduction

Transcript Cascading Style Sheets (CSS): An Introduction

Directory