Scribd Logo
Upload

Welcome to Scribd!

  • 8 Dasar - Css

    Uploaded by

    Yusup Andy
    86 views14 pages

    Original Title

    8 dasar_css

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    86 views14 pages

    8 Dasar - Css

    Uploaded by

    Yusup Andy

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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