18
Jul
09

css cheat sheet


Use the following for html sites that are strictly XHTML.

Full downloadable source for this page is available here. Corrections and enhancements are welcome, fork, change and push back to GitHub.

Inline style

</pre>
<style type="text/css"><!--
/* <!CDATA[ */ h1 { font-size: 16pt; font-weight: bold; } /* ]]> */
--></style>
<pre>

Including CSS from a file
The included file does not need any tags to surround the css code.

	<link href="demo_styles.css" rel="stylesheet" type="text/css" />

Adjacent Sibling Selector

h1 + p {font-variant: small-caps]

Universal selector

* { color: green;}

Pseudo-Classes

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:navy;}

First child

div.weather strong:first-child {color: red;}

Focus

An element such as a text field of a form is said to have focus when the user clicks it; that’s where the character appear when the user types. For instance, the code

input:focus {border: 1px solid blue;}

puts a blue border around such a field when the user clicks it.

First Letter

p:firstletter {font-size:300%; float:left;}

First Line

p:first-line{font-varient:small-caps;}

Before / After

h1.age:before {content:"Age: "}
h1.age:after {content:" years old."}</pre>
<h1 class="age">25</h1>
<pre>

Font Style and Size

* {font-family: cursive, monospace, sans-serif, serif}
* {font-size: 12pt;}
* {font-size: .8em;}

Testing 123

font-size: 12pt

font-size: .8em

Text Properties

text-indent - sets the start position of the text box in relation to the containing element.
letter-spacing - also known as tracking
word-spacing
text-decoration
text-align - left, center, right, justify
line-height -
text-transform - uppercase, lowercase, capitalize, none
vertical-align - value, sub, sup, top, middle, bottom

Positioning Elements
Border
p { border: 1px solid #333; background-color: #EEE}
Width – thin, medium, thick, any unit
Style– none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset
color

Margin and Padding
* {margin:0; padding:0}

p { border-style: solid}

Full downloadable source for this page is available here.
Advertisements

0 Responses to “css cheat sheet”



  1. Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 74 other followers

July 2009
S M T W T F S
    Aug »
 1234
567891011
12131415161718
19202122232425
262728293031  

Blog Stats

  • 801,304 hits

%d bloggers like this: