Webdev CCI Tel U - Introduction to CSS

CSS adalah . .
• Cascading Style Sheet
• Fungsi : Mempercantik penampilan HTML
HTML CSS

Pengenalan CSS
h1 {
color : red;
background : blue;
}
h1 – selector
background – property
blue - value

Selector
• Selector adalah elemen/tag HTML yang ingin diberi style.
• Bila Tag HTML yang ingin diberi style memiliki ID, dapat diawali
dengan # . Contohnya #header
• Bila Tag HTML yang ingin diberi style memiliki Class , dapat diawali
dengan tanda titik (.) . Contohnya .artikel
• Kita dapat menggabungkan beberapa selector pada style yang
sama.Contohnya : h1, p , a { background : blue; }

Property dan Value
• Property merupakan sifat-sifat yang ingin diterapkan pada
selector,seperti warna text, warna background , dll.
• Untuk memberikan value pada property digunakan tanda hubung
titik dua ( : ). Setiap property diakhiri dengan titik koma (;) .
• Contoh : . Artikel h1{
Color : red ;
Background-color : blue;
Font-size : 20px;
}

Penulisan CSS Internal
<head>
<style>
body {
background-color: blue;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>

Penulisan CSS Inline
<h1 style=color:red;> CCI Web Development </h1>

Penulisan CSS External
• Dalam penulisan CSS External , CSS dibuat terpisah dengan
HTML.CSS akan dipanggil dalam tag head.
• Contoh pemanggilan CSS
<HTML>
<head>
<link rel=“stylesheet” href=“namafile.CSS” />
</head>
. . .

• Buka http://www.w3schools.com/cssref/
• Twitter: @wendianto_n @webdevccitelu
#HENDRAPUNYALAPTOPBARU

MARGIN AND PADDING
• “ The margin clears an area around an element (outside the border). The margin does
not have a background color, and is completely transparent. “
• “ The padding clears an area around the content (inside the border) of an element. The
padding is affected by the background color of the element.”

Padding
padding {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}

Margin
contohmargin {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}

Mempersingkat Penulisan Koding
• margin: 25px 50px 75px 100px;
• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
• margin: 25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px
• margin: 25px 50px;
• top and bottom margins are 25px
• right and left margins are 50px
• margin: 25px;
• all four margins are 25px

Webdev CCI Tel U - Introduction to CSS

More Related Content

What's hot

Viewers also liked

Similar to Webdev CCI Tel U - Introduction to CSS

Recently uploaded

Webdev CCI Tel U - Introduction to CSS