Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan
bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
- Embedded: properti style diletakkan di dalam satu blok di dokumen
HTML.
- Inline: properti style diterapkan secara langsung per baris atau per elemen
HTML.
- Linked: properti style diletakkan di file berekstensi css dan dikaitkan
dengan dokumen HTML.
Setelah tau apa itu CSS, selanjutnya masuk ke penggunaan dari CSS. simak yuk.... !!! Yuk, mari!!!!!
1. Membuat desain layout halaman web dengan memanfaatkan division.
Untuk membuat design layout seperti gambar diatas dengan memanfaatkan CSS untuk melakukan pembagian-pembgian halaman dari suatu web (division). Adapun CSS-nya sebagai berikut:
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#top {
height: 80px;
border: 1px solid blue;
}
#content {
float: left;
margin-right: 20px;
width: 270px;
height: 240px;
border: 1px solid red;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
sedangkan untuk coding HTML-nya sebgai berikut:
selanjutnya.....
2. Membuat desain halaman web sederhana yang atraktif.
Dari desain layout yang tadi sudah di buat, kita dapat melanjutkannya untuk membuat desain halaman web sedehana yang atraktif seperti gambar diatas.
Untuk coding CSS-nya seperti berikut:
#wrapper {
margin: auto;
width: 900px;
border: 0;
}
#header {
height: 120px;
border: 1px solid green;
border-top: 3px solid green;
border-left: 3px solid green;
border-right: 3px solid green;
border-bottom: 10px solid green;
background: green url("header.jpg");
margin-bottom: 0px;
}
#logoum {
float: left;
height: 80px;
width: 81px;
border: 0;
background: white url("um.png");
margin-top: 25px;
margin-left: 45px;
}
#jurusan {
float: left;
height: 35px;
width: 300px;
border: 0;
margin-top: 35px;
margin-left: 5px;
}
#hmmmm {
float: right;
height: 120px;
width: 400px;
border: 0;
}
#menu {
float: left;
height: 25px;
width: 350px;
border: 0;
margin-left: 30px;
margin-top: 2px;
}
#cari {
clear: both;
float: right;
height: 20px;
width: 300px;
margin-top:65px;
margin-right:15 px;
border: 0;
}
#search1 {
float: left;
height: 10px;
width: 120px;
margin-left: 30px;
margin-top: 4px;
border: 0;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
width: 200px;
height: 413px;
margin-right: 0px;
border: 1px solid green;
background: green url("sidebar.jpg");
}
#inner2 {
float: left;
width: 700px;
height: 400px;
border: 0;
}
#top {
height: 80px;
border: 0;
background: green url("page.jpg");
}
#content {
float: left;
margin-left: 2px;
margin-top: 3px;
margin-right: 15px;
width: 429px;
height: 325px;
border: 0;
}
#Rightup {
float: left;
width: 250px;
height: 150px;
margin-top: 0px;
border: 1px solid green;
background-color: #6cae15;
}
#Rightbot {
float: left;
width: 250px;
height: 150px;
margin-top: 10px;
border: 0;
background: green url("kampus.jpg");
}
#footer {
clear: both;
height: 80px;
border: 1px solid green;
background: green url("footer.jpg");
}
#leftmenu ul {
width: 200px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}
.style_1 {
font-family: Butch;
font-size: 32px;
font-weight: bold;
color: green;
}
.style_2{
font-family: Butch;
font-size: 16 px;
font-weight: bold;
color: green;
}
.style_3{
font-style: italic;
font-family: georgia;
font-size: 14px;
}
Sedangkan coding HTML-nya sebagai berikut:
Itulah sedikit contoh pemanfaatan CSS untuk pembuatan desain web....
Selamat Mencoba....
Semoga bermanfaat...
N tunggu kelanjutannya alias... to be continued... :)
0 komentar:
Posting Komentar