agenda introduction syntax how to use style specifications. styles css tutorial miftahul huda speech...
TRANSCRIPT
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>