Scribd
Upload
30 views

CSS Basic: Workshop Webday 28 Februari Dan 6 Maret

The document summarizes the topics that will be covered in a CSS Basic Workshop, including accessing CSS, selectors, the box model, backgrounds, text formatting, fonts, links, margins and padding, and positioning. The workshop will demonstrate how to use CSS for layouts using div elements and classes. Examples are provided for different CSS access methods and creating basic page layouts with headers, navigation, articles, and footers.

Uploaded by

Christine Sani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views

CSS Basic: Workshop Webday 28 Februari Dan 6 Maret

The document summarizes the topics that will be covered in a CSS Basic Workshop, including accessing CSS, selectors, the box model, backgrounds, text formatting, fonts, links, margins and padding, and positioning. The workshop will demonstrate how to use CSS for layouts using div elements and classes. Examples are provided for different CSS access methods and creating basic page layouts with headers, navigation, articles, and footers.

Uploaded by

Christine Sani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

CSS Basic

Workshop Webday
28 Februari dan 6 Maret
Pembahasan
1. Akses CSS
2. Div
3. Syntax CSS
4. Selector
5. Box Model
6. Background
7. Text
8. Font
9. Link
10. Margin & Padding
11. Positioning
12. Float
Akses CSS
External
Mengakses code CSS dari luar file.
Internal
Code CSS berada didalam file HTML/PHP yg digunakan.
Inline
Menuliskan Code CSS langsung di baris yg kita inginkan.
Contoh Akses CSS
External
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Internal
<head>
<style type=text/css>
body {
background-color: #50b7dc;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Syntax CSS
Div
Pembuatan wilayah
Berdasarkan id
<div id=kotak>
</div>
#kotak {
width: 500px;
height:auto;
background-color:red;
}
Berdasarkan class
<div class=kotak2>
</div>
.kotak2 {
width: 500px;
height:auto;
background-color:yellow;
}
Desain Layout
wrapper
Pembuatan layout ini
bisa menggunakan div
Misal
Div id=wrapper
Div class=kanan
Div class=kiri
Tag yg sudah tersedia
<header></header>
<nav></nav>
<article></article>
<footer></footer>
<html> #wrapper {
<head> width: 900px;
<title>layout</title> height: auto;
<link rel=stylesheet margin: auto;
type=text/css href=satu.css> }
</head> header {
<body> width:900px;
<div id=wrapper> height:200px;
<header></header> background-image:url(satu.jpg);
}
<nav></nav>
nav {
<article>
width:900px;
<div class=kiri></div> height:50px;
<div class=kanan></div> background-color:#71046d;
</article> overflow:hidden;
<footer></footer> }
</div>
</body>
</html>
article { footer {
overflow:hidden; padding:10px;
} font-size:9px;
article .kiri {
width:440px; color:#afafaf;
height:auto; text-align:center;
float:left; font-family: arial;
padding:10px; }
border-right:#fb1ff3 dotted 5px;
}
article .kanan {
width:400px;
height:auto;
float:left;
padding:10px;
}
Lengkapi HTML dengan isi

<html>
<article>
<head>
<title>layout</title> <div class=kiri>inikiri</div
<link rel=stylesheet <div class=kanan>w</div
type=text/css href=satu.css> </article>
</head> <footer>&copy Copy Right</footer>
<body>
</div>
<div id=wrapper>
<header> </header> </body>
<nav> </html>
<ul>
<li>Home</li>
<li>Profil</li>
<li>Kontak</li>
<li>Alamat</li>
</ul>
</nav>
nav ul { Tambahkan ini pada
margin:0px;
} css
nav ul li {
float:left;
list-style:none;
padding:10px;
font-family:Agency FB;
font-size:14pt;
color:white;
}
Hasil
Selector
Element
merupakan tag HTML biasa seperti p a h1 font dst
p{
text-align: center;
color: red;
}
Id
merupakan selector yg dibuat sendiri oleh programmer.
Dalam HTML dipanggil (misal) id=para1
#para1 {
text-align: center;
color: red;
}
Selector
Class
Merupakan selector yg dibuat sendiri oleh programmer.
Dalam HTML dipanggil (misal) class=para1
.para2 {
text-align: center;
color: red;
}
In group
Ketika ada beberapa selector yg memiliki kesamaan code
CSS, kita dapat menggabungkan nya menjadi seperti ini
h1, h2, p {
text-align: center;
color: red;
}
Box Model
Background
Color
body {
background-color: #b0c4de;
}
penulisan bisa #kodewarna, rgba(red, green, blue, alpha), namawarna
#b0c4de rgba()
Image
body {
background-image: url("paper.gif");
}
Repeat
Attachment
Position
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Text
Color
color:#afafaf;
Text-align
text-align:center; center, right, left, justify
Text-decoration
text-decoration:none; none, overline, line-through,
underline

Text-transform
text-transform:uppercase; uppercase, lowercase, capitalize
Font
Font-family
font-family:arial;
font yg di support semua browser yaitu
arial, tahoma, verdana, times new roman
Font-style
font-style:italic; normal, italic,
oblique
Font-size
font-size:12px;
Link
a:link {color:yellow;}
ketika link dalam keadaan normal
a:hover {color:red;}
ketika mouse menghampiri link
a:active {color:blue;}
ketika link di klik
a:visited {color:green;}
setelah link di klik
Margin & Padding
Margin margin:100px 50px;
Margin top & bottom = 100px
Margin left & right = 50px
margin margin:100px;
Semua nya (right, left, top, bottom) = 100px
margin-top
margin-bottom
margin-left
Penulisan untuk margin dan padding sama
margin-right

margin:100px 50px 30px 200px;


- Margin top = 100px
- Margin right = 50px
- Margin bottom = 30px
- Margin left = 20px
margin:100px 50px 30px;
- Margin top = 100px
- Margin right & left = 50px
- Margin bottom = 30px
Positioning
Fixed
Absolute
Relative
Overlapping
Referensi
www.w3schools.com/css

You might also like