Scribd
Upload
24 views

Modul 12 CSS (Lanjutan)

The document discusses using CSS (Cascading Style Sheets) to style web pages. It provides examples of using CSS classes and IDs to style different elements. It also demonstrates linking an external CSS stylesheet to an HTML page and shows the styled output in the browser.

Uploaded by

ajihidayatullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Modul 12 CSS (Lanjutan)

The document discusses using CSS (Cascading Style Sheets) to style web pages. It provides examples of using CSS classes and IDs to style different elements. It also demonstrates linking an external CSS stylesheet to an HTML page and shows the styled output in the browser.

Uploaded by

ajihidayatullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Modul Pemrograman Web 1

BAB XII
CASCADINGSTYLE SHEET (CSS)

Menggunakan Atribut CLASS

CLASS dapat digunakan untuk membuat bermacam-macam variasi pada definisi


style dari suatu elemen. Misalnya, paragraf tebal dengan identasi 15pt dan
paragraf miring dengan identasi 45pt, maka definisi style tersebut :
P.tebal {font-family : Arial; font-weight : bold; text-indent : 15pt}
P.miring {font-family : Arial; font-weight : italic; text-indent : 45pt}
Contoh :
<html>
<head>
<title>STYLE SHEET</title>
<style>
<! - -
p.tebal {font-family : Arial; font-weight : bold;
text-indent : 15pt}
p.miring {font-family : Arial; font-weight :
italic; text-indent : 45pt}
- - >
</style>
</head>
<body>
<p class=”tebal”>Teks dalam paragraph ini
terlihat tebal dengan identasi 15 pt.
<p class=”miring”>Teks dalam paragraph ini
terlihat tebal dengan identasi 45 pt.
</body>
</html>

Beberapa contoh penggunaan style sheet :


Contoh 1: P
{
Text-align: center;
Color: blue;
Font-family: arial
}

Contoh 2:
h1, h2, h3, h4, h5, h6
{
Color: green;
}

S1 Teknik Informatika
1
Modul Pemrograman Web 1

Contoh style sheet external:


Body {background-color: yellow}
H1 {font-size: 36 pt}
H2 {color: blue}
P {margin-left: 50px}

Simpan dengan nama : style1.css


Latihan 1:

<html>
<head>
<style type="text/css">
body
{
background-image: url('myflower.gif');
background-repeat:repeat-y;
}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify; font-size: 125%; color:
red;}
</style>
</head>
<body>
<h1>Penggunaan Align pada CSS</h1>
<p class="date">Oktober, 2010</p>
<p class="main">Ketika saya masih terlalu muda dan
masih sangat rentan, ayah saya memberi nasihat "apabila
kamu dikritik oleh seseorang ingatlah bahwa semua orang
didunia tidak ada yang memiliki kelebihanmu ".
In my younger and more vulnerable years my father gave
me some advice that I've been turning over in my mind
ever since. 'Whenever you feel like criticizing
anyone,' he told me, just remember that all the people
in this world haven't had the advantages that you've
had.'</p>
<p><b>Note:</b> Try to resize the browser window to see
how justify works.</p>
</body>

</html>

Latihan 2 :

q Buatlah file CSS dengan perintah seperti dibawah :

body {
color: #80c0c0;

S1 Teknik Informatika
2
Modul Pemrograman Web 1

background: black}
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
a.case1:link { background: green }
p:first-line { margin-left: 25px }
div.foo:first-line {
font-weight: bold;
margin-left: 30px }
div:first-letter {
font-size: x-large;
color: #ffffff }
ul ul li {
font-size: x-large;
font-decoration: italic }
h2 em { font-weight: 900 }
h2.ex1 {
color: green; /* This type of heading MUST
be Green and Large! */
line-height: 50px;
font-size: 40px }
.funkyclass {
font: 36pt/40pt courier;
font-variant: small-caps;
border: thick dashed blue }
#tagid1 {
padding: 20px;
border: 20px groove #ffffff }
.class1, #tagid2 { font-family: 'comic sans ms',
fantasy; color: rgb(100%,100%,0%) }
h1, h2, div.class5, blockquote { background: #000080 }
p.special {
font: 12pt/14pt sans-serif;
margin: 5px 0px 2px 25px;
border: medium dashed #ff0000;
background: white url(http://www.foo.com/image.gif)
repeat-x fixed top right }
blockquote {
margin-left: 2cm;
color: #00ff00 }
.part1 {
font-size: xx-large;
color: #808000 }
h5 {
font-size: xx-small ! important;
color: red ! important }

Simpan dengan nama sytle.css

S1 Teknik Informatika
3
Modul Pemrograman Web 1

Latihan 3 :

q Buatlah file dibawah ini dengan menyisipkan file CSS yang dibuat tersendiri
diatas.

<html>
<head>
<title>Contoh CSS Link</title>
<link rel="stylesheet" TYPE="text/css"
href="style.css">
</head>

<body>
<h1 CLASS="funkyclass" ALIGN="center">Welcome to my
home page!</h1>
Hi there! If you are reading this then you have found
my home page! Congratulations! I know it can be hard
to find my pages, but I bet that you feel lucky now.
Now that you are here, please take a look at my page
of links to <a
HREF="http://www.mysite.com/coolsites.html">cool
sites</a> or sign my <a
HREF="http://www.mysite.com/guestbook.html">guest
book</a></p>
<div CLASS="foo"> My wonderful poetry <br> is
available if you are REALLY bored. Why not give it a
spin?</div>

<h2 CLASS="ex1"> The Best Poetry I <em>NEVER</em>


Wrote</h2>
<ul>
<li>'There Once Was A Man From Nantucket' - <span
CLASS="class1">Anonymous</span></li>
<li>'Cool In Fur' - <span CLASS="class1">Harry B.
Foot</span></li>
<li>And My All Time Fave:
<ul>
<li> 'A Toast To My Toaster' - <span
CLASS="class1">Me!</span></li>
</ul>
</li></ul>

<blockquote>Brought to you by the letter <span


ID="tagid2">&quot;H&quot;</span> and <span
ID="tagid1">Joe Shmoe</span></blockquote>

<div CLASS="class5"> When you are done looking through


these masterpieces, I encourage you to visit my proud
sponsor!! </div>

S1 Teknik Informatika
4
Modul Pemrograman Web 1

<p CLASS="special"><span
CLASS="funkyclass">ADVERTISEMENT:</span> Buy Navel
Lint Contemplator! Its a browser and its a sandwich
spread! Go to our <a
HREF="http://www.navellint.com">home page</a> without
delay! Why? Because shelf life is only 8 hours unless
refrigerated. We know that makes it hard to browse,
but it promotes frequent upgrading to the latest and
greatest version. </p>

<h5>All standard disclaimers apply. Your life depends


on NOT copying this document in any way. This tape
will <a HREF="http://www.mysite.com/selfdestruct.html"
CLASS="case1">self destruct</a> in 10 seconds...</h5>
</body>
</html>

Simpan dengan nama : csslink.html


Tampilan browser :

S1 Teknik Informatika
5
Modul Pemrograman Web 1

q Buatlah halaman web dengan menggunakan CSS yang dibuat tersendiri

S1 Teknik Informatika
6

You might also like