Artikel ini akan membahas beberapa sintaks CSS yang paling populer untuk pemula. Artinya, setiap pemula harus menguasai sintaks-sintaks berikut agar perjalanan karir belajar mengenai CSS lebih mulus ke depannya.
Teknik Ngelink
Cara eksternal<head> <link href="”mystyle.css”" rel="”stylesheet”" type="”text/css”"> </head>
Cara internal, bisa ditaruh di mana saja di dalam kode HTML, di head maupun di body
<style>
h2{
text-align: right;
}
</style>
Cara inline
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
Seandainya ada pengaturan atribut yang sama pada ketiga cara styling di atas, maka yang akan diikuti adalah sesuai prioritas sebagai berikut:
- Browser default (tidak ada style sheet sama sekali)
- Eksternal style sheet
- Internal style sheet (yang ada di bagian kepala atau
head) - Inline style (di dalam elemen HTML)
Atribut Sebuah Kotak
div{
background: firebrick;
margin: 30px 50px 10px;
padding: 20px 10px;
border-radius: 5px;
}
Memainkan Teks
h1 {
text-align: center;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 48px;
}
Selektor ID dan Class
#selektorid
{
text-align:center;
color:red;
}
.selektorclass
{
color:blue;
}
Menyembunyikan Elemen
.sembunyi
{
display:none;
}
Impor Font
@import url(https://fonts.googleapis.com/css?family=Roboto);
Hai, kami dari tim Belakode. Kami bermarkas di Blora, Jawa Tengah. Mari bersama belajar menulis kode program.
Tidak ada komentar:
Posting Komentar