pweb css

16
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.

Upload: rakhmi-khalida-mmsi

Post on 24-Jan-2018

29 views

Category:

Engineering


0 download

TRANSCRIPT

Page 1: PWEB CSS

PENGENALAN CSS

CSS = Cascading Style Sheet

Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.

Page 2: PWEB CSS

MEMBUAT CSS

CARA PERTAMA :mengetikkan langsung dalam tag html sebagai atribut .

<body>

<b style = “color : blue”> teks tebal dan biru </b>

</body>

Page 3: PWEB CSS

CARA KEDUA :

Menggunakan tag style di dalam tag head.

<head> <style type=“text/css”>

……… style definitions ………

</style></head>

Page 4: PWEB CSS

Style definitions : adalah defenisi style yang ingin dibuat.

Format penulisannya adalah :

Selector adalah tag yang digunakan web browser.

Property : value adalah efek dari style yang diinginkan untuk selector.

Selector { property1 : value1 ; property2 : value2;….propertyN : valueN ; }

Page 5: PWEB CSS
Page 6: PWEB CSS
Page 7: PWEB CSS

CARA KETIGA :Menyimpan informasi style ke dalam sebuah

file dengan ekstensi/type file cssMemanggil file css dalam html dengan tag

link yang diletakkan dalam tag head.

<head>

<link rel=“stylesheet” type=“text/css” href=“namafile.css”/>

</head>

Page 8: PWEB CSS
Page 9: PWEB CSS

Contoh :<style type=“text/css” >

hr { color : red ; height : 5px ; width : 50%; }

</style>

Keterangan :

Tag adalah style

Atribut adalah type=“text/css”

Selector adalah hr

Property adalah color, height, width

Value adalah red, 5px, 50%

Page 10: PWEB CSS

ID SELECTOR

ID selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu.

ID selector diawali tanda #

(sharp/kres/octothorpe)

Page 11: PWEB CSS

Sebuah paragraf dengan content sebagai selector ID.

#content { font-family: Arial, sans-serif; font-size: 14px; color: red; }

<p id="content"> Artikel Belajar CSS ID Selector </p>

Page 12: PWEB CSS

CLASS

class digunakan untuk menentukan style juga sama seperti id.

Selector ini ditulis dengan awalan titik atau dot “.” pada css dan class=“nama-class” pada HTML

Page 13: PWEB CSS

Sebuah paragraf dengan content sebagai selector ID.

.teks-hijau {

color: green

}

<p class="teks-hijau"> Paragraf ini memiliki Class teks-hijau </p>

Page 14: PWEB CSS
Page 15: PWEB CSS
Page 16: PWEB CSS