BELAJAR CSS DASAR

maxcorps.space

6 Jul, 2022

CSS adalah singkatan dari Cascading Style Sheet.

Fungsi CSS adalah membuat HTML menjadi lebih variatif, indah dan semakin menarik. CSS berfungsi mengatur margin, padding, warna serta ukuran font, dan masih banyak lagi fungsi CSS. Dalam kata lain CSS berfungsi untuk mengatur gaya atau style.

CSS DASAR:

ANATOMI CSS

Anatomi CSS

selector { property: value; } = 1 deklarasi

selector = memilih dan memanipulasi elemen spesifik pada HTML

property dan value ada sebanyak 350 ++

Beberapa contoh menu CSS selector :

margin = mengatur garis paling luar halaman.

padding = mengatur jarak tepi dari margin paling luar.

border = garis tepi.

border-radius = mengatur sudut

font = mengatur nama font.

font-size = mengatur ukuran font

font-family = mengatur nama font

color = mengatur warna font

background-color = mengatur warna background

body = mengatur keseluruhan section body

text-align = mengatur penempatan text.

CSS font styling - butuh pembahasan khusus, expert

font-family - nama font

font-size - ukuran font

font-weight - ketebalan

font-variant - small, caps

font-style - miring/italic, oblique, bold, bolder, normal, light

line-height - lebar spasi

CSS text:

text-align - format paragraf, kiri, tengah, kanan

text-indent - indentasi paragraf

text-decoration-dekorasi pada teks - underline, dicoret/line through

letter-spacing - spasi antar huruf

word-spacing - spasi antar kata

justify - rata kiri kanan

CSS color - colorpicker.com

nama warna : red, blue

hexadecimal - #ff4500, #ffff - 0 s/d f

rgb - rgb (23, 45, 56)

text-trasform - jenis huruf, besar, kecil, kapital

CSS background

subtle patern. web pola background

css id, css class

css pseudo class

css inheritance - pewarisan

css specifity

css layouting - expert css3

Penempatan CSS

embed = <style></style> di dalam head

inline = <p style="color: blue"></p> di dalam HTML

external = <link rel="stylesheet" href="style.css"> di dalam file lain

CSS EMBED

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* menuliskan css didalam area ini */

    </style>
</head>
<body>
    
</body>
</html>

CSS EXTERNAL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
</body>
</html>

CSS ditulis di halaman terpisah dari Notepad di dalam file "style.css"

CSS INLINE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="background-color: #111111; border: 3px double rgb(23, 128, 221); 
color: lightblue; padding: 20px; text-align: left;">MEMBUAT BOX</div>
    
</body>
</html>