Css

From bibbleWiki
Jump to navigation Jump to search

Introduction

Selectors

Simple Selector

The body is known as the simple selector and the background-color:#cccc99; is the property name and value

body {
    background-color:#cccc99;
}

id Selector

#myid {
    background-color:#cccc99;
}

class Selector

.myClass {
    font-style:italic;
}

You can group selector with a comma.

h1,h2 {
    background-color:#cccc99;
}

descendant selector

This will only effect the

elements below a div tag.

div p {
   background-color:#ddddaa;
}

child selector

This will only effect the child and not descendant

elements below a div tag.

div > p {
   background-color:#ddddaa;
}
<div>
  <form>
    <p>I'm a descendant but not a child</p>
  </form>
  <p>I'm a child</p>
</div>


attribute selector

This will only effect if the attribute matches.

img[alt=spacer] {
   padding:0px;
}
<img src="gradient.jpg" alt="spacer">

psuedo selector

This will only effect if the pseudo is true. <syntaxhighlight lang="css"> a:visited {color: #dddddd; }