Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download color:red - Irwan Sembiring
Document related concepts
no text concepts found
Transcript
Cascading Style Sheets (CSS) is a simple
mechanism for adding style (e.g., fonts,
colors, spacing) to Web documents
Dr. Irwan Sembiring,ST.,M.Kom
Advantage CSS
<style type=“type/css”>
H1 { color :red ;
font-family : “arial”;
}
</style>
<body>
<h1> welcome to web programming</h1>
<p> procrastinate now and panic later</p>
<h1> Magister of Computer Science</h1>
Style structure
H1 {color:red;}
H1= selector
Color = property
Red=value
; = semicolon
Declaration
we can declare document styles in several
ways.
1. Inline styles Individual element
<p>This text does not have any style applied to it.</p>
<p style = "font-size: 20pt">
<em>font-size</em> style applied to it, making it 20pt.
<p style = "font-size: 20pt; color: #6666ff"> This text has the
<em>font-size</em> and <em>color</em> styles applied to it, making it
20pt. and light blue.</p>
2. Embedded Style Sheets
• Embed an entire CSS document in an HTML * Head Section *
<style type = "text/css">
em { font-weight: bold;
color: black }
h1 { font-family: tahoma, helvetica, sans-serif }
p { font-size: 12pt; font-family: arial, sans-serif }
.special { color: #6666ff }
</<style>
<body>
<h1 class = "special">Deitel & Associates, Inc.</h1>
<p> universitas Kristen satya wacana</p>
<h1>Clients</h1>
<p class = "special"> The company's clients include many
<em>Fortune 1000 companies</em> </p>
Class and ID
<style type="text/css">
.InputText {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
line-height: normal;
background-color: #0F0;
}
</style>
</head>
<body>
<form name="form1">
Nama Anda </br>
<input type = "text" name="alamat" class="InputText"/> <br />
</form>
</body>
</html>
<style type="text/css">
<!-p{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
font-style: italic;
background-color: #0C0;
}
p.group {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
background-color: #FC3;
}
p#one {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
</style>
font-style: italic;
</head>
line-height: normal;
<body>
background-color: #909;
<p> Ini adalah paragraf 1 </p>
}
<p class="group"> ini adalah paragrap 2 </p>
<p class="group" id="one"> ini adalah paragraf 3 </p>
</body>
</html
Exercise
3. Linking External Style Sheets
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Layout With CSS
Related documents