AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech...
-
Upload
randolf-reed -
Category
Documents
-
view
231 -
download
0
Transcript of AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech...
![Page 1: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/1.jpg)
AGENDA
•Introduction•Syntax•How to use style specifications.•Styles
CSS TutorialCSS Tutorial
Miftahul HudaSpeech Signal Processing Research Group
Digital Signal Processing LaboratoryEEPIS
![Page 2: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/2.jpg)
• IntroductionIntroduction
Applying multiple sheets to a single document
![Page 3: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/3.jpg)
• 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>
![Page 4: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/4.jpg)
•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>
![Page 5: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/5.jpg)
• SyntaxSyntax
selector {property: value}
Examples:
body {color: black}p {font-family: "sans serif"}p {text-align:center;color:red}
![Page 6: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/6.jpg)
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
![Page 7: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/7.jpg)
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>...
![Page 8: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/8.jpg)
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!
![Page 9: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/9.jpg)
Follow a demonstration
![Page 10: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/10.jpg)
Working with the Box Model
The box model is an element composed of four sections:
– Margin– Border– Padding– content
![Page 11: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/11.jpg)
![Page 12: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/12.jpg)
Rounded corners in CSS
![Page 13: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/13.jpg)
<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>
![Page 14: AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bff81a28abf838cbf403/html5/thumbnails/14.jpg)
<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>