Scribd
Upload
108 views

8 Dasar - Css

The document discusses various CSS properties and selectors. It provides examples of how to style elements using CSS including font properties, text properties, background properties, border properties, positioning properties, and media queries. It demonstrates how CSS can be used to control colors, sizes, positioning and other styles of HTML elements.

Uploaded by

Yusup Andy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
108 views

8 Dasar - Css

The document discusses various CSS properties and selectors. It provides examples of how to style elements using CSS including font properties, text properties, background properties, border properties, positioning properties, and media queries. It demonstrates how CSS can be used to control colors, sizes, positioning and other styles of HTML elements.

Uploaded by

Yusup Andy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

h1 { color: blue } h1 color blue

<p style="color: green"> <style type="text/css"> h1 {color: blue} </style> <link rel="stylesheet" type="text/css" href="http://webku.com/cool.css"> <style type="text/css"> @import url(http://webku.com/cool.css); </style>

h1, h2, h3 { font-family: arial }

h1 { font-weight: bold; font-size: 14pt }

h1 { font: bold 12pt arial }

<html> <head> <style type="text/css"> body {color: navy} h1 {font-family: Arial} b {text-decoration: underline} </style> </head> <body> <h1>Ini <b>Homepage</b> Saya</h1> Ini adalah homepage yang menggunakan CSS. </body> </html>


h1 {color: green} i {font-style: normal}

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

#mhs02 {color: red}

h1 i {color: navy} div.mhs .alamat b {color: green}


<h1>Daftar Mahasiswa <i>Student Exchange</i></h1> <div id="mhs01" class="mhs"> <span class="nama">Adrian Marzuki</span><br> <span class="alamat">Jl. Tubagus Ismail XI/5 <b>Bandung</b></span> </div> <div id="mhs02" class="mhs"> <span class="nama">Dewi Purnama</span><br> <span class="alamat">Jl. Cisitu Lama 24 <b>Bandung</b></span> </div> <i>Last updated 10 September 2003</i>

li ul li ul ol li li.mhs ul ol li.mhs #mhs01 {...} {...} {...} {...} {...} {...} /* /* /* /* /* /* a=0 a=0 a=0 a=0 a=0 a=1 b=0 b=0 b=0 b=1 b=1 b=0 c=1 c=2 c=3 c=1 c=3 c=0 -> -> -> -> -> -> specificity specificity specificity specificity specificity specificity = 1 = 2 = 3 = 11 = 13 = 100 */ */ */ */ */ */

selector:pseudo-class {property: value}


:link :visited :hover :active :focus { { { { { { color: color: color: color: color: color: red } green } blue } purple } yellow } maroon }

a:link a:visited a:hover a:active a:focus a.mhs:link


:first-letter :first-line

p:first-letter { font-size: 200%; float: left} p:first-line { color: green } h1.mhs:first-letter { font-size: 20pt }
<html> <head> <title>Drop cap initial letter</title> <style type="text/css"> p:first-letter { font-size: 200%; font-weight: bold; float: left } span { text-transform: uppercase } </style> </head> <body> <p><span>The first</span> few words of an article in The Economist.</p> </body> </html>


white black red

#ff0000

rgb(255,255,0)

rgb(80%,80%,100%)

2px 1mm 2cm 0.2in 3pt 2em, 4ex

<fontname>
p {font-family: Arial, Verdana, "Times New Roman"} p {font-style: italic}

p {font-variant: small-caps}

p {font-weight: bold} p {font-weight: 400}

<length> <percentage>
p p p p {font-size: {font-size: {font-size: {font-size: large} smaller} 200px} 150%}

p p p p p

<style> <variant> <weight> <size> <line-height> <family>


{font: {font: {font: {font: {font: italic 12pt "Helvetica Nue", serif} bold italic large Palatino, serif} normal small-caps bold 120%/120% fantasy} x-large/20pt "new century schoolbook", serif} menu}


p p p p p

<color>
{color: {color: {color: {color: {color: red} #448F2C} rgb(255,0,0)} rgb(100%,50%,25%)} #f25}

<color>
body {background-color: transparent}

<url>
body {background-image: none} body {background-image: url(http://www.site.com/logo.gif)} body {background-repeat: no-repeat}

body {background-attachment: fixed}

body body body body

<percentage> <length>
{background-position: {background-position: {background-position: {background-position: 50%} 200px 50%} center} right bottom}

<color>

<image>

<repeat>

<attachment>

<position>

body {background: url("chess.png") gray 50% repeat fixed }

<length> <percentage>
p {text-indent: 5em}

p {text-align: justify}

p {text-decoration: underline overline}

<color>

<length> <length> <length>

h1 {text-shadow: 3px 3px 5px red}

h1 {text-transform: capitalize}

<length>
p {letter-spacing: 3px} p {letter-spacing: -1px}

<length>
p {word-spacing: 2em}

<number> <length> <percentage>


p {line-height: 1.5}

p {white-space: pre}


ul {list-style-type: circle}

<url>
ul {list-style-image: url(smiley.gif)}

ul {list-style-position: inside}

outside

inside

<style>

<position>

<image>

ol {list-style: lower-alpha outside url(smiley.gif)}

div div div div {margin-top: 10px} {margin-right: 20%} {margin-bottom: -5px} {margin-left: 20pt}

<length> <percentage>

div div div div

<length> <percentage>
{margin: {margin: {margin: {margin: 3em} 1em 2em} 5em 2em 3em} 8em 4em 15em 10em}

div div div div {padding-top: 10px} {padding-right: 20%} {padding-bottom: -5px} {padding-left: 20pt}

<length> <percentage>


div div div div

<length> <percentage>
div {padding: 8em 4em 15em 10em}

<length>
{border-top-width: thin} {border-right-width: 6px} {border-bottom-width: 2em} {border-left-width: 10}

<width>
div {border-width: thin medium 10 20}

<color>
div {border-top-color: green} #ff66cc} div {border-bottom-color: rgb(0,128,0)} div {border-right-color: div {border-left-color: #ee3}

<color>
div {border-color: green #ff66cc rgb(128,128,128) #ee3}

div {border-top-style: double} div {border-bottom-style: outset

div {border-right-style: solid} div {border-left-style: dashed}


div div div div

<style>
div {border-style: solid dashed solid dotted}

<width>

<style>

<color>

{border-top: solid red} {border-right: thick double} {border-bottom: red dashed blue} {border-left: outset 10}

<width>

<style>

<color>

div {border: red solid 1}

<length> <percentage>
img {width: 40%}

<length> <percentage>
img {height: 100px}


p {display: block} b {display: inline} li {display: list-item} img {display: none}

<img style='float: left'>

img {float: left}

img {float: left}

<img style='float: left'>

<img style='float: left'>

<p style='clear: left'>

<url>
p {cursor : crosshair} p {cursor : url("mything.cur"), url("second.csr"), text}

p {color: WindowText; background-color: Window}

<style type="text/css"> @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } H1 { font-family: "Robson Celtic", serif } </style>

<style type='text/css'> @media print { body {font-size: 10pt; background-color: white} .iklan .menu {display: none} } @media screen { body {font-size: 12pt; background-color: yellow} } @media screen, print { body {line-height: 1.2} } </style>

<style type="text/css" media="screen, print"> body {line-height: 1.2} </style>

div {overflow: auto}

<shape>
div {clip: rect(5px, 10px, 10px, 5px)}

div {visibility: hidden}

overflow: auto

clip: rect(5px, 10px, 10px, 5px)

visibility: hidden


div {position: absolute}

div {top: 50}

<length> <percentage> <integer>


div {z-index: 2}

static

relative

absolute

fixed

You might also like