Post on 21-Jan-2016
AGENDA
•Introduction•Syntax•How to use style specifications.•Styles
CSS TutorialCSS Tutorial
Miftahul HudaSpeech Signal Processing Research Group
Digital Signal Processing LaboratoryEEPIS
• IntroductionIntroduction
Applying multiple sheets to a single document
• IntroductionIntroduction
<HTML><HEAD><TITLE></TITLE><META name="description" content=""><META name="keywords" content=""><META name="generator" content="CuteHTML"></head><body><h1 >WARNING</h1><p >Don't go there!</p></body></html>
•IntroductionIntroduction<HTML><HEAD><TITLE></TITLE><META name="description" content=""><META name="keywords" content=""><META name="generator" content="CuteHTML"><style type="text/css"> .warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold}</style></head><body><h1 class="warning">WARNING</h1><p class="warning">Don't go there!</p></body></html>
• SyntaxSyntax
selector {property: value}
Examples:
body {color: black}p {font-family: "sans serif"}p {text-align:center;color:red}
How to ... - External Style SheetHow to ... - External Style SheetStyles are specified in an external file. This is the most common and useful way of using style specifications.
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>...
relationship
How to ... - Internal Style SheetHow to ... - Internal Style SheetStyles are specified inside the header of the HTML document.
<head><style type="text/css">
hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}
</style></head>...
How to ... - Inline stylesHow to ... - Inline stylesA style is applied to only one occurrence of an element.
<p style="color: sienna; margin-left: 20px">This is a paragraph
</p>
Use this methodsparingly!
Follow a demonstration
Working with the Box Model
The box model is an element composed of four sections:
– Margin– Border– Padding– content
Rounded corners in CSS
<style type="text/css">.roundcont {
width: 250px;background-color: #f90;color: #fff;
}
.roundcont p {margin: 0 10px;
}
.roundtop { background: url(tr.gif) no-repeat top right;
}
.roundbottom {background: url(br.gif) no-repeat top right;
}
img.corner { width: 15px; height: 15px; border: none; display: block !important;}
</style>
<body><div class="roundcont"> <div class="roundtop">
<img src="tl.gif" alt="" width="15" height="15"
class="corner" style="display: none" />
</div> <p> Teks isi
</p> <div class="roundbottom">
<img src="bl.gif" alt="" width="15" height="15"
class="corner" style="display: none" />
</div></div>
</body>