CSS : Membuat halaman web dengan css dan style link

Januari 16, 2018

Halaman web dengan css dan style link

Assalamu’alaikum….

Hai sobat kali ini saya akan mempraktikkan css bagaimana cara mengganti background, memasukkan gambar, mengatur penempatan tulisan dll. Menggunakan cs itu ternyata gampang gampang susah. Berikut ini contoh penerapannya mari kita simak sama sama…

A. Latar Belakang

1. Mengubah warna background text

jika anda ingin mengubah warna background text berikut ini propertinya :

background : warna;

penulisan warna pada value sama dengan color, dapat berupa nama eksplisit warna yang diinginkan maupun dengan kode hexsadesimalnya.

Contoh :

<html>

<head>

<title> CSS Guide </title>

</head>

<style>

body {

background : blue;

}

p.styled {

font-family: "Palatino Linotype";

font-size: 20px;

color: #FF0000;

background: #FFFFFF; /* warna putih */

}

p {

color: orange;

font-weight: bold;

background: #000000;

/* warna hitam */

}

</style>

</head>

<body>

<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini

adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini

adalah paragraf 1. Ini adalah paragraf 1. </p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. </p>

</body>

</html>

Hasil :

contoh di atas, bagian body diberi warna background (seluruh halaman), namun kecuali untuk bagian paragraf. Paragraf pertama diberi warna background putih, sedangkan background kedua diberi warna hitam.

2. Mengatur jarak spasi antar text

perhatikan contoh berikut :

pada contoh diatas terlihat bahwa antara huruf satu dengan yang lainnya itu terdapat spasi atau jarak. Jarak tersebut bisa diatur menggunakan.

word-spacing : jarak;

letter-spacing : jarak;

yang pertama untuk mengatur jarak antar kata, sedangkan yang kedua digunakan untuk mengatur jarak antar huruf.

Sebagai contoh :

<html>

<head>

</head>

h1 {

word-spacing: 20px;

letter-spacing: 15px;

}

</style>

</head>

<body>

<h1>Ini Judul Heading</h1>

<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.

Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.

Ini adalah paragraf 1. </p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. </p>

</body>

</html>

3. Membuat text Indent

pada awal paragraf pasti terdapat text indent atau teks yang menjorok ke dalam paragraf dalam jarak tertentu. Properti yang digunakan yaitu :

text-indent : jarak;

contoh ;

<html>

<head>

<title> CSS Guide</title>

p {

text-indent : 40px;

}

</style>

</head>

<body>

<h1>Ini Judul Heading</h1>

<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.

Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.

Ini adalah paragraf 1. </p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. </p>

</body>

</html>

hasil :

4. Mengubah Text Case

dengan CSS, kita juga bisa mengubahsuatu teks menjadi huruf kecil semua (lowercase), besar semua (uppercase), atau capitalizee (hanya huruf pertama dari kata yang dibuat besar). Properti yang digunakan adalah :

text-transform : option;

option bisa diganti dengan

contoh :

<html>

<head>

<title> CSS Guide </title>

</head>

#heading1 {

text-transform : uppercase;

}

#heading2 {

text-transform : lowercase;

}

#heading3 {

text-transform : capitalize;

}

</style>

</head>

<body>

<h1 id="heading1">Ini Judul Heading 1</h1>

<h1 id="heading2">Ini Judul Heading 2</h1>

<h1 id="heading3">Ini Judul Heading 3</h1>

</body>

</html>

5. Membuat Drop Cap

memercantik tampilan dengan menambahkan drop cap pada huruf pertamanya. Propertinya adalah sebagai berikut :

<html>

<head>

<title> CSS Guide </title>

</head>

p.styleku:first-letter {

float: left;

font-family: "Lucida Grande";

font-size: 80px;

}

p {

text-align : justify;

}

</style>

</head>

<body>

<h1 id="heading1">Ini Judul Heading 1</h1>

<p class="styleku">Bagian ini adalah paragraf. Bagian ini adalah

paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.

Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini

adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah

paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.

Bagian ini adalah paragraf. Bagian ini adalah paragraf. </p>

</body>

</html>

hasil :

Code style di atas hanya akan berlaku untuk huruf pertama dari paragraf yang memiliki

class styleku, dalam hal ini adalah huruf B. Sedangkan properti float digunakan untuk

mengatur posisi huruf B tersebut, apakah di sebelah kiri atau kanan, sehingga valuenya

adalah left.

6. Membuat Text Decoration

membuat text decoration seperti underline, overline, line-trough atau blink dengan properti :

text-decoration : option;

dengan option dapat diganti dengan underliner, overline, line-trough atau blink. Untuk

melihat perbedaannya, perhatikan contoh berikut.

Contoh :

<html>

<head>

<title> CSS Guide </title>

#heading1 {

text-decoration : blink;

}

/* membuat teks berkelap kelip */

#heading2 {

text-decoration : line-through;

/* membuat garis ditengah text/ dicoret */

}

#heading3 {

text-decoration : underline; /* membuat garis bawah */

}

#heading4 {

text-decoration : overline; /* membuat garis di atas text */

}

</style>

</head>

<body>

<h1 id="heading1">Ini Judul Heading 1</h1>

<h1 id="heading2">Ini Judul Heading 1</h1>

<h1 id="heading3">Ini Judul Heading 1</h1>

<h1 id="heading4">Ini Judul Heading 1</h1>

</body>

</html>

hasil :

7. Membuat Layout dengan CSS

pada bagian ini saya akan memberitahu bagaimana cara membuat Layout denagn CSS, akan tetapi ini langsung ya tidak step by step. Dengan CSS, Anda tidak membutuhkan tabel dalam menata

layoutnya. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan

juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk

mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran

byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama.

Berikut ini adaah code halaman web yang sudah jadi :

<html>

<head>

<title> sssss </title>

</head>

<style>

body {

background: url(tumblr.gif );

}

#content {

width: 750px;

margin: auto;

/* membuat posisi di tengah */

}

#header {

border:1px solid #000000;

background-color:#000000;

padding: 10px

}

h1 {

color: #FFFFFF;

font-size: 40px;

}

h1 {

color: #FFFFFF;

font-size: 40px;

line-height: 5px;

}

#footer {

padding:10px;

border:1px solid #000000;

background-color:#CCCCCC;

}

#footer p {

text-align: justify;

font-weight: bold;

}

#menu {

float:right;

}

.navigasi {

border:1px dashed #000;

margin-top: 10px;

padding: 10px;

background: yellow;

}

#isi {

width:500px;

margin-top: 10px;

margin-bottom:10px;

padding:10px;

border:1px solid #000;

background: white;

}

.gambar {

float: left;

margin-top: 0px;

margin-right: 10px;

margin-bottom: 20px;

margin-left: 0px;

border: 1px solid #000000;

}

#isi p {

text-align: justify;

line-height: 18px;

margin-top: 0px;;

}

</style>

<body>

<h1>welcome to my site</h1>

</div>

<h3>Menu Navigasi A</h3>

<ul>

</ul>

</div>

<h3>Menu Navigasi B</h3>

<ul>

</ul>

</div>

<p>Ini adalah bagian isi. Ini adalah bagian isi.ini adalah

bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. ini