| DATA MAHASISWA | |
|---|---|
| Nama | Wisnu Ikhwansyah Saputra |
| NIM | 312210305 |
| Kelas | TI.22.A3 |
Praktikum 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Dasar</title>
</head>
<body>
<header>
<h1>CSS Internal dan <i>Inline CSS</i></h1>
</header>
<nav>
<a href="lab2_css_dasar.html">CSS Dasar</a>
<a href="lab2_css_eksternal.html">CSS Eksternal</a>
<a href="lab1_tag_dasar.html">HTML Dasar</a>
</nav>
<!-- CSS ID Selector-->
<div id="intro">
<h1>Hello World</h1>
<p>Kami sedang belajar HTML dan CSS dasar, pada mata kuliah <b>Pemrograman
Web</b> di <i>Universitas Pelita Bangsa</i>. Pelajaran pertama yang kami dapat
adalah membuat tampilan web sederhana dalam rangka mengenal tag-tag dasar HTML
dan CSS.</p>
<!--CSS Class Selector-->
<a class="button btn-primary" href="#intro">Informasi selengkapnya</a>
</div>
</body>
</html>
<title>CSS Dasar</title>
<style>
body {
font-family:'Open Sans', sans-serif;
}
header {
min-height: 80px;
border-bottom:1px solid #77CCEF;
}
h1 {
font-size: 24px;
color: #0F189F;
text-align: center;
padding: 20px 10px;
}
h1 i {
color:#6d6a6b;
}
<p style="text-align: center; color: #ccd8e4;"
nav {
background: #20A759;
color: #fff;
padding: 10px;
}
nav a {
color:#fff;
text-decoration: none;
padding:10px 20px;
}
nav .active
nav a:hover{
background: #0B6B3A;
}
kemudian tambahkan tag <link> untuk merujuk file cssyang sudah dibuat pada bagian <head>
<!--menyisipkan css eksternal-->
<link rel="stylesheet" href="style_ekternal.css" type="text/css">
/*ID Selector */
#intro {
background: #418fb1;
border: 1px solid #099249;
min-height: 100px;
padding: 10px;
}
#intro h1 {
text-align: left;
border: 0;
color: #fff;
}
/* Class Selector*/
.button {
padding: 15px 20px;
background: #bebcbd;
color: #fff;
display: inline-block;
margin: 10px;
text-decoration: none;
}
.btn-primary {
background: #E42A42;
}
1. lakukanLakukan eksperimen dengan mengubah dan menambah properti dan nilai pada kode CSS dengan mengacu pada CSS Cheat Sheet yang diberikan pada file terpisah dari modul ini.
<link rel="stylesheet" href="style.css">
<h1 class="title">Wisnu Ikhwansyah Saputra</h1>
<p class="text">Galva Al Godzali</p>
Pada contoh ini, terdapat elemen <h1> dengan class "title dan elemen <p> dengan class "text". Class tersebut akan digunakan sebagai selector dalam CSS untuk mengubah properti dan nilai. Dalam file CSS (style.css), terdapat aturan CSS yang dideklarasikan untuk class "title" dan "text". Aturan tersebut mengubah properti "color" pada elemen dengan class tersebut. Anda dapat mengubah nilai properti "color" pada file CSS sesuai keinginan Anda untuk melihat perubahan yang terjadi pada judul (h1) dan paragraf (p) dalam hal warna teks
.title {
color: purple;
}
.text {
font-size: 20px;
}
contoh output
2. Apa perbedaan pendeklarasian CSS elemen h1 {...} dengan #intro h1 {...}? berikan penjelasannya!
<div id="intro">
<h1 class="title">Wisnu Ikhwansyah Saputra</h1>
</div>
<h1>LILTOTO</h1>
Pada contoh ini, terdapat elemen <h1> yang berada di dalam elemen <div> dengan ID "intro" dan juga elemen <h1> yang berdiri sendiri tanpa ada elemen lain di dalamnya.
h1 {
color: cyan;
}
#intro h1 {
color: aquamarine;
}
Dalam file CSS (styles.css), terdapat aturan CSS yang dideklarasikan untuk selector "h1" dan "#intro h1". Aturan CSS h1 {...} akan berlaku untuk semua elemen <h1> dalam dokumen. Sementara itu, aturan CSS #intro h1 {...} hanya akan berlaku untuk elemen <h1> yang berada di dalam elemen dengan ID "intro". Perbedaan ini menyebabkan warna teks pada judul (h1) yang berada di dalam elemen dengan ID "intro" menjadi aquamarine, sedangkan warna teks pada judul (h1) yang berdiri sendiri tetap cyan.
3. Apabila ada deklarasi CSS secara internal, lalu ditambahkan CSS eksternal dan inline CSS padaelemen yang sama. Deklarasi manakah yang akan ditampilkan pada browser? Berikan penjelasan dan contohnya!
p {
color: antiquewhite;
}
Deklarasi CSS internal di dalam tag <style> akan berlaku untuk elemen <p>, tetapi warna teks yang dideklarasikan menjadi antiquewhite tidak akan terlihat karena deklarasi inline CSS menggunakan atribut "style" memiliki prioritas tertinggi. Oleh karena itu, warna teks pada paragraf akan menjadi hitam sesuai dengan deklarasi inline CSS. Deklarasi CSS eksternal dalam file styles.css tidak akan berlaku dalam contoh ini karena deklarasi inline CSS memiliki prioritas yang lebih tinggi.
4. Pada sebuah elemen HTML terdapat ID dan Class, apabila masing-masing selector tersebut terdapat deklarasi CSS, maka deklarasi manakah yang akan ditampilkan pada browser? Berikan penjelasan dan contohnya! ( <p .id="paragraf-1" class="text-paragraf"> )