CSS SUMMARY CSS is a way of styling a webpage and the elements within it in a consistent manner.

Inserting CSS Inline: CSS can be added inline as follows: <tag style =property:value> Internal: CSS can be added to header as follows: <style> tagtype { property: value; } </style> External: CSS can be kept in external file and imported as follows in the head section: <link rel="stylesheet" href="style.css"> Comments CSS Comments can be added for single or multiline comments as follows: /* comment */ Lengths and Percentages For pixels use: px (such as font-size: 12px) For em (the calculated size of a font) use: em (such as font-size: 2em) (doubles current font size) For points as oft used in print media, use: pt (such as font-size: 12pt) For percentages use: % (such as width: 80%) Use 0 without anything is meaning is none Use rem instead to avoid cascading sizes and set fall back in px (font-size: 14px; fontsize: 1.4rem;) Applying colour Can use name but hexadecimal preceded by # is best example: #ff0000 Change font color: p {color: #ff0000;} Change background color: p{background-color:#ff0000} Can use semitransparent color with rgba: rgba(1,1,1,0.8) (last digit is degree of solidity Will only work in modern browsers including Internet Explorer 9 or above HSL (hue (determined by angle on color wheel), saturation and lightness) can also be used to set colors by using something like color: hsl(36,50%, 20%) This is compatible with IE & above HSLa allows for semitransparent color and HSL colors to be mixed. To use, use color: hsla(0, 75%, 75%, 0.5) Styling Font Select fonts by availability as follows: body {font-family: arial, Helvetica,} Priority set by order, first font found, first used Can also use Google fonts. To do this first: Link style sheet in header: <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> Use name of font in font-family section Can also use Korean fonts through: http://www.fontface.kr/ To use a font face use @font-face {font-family: fontfamilyname; font local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);} etc Can make font bold or normal by using: font-weight: bold/normal Recommended way to set scalable font: Set body to 62.5% , use: body { font-size: 62.5%;} Use em to represent pixel by diving px value by ten:h1 {font-size: 1.4em; /* 14px */} Decorating Text/Links

Three options available, use: text-decoration:none/underline/overline/line-through Only use underline for links due to web conventions

Transforming Text Use: text-transform: capitalize, uppercase, lowercase, none

Text Spacing To change space between words, use: word-spacing:none/measurement eg .5em To change space between letters, use: letter-spacing:none/measurement eg .5em To align text, use: text-align:right/left/justify/centre To indent text, use: text-indent: none/measurement Margins & Padding Box model is Element, Padding, Border, Margin. Not all need to be used To change any use name for example border:20em; Can also change particular part of box add name-top/left/right/bottom, example: margintop:1em; Borders To make border around element, use: border-style: solid/ dotted/ dashed/ double/ groove/ ridge/ inset/ outset To set the border width use: border-width (or border-width-right etc): 20px Change border colour using: border-color:hexvalue Selectors Class Selectors To apply a styling to a number of elements uses classes. This can be done by: In CSS file: .classname {styling etc} or element.classname {styling} In Html: <element class = classname> ID Selectors To apply styling to a particular element use ID. In CSS: #idname {styling} or #element.idname {styling} In Html: <element ID = idname> Grouping Selectors To group selectors having the same style, simply separate with commas. Nesting selectors You can put the general properties in a selector first and nest for specialized selectors and values under these by including name of the first selector before the second on the same line. Example: #top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; }

Universal selectors To apply a style to everything on a page use: * { } To apply a style to everything contained in a parent element use: parent * { }. Example: #content * { display:block;} Child selectors To select the child elements of an element but not the grandchildren use: #idname > child element { .} Adjacent selectors To allow the same CSS to be applied directly to the next element in the code use: element1 + element2 {} To allow the same CSS to be applied directly to all elements after the first element in the code bearing the same tag use : element1 ~ element2 {} Basic Pseudo Classes Links can be styled with a: link/visted/hover{color:enter color}. Eg: a visited{color:red;} Other properties which can be style are text-decoration:none and background-color:red Styling first descendent of element only: p:first-child{styling;} Short-hand properties CSS allows for certain properties to be written in shorthand Padding & Margins Rather than margin-top, margin-right, margin-bottom, margin-left, can simply use margin: 20px 20px 20px 20px (same applies for padding) Borders Rather than border-top-width etc, can simply use border-width: 20px 20px 20px 20px Can also combine border-width, border-color and border-style together as follows: border: 1px red solid Fonts Fonts can also be written in shorthand using the following order: font-style, font-weight, font-size, line-height, and font-family. Example: font: italic bold 12px/2 courier; Background Images To add a background image, use: background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right; This amalgamates the following properties: background-color, which we have come across before. background-image, which is the location of the image itself. background-repeat, which is how the image repeats itself. Its value can be: repeat, the equivalent of a tile effect across the whole background, repeat-y, repeating on the y-axis, above and below, repeat-x (repeating on the x-axis, side-by-side), or no-repeat (which shows just one instance of the image). background-position, which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right. Can be used in many elements including bullet points and search boxes Specificity Where selectors are equal the latter selector will take precedence However where a selector is more specific (for example nested), it will take precedence

despite coming first Examples of specificity from least to most (6 as most) 1. p has a specificity of 1 (1 HTML selector) 2. div p has a specificity of 2 (2 HTML selectors, 1+1) 3. .tree has a specificity of 10 (1 class selector) 4. div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10) 5. #baobab has a specificity of 100 (1 id selector) 6. body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)

Display If you all elements to appear side by side use inline. Example: li { display: inline } Note you cannot add height, width or margin If you want an element to fill the inside of its container, use block: Example: #navigation a { display: block; padding: 20px 10px; } This will create an element in which a height, width or margin can be added If you want the elements to appear side by side but also want to specific height,width or margin, use display:inline-block If you want to hide an element use {display:none} If you want to prevent an element from displaying use: {visibility:hidden} list-item displays a box in the way that you would usually expect an li HTML element to be displayed. To work properly then, elements displayed this way should be nested in a ul or ol element Positioning Static: This is the default position of all elements and doesnt normally need to be declared. Use: position:static. Note that you cannot offset the position. Relative: This is similar to static but allows the element to be offset by setting left and top. Use position: relative; left:number; top:number (positive number right, negative left etc) Absolute: This allows for absolute positioning anywhere within the element that contains the element as long as the containing element is set as relative, absolute or fixed. It use left, right, top and bottom for positioning. Fixed: Allows for an item to be fixed to the screen disregarding its containers etc. It use left, right, top and bottom for positioning. Centering Elements To center text, simply use: { text-align:center;} To center text virtually and horizontally use: {text-align; line-height: n px;} where n is equal to the height of the container To center element horizontally, use: {margin-left: auto; margin-right: auto;} Only works where width is defined To center an absolutely positioned element where parent and element widths are known, use: left: n px where n = container width - element width/2 px To center an absolutely positioned element, where parent has percentage width use: {left: 50%; margin: 0px 0 0 n px or %} , where n = child width/2 To dead center an element use: {margin: -n px 0 0 -n px; left: 50%; top: 50%;} where n = height or width/2 To center an image, use: {display: block; margin-left: auto; margin-right: auto; } To vertically center element use: { min-height: 12em; display: table-cell; verticalalign: middle; }

Centering a website Use the following as a containing div with id page-wrap to center a website: body { text-align: center; } #page-wrap { text-align: left; width: 800px; margin: 0 auto; } Floats Allows an element to be set so that other elements around it move to the left or the right If you wants element to be aligned left and items to flow right use: float:left; If you want elements to be aligned right and items to flow left use: float:right; Note that float does not work with absolutely positioned elements Problem with float is that causes the height on the parent element to be reset to zero. As such, after the last float instance, the floats must be cleared. This can be done as follows: Clear fix:

/* For modern browsers */ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .clearfix { zoom:1; } Add class = clearfix to the div class to clear the contents or alternatively add .clearfix .elementname in the CSS

Rounded Corners To make rounded corners, use: border-radius: 5px etc To set an individual corner use: border-top-left-radius: 5px etc If you use two values, first value approved to top-left & bottom-right, second value topright and bottom-left If you use three values, top-left, top-right & bottom left, and then bottom right If really necessary to have fall-back consider using Jquery or CSS3PIE Ellipses To allow for the top and side values to be altered use: border-radius: 10px/5px Border shorthand For all corners use, border-radius: 5px 10px 5px 10px goes from top left in clockwise fashion

Box-Shadows To create a box shadow, use: box-shadow: 5px 5px 3px 1px #999 where first value is horizontal offset, second is vertical offset, third is blur, fourth is spread distance (optional) and fifth is colour (also optional). Inner Shadow To create an inner shadow, use: box-shadow: inset 5px 5px 3px 1px #999 where first value is horizontal offset, second is vertical offset, third is blur, fourth is spread distance (optional) and fifth is colour (also optional). Importing Other StyleSheets To import additional stylesheets, insert the following into the top of the main stylesheet: @import url(morestyles.css); Targeting different media To target different media for example printing or different sized screens use: @media print {} Possible values include: screen, print, projection, handheld, and all, or a commaseparated list of more than one.
http://css-tricks.com/css-media-queries/ http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-amobile-version-of-your-website/