CSS Cheatsheet
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
395
On Slideshare
395
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS Reference Anuja Madushan | www.anujalk.info
  • 2. All CSS Background PropertiesThe number in the "CSS" column indicates in which CSS version the propertyis defined (CSS1 or CSS2).Property Description Values background-color Sets all the background-image background background-repeatbackground properties in one background-attachment declaration background-position inherit Sets whether a scrollbackground- background image is fixedattachment fixed or scrolls with inherit the rest of the page color-rgb color-hex Sets the backgroundbackground-color color-name color of an element transparent inherit Sets the background url(URL)background- image for an noneimage element inherit left top left center left bottom right top right center Sets the startingbackground- right bottom position of aposition center top background image center center center bottom x% y% xpos ypos inherit repeat Sets if/how a repeat-xbackground- background image repeat-yrepeat will be repeated no-repeat inherit
  • 3. All CSS Text PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Valuescolor Sets the color of a text color ltrdirection Sets the text direction rtl normal numberline-height Sets the distance between lines length %letter- Increase or decrease the space normalspacing between characters length left righttext-align Aligns the text in an element center justify none underlinetext- Adds decoration to text overlinedecoration line-through blink Indents the first line of text in lengthtext-indent an element % nonetext- colorshadow length nonetext- Controls the letters in an capitalizetransform element uppercase lowercase normalunicode- embedbidi bidi-override baselinevertical- Sets the vertical alignment of subalign an element super top
  • 4. text-top middle bottom text-bottom length % normalwhite- Sets how white space inside an prespace element is handled nowrapword- Increase or decrease the space normalspacing between words lengthAll CSS Font PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values font-style font-variant font-weight font-size/line-height font-family Sets all the font captionfont properties in one icon declaration menu message-box small-caption status-bar inherit family-name Specifies the font familyfont-family generic-family for text inherit xx-small Specifies the font size of x-smallfont-size text small medium
  • 5. large x-large xx-large smaller larger length % inherit normal Specifies the font style italicfont-style for text oblique inherit Specifies whether or not normal a text should befont-variant small-caps displayed in a small-caps inherit font normal bold bolder lighter 100 200 Specifies the weight of a 300font-weight font 400 500 600 700 800 900 inheritStyling Links  a:link - a normal, unvisited link  a:visited - a link the user has visited  a:hover - a link when the user mouses over it  a:active - a link the moment it is clicked
  • 6. All CSS List PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values list-style-type Sets all the properties for a list-style-positionlist-style list in one declaration list-style-image inherit URLlist-style- Specifies an image as the noneimage list-item marker inherit Specifies if the list-item insidelist-style- markers should appear inside outsideposition or outside the content flow inherit none disc circle square decimal decimal-leading-zero armenianlist-style- Specifies the type of list- georgiantype item marker lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman inherit
  • 7. All CSS Border PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values Sets all the border border-widthborder properties in one border-style declaration border-color Sets all the bottom border border-bottom-widthborder-bottom properties in one border-bottom-style declaration border-bottom-colorborder- Sets the color of the border-colorbottom-color bottom borderborder- Sets the style of the border-stylebottom-style bottom borderborder- Sets the width of the border-widthbottom-width bottom border color_name hex_number Sets the color of the fourborder-color rgb_number borders transparent inherit Sets all the left border border-left-widthborder-left properties in one border-left-style declaration border-left-colorborder-left- Sets the color of the left border-colorcolor borderborder-left- Sets the style of the left border-stylestyle borderborder-left- Sets the width of the left border-widthwidth border Sets all the right border border-right-widthborder-right properties in one border-right-style declaration border-right-colorborder-right- Sets the color of the right border-colorcolor borderborder-right- Sets the style of the right border-stylestyle borderborder-right- Sets the width of the right border-width
  • 8. width border none hidden dotted dashed solid Sets the style of the fourborder-style double borders groove ridge inset outset inherit Sets all the top border border-top-widthborder-top properties in one border-top-style declaration border-top-colorborder-top- Sets the color of the top border-colorcolor borderborder-top- Sets the style of the top border-stylestyle borderborder-top- Sets the width of the top border-widthwidth border thin medium Sets the width of the fourborder-width thick borders length inheritAll CSS Outline PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values outline-color Sets all the outline properties in outline-styleoutline one declaration outline-width inherit color_nameoutline- Sets the color of an outline hex_numbercolor rgb_number
  • 9. invert inherit none dotted dashed solidoutline- double Sets the style of an outlinestyle groove ridge inset outset inherit thin mediumoutline- Sets the width of an outline thickwidth length inheritAll CSS Margin PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values margin-top A shorthand property for margin-rightmargin setting the margin properties margin-bottom in one declaration margin-left automargin- Sets the bottom margin of an lengthbottom element % auto Sets the left margin of anmargin-left length element % automargin- Sets the right margin of an lengthright element % auto Sets the top margin of anmargin-top length element %
  • 10. All CSS Padding PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values padding-top A shorthand property for padding-rightpadding setting all the padding padding-bottom properties in one declaration padding-leftpadding- Sets the bottom padding of an lengthbottom element %padding- Sets the left padding of an lengthleft element %padding- Sets the right padding of an lengthright element %padding- Sets the top padding of an lengthtop element %All CSS Dimension PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values autoheight Sets the height of an element length % inherit none Sets the maximum height of anmax-height length element % inherit none Sets the maximum width of anmax-width length element % inherit Sets the minimum height of an lengthmin-height element % inherit length Sets the minimum width of anmin-width % element inherit
  • 11. auto lengthwidth Sets the width of an element % inheritAll CSS Positioning PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values auto Sets the bottom margin lengthbottom edge for a positioned box % inherit shape Clips an absolutelyclip auto positioned element inherit url auto crosshair default pointer move e-resize ne-resize Specifies the type ofcursor nw-resize cursor to be displayed n-resize se-resize sw-resize s-resize w-resize text wait help auto Sets the left margin edge lengthleft for a positioned box % inherit Specifies what happens if autooverflow content overflows an hidden
  • 12. elements box scroll visible inherit absolute Specifies the type of fixedposition positioning for an relative element static inherit auto Sets the right margin lengthright edge for a positioned box % inherit auto Sets the top margin edge lengthtop for a positioned box % inherit number Sets the stack order of anz-index auto element inheritAll CSS Float PropertiesThe number in the "CSS" column indicates in which CSSversion the property is defined (CSS1 or CSS2).Property Description Values left Specifies which sides of right an element where otherclear both floating elements are not none allowed inherit left Specifies whether or not rightfloat a box should float none inherit
  • 13. Center Aligning Using the marginPropertyBlock elements can be aligned by setting the left and rightmargins to "auto".Note: Using margin:auto will not work in Internet Explorer,unless a !DOCTYPE is declared.Setting the left and right margins to auto specifies that theyshould split the available margin equally. The result is acentered element:Example.center{margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;}Tip: Aligning has no effect if the width is 100%.Note: In IE 5 there is a margin handling bug for blockelements. To make the example above work in IE5, addsome extra code.Left and Right Aligning Using theposition PropertyOne method of aligning elements is to use absolutepositioning:
  • 14. Example.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}Note: Absolute positioned elements are removed from thenormal flow, and can overlap elements.Crossbrowser Compatibility IssuesWhen aligning elements like this, it is always a good idea topredefine margin and padding for the <body> element. Thisis to avoid visual differences in different browsers.There is also another problem with IE when using theposition property. If a container element (in our case <divclass="container">) has a specified width, and the !DOCTYPEdeclaration is missing, IE will add a 17px margin on the rightside. This seems to be space reserved for a scrollbar. Alwaysset the !DOCTYPE declaration when using the positionproperty:ExampleBody {margin:0; padding:0;}.container {position:relative; width:100%;}.right {position:absolute; right:0px; width:300px;background-color:#b0e0e6;}
  • 15. Left and Right Aligning Using the floatPropertyOne method of aligning elements is to use the floatproperty:Example.right{float:right;width:300px;background-color:#b0e0e6;}Crossbrowser Compatibility IssuesWhen aligning elements like this, it is always a good idea topredefine margin and padding for the <body> element. Thisis to avoid visual differences in different browsers.There is also another problem with IE when using the floatproperty. If the !DOCTYPE declaration is missing, IE will adda 17px margin on the right side. This seems to be spacereserved for a scrollbar. Always set the !DOCTYPEdeclaration when using the float property:Examplebody{margin:0;padding:0;}.right{float:right;width:300px;background-color:#b0e0e6;}
  • 16. Creating a Transparent Image<img src="klematis.jpg" width="150" height="113"alt="klematis"style="opacity:0.4;filter:alpha(opacity=40)" />