DokuWiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

===== CSS Cheat Sheet =====

This is a summarized form of the [[http://www.w3schools.com/css/default.asp | CSS Tutorial]].

For reference this is the [[http://www.w3.org/TR/REC-CSS2/  | CSS2 Specification]] .

==== What is CSS ====

* CSS stands for Cascading Style Sheets.
  * Styles define how to display HTML elements. Style sheets are collections of styles.
  * Multiple style sheets will cascade into a single style definition.
  * There are 3 ways to specify styles (decreasing priority):
    - inline as an element style attribute <code html> <p style="color: sienna>text</p></code>
    - in an internal style sheet in the head <code html>
 <head> <style type="text/css">

</style> </head></code>
    - in an external style sheet in a css file <code html>
<link rel="stylesheet" type="text/css"
href="style.css" /> </code>

==== CSS Syntax====
CSS syntax is made up of three parts - selector {property: value}.
  * Multiple property-value pairs may be separated by semi-colons.
  * Multiple selectors must be separated by commas
  * Values must be quoted if they are multiple words 
  * A simple example <code html>
h1,h2,h3 {
text-align: center;
color: black;
font-family: "sans serif" } </code>
  * Classes allow groups of elements to share formatting e.g. <code html>
p.right {text-align: right}
.blue {color: blue}
<p class="right blue">right-aligned blue text</p> </code>
  * Styles can also match on attribute values or id e.g. <code html>
input[type="text"] {background-color: blue}
#id {background-color: blue}
p#id {background-color: blue} </code>
  * CSS uses C-style comments - /* comment */ .

==== CSS Background/Text Properties ====
  * Background properties examples <code html>
background-color: black;
background-image:  url('bg.jpg');
background-repeat: repeat-[x|y]/no-repeat/repeat;
background-attachment: fixed
background-position: center/30% 20%/50px 100px;
background: blue url('bg.gif') no-repeat fixed center; 
</code>
  * Text properties examples <code html>
color: #00ff00/green/rgb(0,255,0) ; text-shadow:blue;
text-align: center/justify ; text-indent: 1cm;
letter-spacing: 0.5cm/-3px ; line-height: 200%;
white-space: nowrap ; word-spacing: 30px
text-decoration: overline/line-through/underline/blink/none
text-transform: uppercase/lowercase/capitalize
</code>
  * Font properties examples <code html>
font-family: times/sans-serif ; font-size: 130%
font-size-adjust: 0.60 ; font-variant: small-caps
font-style: italic/oblique ; font-stretch: wider
font-weight: bold/900
font: italic small-caps 900 12px arial
font: caption/icon/menu/message-box/small-caption/status-bar </code>
==== CSS Border/List Properties ====
  * Border properties examples (btlr=bottom/top/left/right. An outline occurs outside of the border. <code html>
border-style: medium/solid/double/groove/dotted/dashed/inset/outset;
border-btlr: width style color ; border-btlr-style
border-width:5px ; border-btlr-width: thick
border-color: color x 4; border-btlr-color
outline-color/style/width ; outline:color style width</code>
  * A margin describes space around the element. Padding defines the space between border and content.<code html>
margin: width x 4 (trbl); margin-btlr
padding: width x 4 (trbl); padding-btlr</code>
  * List properties examples <code html>
list-style-type: disc/circle/square/none
list-style-type: lower/upper-roman/alpha / decimal
list-style-image: url('a.gif')
list-style-position: inside/outside
list-style: type position image</code>
  * Table properties examples <code html>
table-layout: automatic/fixed;
border-collapse:collapse/separate; empty-cells:show/hide
border-spacing: width x 2;caption-side: btlr
</code>

==== Sizing and Positioning CSS Properties ====

* Size properties examples <code html>
height/width: auto/50%/100px
min/max-height/width:none/50%/100px
line-height: normal/100px/1/50%</code>

* Position properties <code html>
display: inline/none/block
float: btlr</code>

Edit summary

Note: By editing this page you agree to license your content under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International

DokuWiki

Site Tools

Page Tools