CSS atau Cascading Style Sheet) adalah salah satu bahasa desain
web (style sheet languange) yang mengontrol format tampilan sebuah halaman web
yang ditulis dengan menggunakan penanda. Biasanya CSS digunakan untuk mendesain
halaman HTML.CSS diutamakan dengan tampilan dokumen yang meliputi layout, warna
dan font. CSS3 merupakan bentuk generasi
ketiga dari CSS. Pada Prinsipnya menggunakan CSS dalam HTML sama dengan
penjelasan diatas, hanya saja terdapat beberapa kode yang harus ditambah untuk membuat layout,
warna dan font yaitu :
1. Menggunakan tag elemen style pada bagian
head
...
<title>Menggunakan
CSS dalam HTML</title>
<meta
name=”author” content=”Tissa Pramana Putri” />
<meta
name=”keyword” content=”CSS, HTML” />
<style type=”text/css”>
2. Di dalam CSS kita
mengenal istilah blockquote. Blockquote merupakan suatu fasilitas yang
berfungsi
memberikan penekanan pada suatu teks, entah itu script atau teks lain. Blockquote
umumnya berada di body. Contohnya
umumnya berada di body. Contohnya
...
</head>
<body>
<header>
<h1>Menggunakan CSS dalam
HTML</title>
</header>
<article>
<blockquote> Blockquote merupakan suatu fasilitas yang
Berfungsi memberikan penekanan pada suatu
teks, entah itu script atau teks l lain</blockquote>
</article>
</body>
Untuk
membuat blockquote menjadi cetak miring
...
<style
type=”text/css”>
Blockquote {
Font-style : italic ;
}
Jadi setiap
pembuatan kode blockquote menggunakan {}
3. Untuk mengganti font yaitu menambahkan
font-family. Selain itu untuk mengganti ukuran font
menambahkan font-size
Contohnya
...
<style
type=”text/css”>
Blockquote {
font-style : italic ;
}
h1 {
font-family : Arial ;
font-size-adjust : 1 ;
}
4. Untuk mengganti semua font yang ada membuat kode p { font-family
: ....; }
Contohnya
5. Untuk memberi warna pada font menambahkan
color : red ;
Berikut
adalah cara penulisan kodenya
...
h1
{
font-family : Arial ;
color
: red ;
}
6. Untuk
membuat teks berada dibagian tengah menambahkan text-align : center ;
Berikut
adalah cara penulisan kodenya
...
h1
{
font-family : Arial ;
color : red ;
text-align : center ;
}
7. Untuk membuat garis
bawah pada blockquote dengan css yaitu dengan menambahkan border-buttom
Berikut adalah
cara penulisannya
...
<style
type=”text/css”>
Blockquote {
font-style : italic ;
border-buttom : 2px solid ;
}
8. Untuk membuat warna background pada blockquote.
Dalam membuat warna background
Pada
blockquote pertama kita harus menambahkan <blockquote
class=”kuning”> dimana
Bagian
ini berada pada body. Berikut
adalah contoh penulisan kode
Namun apabila kita telah menambahkan seperti
diatas bukan berarti background yang ada
akan
langsung berubah. Tapi kita harus menambahkan pada bagian head seperti berikut
...
<style
type=”text/css”>
h1 {
font-family : Arial ;
color
: red ;
text-align : center ;
}
.kuning {
Background-color : yellow ;
}
Berikut hasil keselurhan dari tahapan di atas
MEMBUAT TABEL DENGAN CSS
Pada dasarnya kolom terdiri atas baris dan
kolom. Di dalam CSS membuat baris diberi kode <th> sedangkan untuk kolom
<td>
Berikut adalah langkah-langkah membuat tabel
menggunakan CSS
1. Membuat tag table pada bagian body.
...
<article>
<table>
<tr>
<th>Judul Kolom Pertama</td>
<th>Judul Kolom Kedua</td>
</tr>
<tr>
<td>Kolom pertama baris pertama</td>
<td>Kolom kedua baris
pertama</td>
</tr>
</table>
</article>
2. Membuat garis pada table dengan menggunakan border yang
ditambhkan pada bagian head
Berikut adalah
contoh penulisannya
...
<style type=”text/css”>
table {
border : 1
px solid black ;
}
table td {
border : 1
px solid black ;
}
table th {
border : 1px
solid black ;
}
3. Membuat background pada kolom judul tabel yaitu
menggunakan background-color pada bagian setelah langkah no 2
...
table th {
border : 1px
solid black ;
background
–color : red ;
}
Berikut adalah hasil dari tabel diatas
BY : TISSA PRAMANA PUTRI (1306470861) - B
Tidak ada komentar:
Posting Komentar