CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet)

CSS • CSS ?????? – Singkatannya Cascading Style Sheet – Adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. – Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu. – Singkatnya kita bisa mempercantik situs kita dengan cepat secara keseluruhan warna dan tampilan yang ada di situs kita.

• Syarat – syarat belajar CSS ????????? – Anda paling tidak sudah tau code-code HTML

• CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dll) untuk dokumen terstruktur • CSS memisahkan presentation sebuah dokumen dari content dokumen itu sendiri • CSS memudahkan pembuatan dan pemeliharaan dokumen web • Setiap User Agent mempunyai default style sheet Pendefinisian rule CSS pada sebuah dokumen akan menimpa rule pada default style sheet • Spesifikasi CSS1, http://www.w3.org/TR/REC-CSS1 • Spesifikasi CSS2, http://www.w3.org/TR/REC-CSS2 • Spesifikasi CSS3, http://www.w3.org/TR/REC-CSS3

Berbagai Cara Penulisan Code CSS • CSS dapat dituliskan pada bagian , • suatu dokumen HTML atau diletakkan di sebuah file eksternal. • Perintah-perintah CSS dibatasi oleh tag <style> dan

Sintaks Rule • Style sheet didefinisikan dalam bentuk rule, terdiri dari: – Selector – Declaration : property & value

• Contoh rule : h1 { color: blue } Keterangan: – Selector : h1 – Property : color – Value : blue

• Seluruh elemen (tag) HTML dapat digunakan sebagai selector

• CSS1 : – Fonts – Text – Color – Backgrounds – Block-level Elements

• CSS2 : – Positioning – Visual Formatting – Media Types – Interfaces

• CSS3 : – User Interfaces – Accessibility – Columnar layout – International Features – Mobile Devices – Scalable Vector Graphics

Mekanisme Mengaplikasikan CSS CARA PERTAMA : Inline Style Sheet mengetikkan langsung dalam tag html sebagai atribut . teks tebal dan biru

CARA KEDUA : Embedded Style Sheet Menggunakan tag style di dalam tag head. <style type=“text/css”> ……… style definitions ………

Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector { property1 : value1 ; property2 : value2;…. propertyN : valueN ; }

Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector.

CARA KETIGA : Linked Style Sheet Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css Memanggil file css dalam html dengan tag link yang diletakkan dalam tag head.

Contoh code Tidak Dengan CSS Sekarang coba bayangkan bagaimana jika kita ingin membuat warna pada huruf-huruf yang ditebalkan itu ? katakan saja kita ingin mewarnainya dengan warna hijau….. P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah ?
J: Karena itu merupakan sugesti terhadap diri kita sendiri

Contoh code Dengan CSS <STYLE TYPE="text/css"> B { color : lime } P: Mengapa jika kita anggap suatu pekerjaan itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah ?
J: Karena itu merupakan sugesti terhadap diri kita sendiri

Grouping & Inheritance • Grouping (pengelompokan) : – Selector : h1, h2, h3 { font-family: arial } – Declaration : h1 { font-weight: bold; font-size: 14pt } – Value : h1 { font: bold 12pt arial }

• Inheritance (pewarisan) : Bila style tidak didefinisikan, maka akan digunakan definisi style dari induknya <style type="text/css"> body {color: navy} h1 {font-family: Arial} b {text-decoration: underline}
Ini Homepage Saya
Ini adalah homepage yang menggunakan CSS.

Macam-macam Selector •

Tag (elemen) HTML h1 {color: green} i {font-style: normal}

•

Class .mhs {border: black solid 1; color: gray} .nama {font: bold 20 Arial}

•

ID #mhs02 {color: red}

•

Kontekstual h1 i {color: navy} div.mhs .alamat b {color: green}
Daftar Mahasiswa Student Exchange

<span class="nama">Adrian Marzuki
<span class="alamat">Jl. Tubagus Ismail XI/5 Bandung

<span class="nama">Dewi Purnama
<span class="alamat">Jl. Cisitu Lama 24 Bandung
Last updated 10 September 2003

Contoh : <style type=“text/css” > hr { color : red ; height : 5px ; width : 50%; } Keterangan : Tag adalah Atribut adalah Selector adalah Property adalah Value adalah

style type=“text/css” hr color, height, width red, 5px, 50%

ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik ( . )

Selector • Adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di dalam style didefinisikan bagaimana setiap selector akan bekerja (font, color dan lainlain.). Kemudian di dalam bagian body halaman web, selector tersebut dipanggil untuk mengaktifkan style yang telah didefinisikan. • Jenis-jenis Selector: • Selector HTML

PENULISAN PADA TAG DENGAN ATRIBUT STYLE

PENULISAN PADA HEAD

PENULISAN DENGAN CLASS

PENULISAN DENGAN ID

SPAN dan DIV • Dua tag yang sering dikombinasikan dengan selector class adalah <SPAN> dan
• Tag <SPAN> adalah "inline-tag" dalam HTML, berarti tidak ada pergantian baris (line break) yang disisipkan sebelum atau setelah penulisannya. • Tag
adalah "block tag" dalam HTML, berarti pergantian baris secara otomatis disisipkan untuk memberikan jarak antara blok yang dibuat dengan teks atau blok lain sebelum dan sesudahnya (seperti tag
atau
). • Tag
sering digunakan untuk implementasi layer karena layer merupakan blokblok informasi terpisah. Tag

CSS3

CSS3 Border Dengan CSS3, Anda dapat membuat batas bulat, menambahkan bayangan ke kotak, dan menggunakan gambar sebagai perbatasan tanpa menggunakan program desain, seperti Photoshop. Dalam bab ini anda akan belajar tentang sifat batas berikut: * border-radius * box-shadow * border-image

CSS3 Border

31

CSS3 Border CSS3 Rounded Corners div { border:2px solid; border-radius:25px; -webkit-border-radius:25px; /* Safari */ -moz-border-radius:25px; /* Safari */ } CSS3 Box Shadow div { box-shadow: 10px 10px 5px #888888; -moz-box-shadow: 10px 10px 5px #888888; -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */ } CSS3 Border Image div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ }

CSS3 Background

CSS3 Background Background Size Property div { background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Firefox 3.6 and earlier */ -webkit-background-size:80px 60px; /* Safari */ background-size:80px 60px; background-repeat:no-repeat; }

CSS3 Background Background Origin Property div { background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; }

CSS3 Background Multiple Background body { background-image:url(img_flwr.gif),url(img_tree.gif); }

CSS3 Text Effect

CSS3 Text Effect Text Shadow h1 { text-shadow: 5px 5px 5px #FF0000; }

Text Word Wrapping p {word-wrap:break-word;}

CSS3 2D Transform

CSS3 2D Transform Method yang ada : • translate() • rotate() • scale() • skew() • matrix()

div { transform: rotate(30deg); -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } 07/12/12

By : Suwondo, S.Kom

40

CSS3 2D Transform Skew (x-axis-degree, y-axis-degree): div { transform: skew(30deg,20deg); -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ } Matrix (n, n, n, n, n, n): div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }

CSS3 3D Transform

CSS3 3D Transform

CSS3 3D Transform Contoh : div { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari and Chrome */ }

CSS3 Transition

CSS3 Transition Contoh Effect transisi dengan property width dengan durasi 2 detik : div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } Catatan: Jika durasi yang tidak ditentukan, transisi tidak akan berpengaruh, karena nilai default adalah 0. div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }

CSS3 Multiple Column

CSS3 Multiple Column

CSS3 Multiple Column Contoh : div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } div

div

{ -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; }

{ -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; }

CSS3 User Interface

CSS3 User Interface

CSS3 User Interface Contoh : div { resize:both; overflow:auto; } div

div

{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }

{ border:2px solid black; outline:2px solid red; outline-offset:15px; }

Resources 1 • http://www.csszengarden.com – This is CSS at its finest

• http://www.w3.org/Style/CSS/ – The Official CSS Site

• http://css.maxdesign.com.au/ – Australian firm, very professional

• http://webmonkey.wired.com/webmonke y/reference/stylesheet_guide – Where I learned CSS and Web Design

Resources 2 • HTML-Kit editor – http://chami.com/ • Amaya editor – http://www.w3c.org/Amaya • W3schools XHTML and CSS tutorials – http://www.w3schools.com/ • Web Head Start tutorials – http://www.webheadstart.org/ • Tidy Web Interface http://www.washington.edu/webinfo/tidy.cgi • CSS Validator - http://jigsaw.w3.org/css-validator/ • Dave Raggett XHTML and CSS tutorials http://www.w3.org/MarkUp/Guide/Overview.html • Web Accessibility in Mind (WebAIM) http://www.webaim.org/ • Color contrast analyzer http://www.visionaustralia.org.au/info.aspx?page=628 • Stylin’ With CSS, A Designer’s Guide, Second Edition by Charles Wyke-Smith

Mari Perdalam Materi!!! • Silahkan pelajari lebih dalam tentang berbagai style pada CSS ( 1-3):  Color & Background  Font  Text  List  Box Model  Visual Formatting Model (normal & float)  User Interface & Downloadable Font  Media Types  Visual Effects  Positioning Scheme

Report "CSS (Cascading Style Sheet)"

Your name

Email

Reason

Description

Copyright © 2025 ADOC.PUB. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

CSS (Cascading Style Sheet)

Recommend Documents

Ini Homepage Saya

Daftar Mahasiswa Student Exchange