CSS3

Rounded Borders - for mozilla & webkit
.border_rounded {
-moz-border-radius:10px;
-webkit-border-radius:10px; = safari,firefox,googlechrome, etc
border:2px solid #09F;

Shadows - only webkit
.border_shadow {
-webkit-border-radius:10px;

Text Shadow
.text_shadow {

Cursor Property

css to control appearance of cursor

style type="text/css">
#box {
/*auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait */
cursor:move; - selection of different cursors available
background-color:C9F;
border#939 solid 1px;
width:6em;
height:6em;
}
/style>

body>
div id="box">content /div>
/body>

Formatting

Text Align

Inherit - Centre - Justify - Left - Right

p {
text-align:justify;
}



Text Decoration
blink - inherit - line-through - none - overline - underline - can combine
used mostly for hyperlink elements


p {
text-align:justify;
text decoration:overline underline;
}
a {
text-decoration:none;
}

/style>
/head>

body>
a href="#">link /a>

/body>

TIP - links preferred to have underline as users are used to them


Letter spacing - allows to control the spacing between the letters - works by allowing to enter length value - in addition to the default value -

letter-spacing:1em; - in addition to default value

can also specify negative values -

letter-spacing:-.1em;

for default value -

letter-spacing:normal;

WORD SPACING
- increases or decreases the spacing between words - can be affected by text-align:justify

word-spacing:1em;

TEXT TRANSFORM - alters how the text would appear in normal flow of doc - changes whether letters are upper or lower case

text-transform:lowercase; - reverts everything to lowercase

text-transform:capitalize; - makes first letter of every word a capital

Determination of what is a "word to capitalize" depends on the browser
currently after a space

text-transform:uppercase; - makes everything uppercase
text-transform:none;
text-transform:inherit;

Indent Property

when a screen reader reads a doc - can read all text inside doc
however - can use text indent to hide content from none screen readers
by using a large neg value - can hide structural headers off the page
can use any other fixed pixel based measurement or points, percentages - 50% would be 50% of the width of the block of text

text-style= text/css">
p {
text-indent:1.5em;
width:8em;
}
/style>

/head>

body>
p>Nothing makes a blog post more eye-catching than a great header
/body>

Pseudo Class

not to be confused with elements - different

Hover pseudo class



style type="text/css">
div {
height:5em;
width:5em;
background-color:#F39;
}
div:hover {
height:8em;
width:8em;
background-color:#3C0;
}
/style>
/head>

body>


/body>



Focus pseudo class

style type="text/css">
a:focus {
font-size:2em;
color:#0F0;
}

/style>
/head>

body>


First Child pseudo class
will only match an element if it is the first child of a parent element

style type="text/css">
li {
color:#009;
}
li:first-child {
font-size:2em;
color:#C3C;
}
/style>
/head>

body>
ul>
li>1 /li>
li>2 /li>
li>3 /li>
li>4 /li>
/ul>


/body>



P lang pseudo class

style type="text/css">
:lang (sp) {
color:#F30;
font-weight:bold;
}
/style>
/head>

body>
p lang="sp">-Habla Ingles? /p
p lang="en">Do you speak English? /p>

p lang="sp">-Habla Ingles? lkf fdjgkd skfjdk gdkst g /p>

/body>



css3 standards pseudo class - not all browsers support these standards as yet
- last child

style type="text/css">

p:last-child {
color:#F00;
}
/style>
/head>

body>
div> - parent
p>text /p> - children
p>text /p>
p>text /p>
p>text /p>
/div>

/body>

- only child

style type="text/css">

p:only-child { - only works when there is only one child
color:#F00;
}
/style>
/head>

body>

div>
p>text /p>
/div>
/body>


- first of type
first of a specified type
style type="text/css">

p:first-of-type { - will change to first of the that type
font-family:Verdana, Geneva, sans-serif;
color:#3CF;
}
/style>
/head>

body>

div>
h2>header 2 /h2>
p>text 1 /p>
p>text 2 /p>
p>text 3 /p>
h2>header 2 /h2>
p>text 4 /p>
/div>
/body>

last-of-type & only-of-type

works as first-of-type

:root {
background-color:#9CF;
border:2px solid #F00;
}

:empty { - formats empty elements
background-color:#9CF;
border:2px solid #F00;
}

can be more specific
p:empty { - only affects the p elements
background-color:#9CF;
border:2px solid #F00;

:target {
backround:red;
}
p {
background:gray;
}
/style>
/head>
body>
p>Link : a href="#pelement">target p element /a>. /p>
p id="pelement">text text text /p>
/body>

hyperlink in first para is linking to #pelement


}

Generated Content

Properties that allow us to generate content - work in conjuction with pseudo elements before & after - keep in mind that although we are generating content, and it does appear within browser - we are not altering the document - just the presentation of the document.
Embedded style sheet:

style type="text/css">
#content:before { - appears before any other content
content:"Designed by Daniel";
}
/style>
/head>
body>
div id="content">
a href="#">website /a>
/div>


Counter:

style type="text/css">
ul {
counter-reset:count
}
li:before {
counter-increment:count;
content:"number " counter(count) ": ";
}
/style>
/head>
body>
ul>
li>one /li>
li>two /li>
li>three /li>
li>four /li>
li>five /li>
li>six /li>
/ul>
/body>

Pseudo Elements

allow to extend selectors - to be more specific
allow to match elements in doc that don't appear specificly in the doc tree
eg. 1st letter of paragraph - pseudo element
- is identified in css1 & css2 by : , pseudo class is identified by :: in css3


style type="text/css">

p:first-letter {
font-size:2em;
color:#3C3;
}
/style>
/head>

body>
p>text yes it is text text yes it is text/p>
/body>


Only fully supported by Firefox and Safari at this time
partially supported by Opera

style type="text/css">
p:first-line {
text-transform:capitalize;
color:#3C3;
}
/style>
/head>

body>
p>text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text text yes it is text/p>
/body>

* = everything

*:selection {
background:#0F0;
color:#F00;

- any text selected by the user will be coloured by the user
}