/* Standard CSS */ /* format: selector,selector {property:value; property:value;} inside the {} is called the declaration example: body {background-color:yellow; border: 1em solid #000066;} p,div {background-color:yellow; border: 1em solid #000066;} Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px selector - HTML element body {background-color:yellow;} - id - for one element with tag id = "fname" #fname {font-family: Sans-Serif;}

Hello World!

#customers td.cls, #customers th {font-size:1em;} - class - for a group of elements (more than one) .center {text-align:center;} * center can be applied to any element with class center *

Center-aligned heading

p.center {text-align:center;} * in this case, center is only applied to paragraphs with class center *

- pseudo-classes are used to add special effects to some selectors :link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over :focus input:focus Selects the input element which has focus "input:focus {background-color:yellow;}" changes background of input field to yellow when typing in it. :first-letter p:first-letter Selects the first letter of every

element :first-line p:first-line Selects the first line of every

element :first-child p:first-child Selects every

elements that is the first child of its parent :before p:before Insert content before every

element :after p:after Insert content after every

element :lang(language) p:lang(it) Selects every

element with a lang attribute value starting with "it" - selector:pseudo-class {property:value;} a:hover {color:#FF00FF;} - selector.class:pseudo-class {property:value;} a.red:visited {color:#FF0000;} - :first-child pseudo-class matches a specified element that is the first child of another element Grouping and Nesting Selectors

This paragraph has blue text, and is center aligned.

This isn't a paragraph, therefore has no blue text nor alignment.

p elements inside a "marked" classed element keeps the alignment style, but has a different text color.

There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style

This is a paragraph.

The browser will have it's own built in style sheet the style closest to the element will take priority (inline, then internal (unless external loaded after), then external, then browser Units % percentage in inch cm centimeter mm millimeter em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses. 16px=1em is default. ex one ex is the x-height of a font (x-height is usually about half the font-size) pt point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) px pixels (a dot on the computer screen) Ways to specify color HEX value - like "#ff0000" RGB value - like "rgb(255,0,0)" color name - like "red" All HTML elements can be considered as boxes. Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins. Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is inherited from the color property of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear Outline - Like border. Placed next to border. Doesn't affect elements size so ignores elements next to it. Ignores Margin. width:220px; padding:10px; border-style:solid; None of the border properties will have ANY effect unless the border-style property is set! border-top-style:dotted; Each side could have its own border style border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; border-width:medium; set in pixels, or by using one of the three pre-defined values: thin, medium, or thick border-color:red; border:5px solid gray; Border shorthand. margin:0px; The border-style property can have from one to four values. border-style:dotted solid double dashed; top border is dotted right border is solid bottom border is double left border is dashed border-style:dotted solid double; top border is dotted right and left borders are solid bottom border is double border-style:dotted solid; top and bottom borders are dotted right and left borders are solid border-style:dotted; all four borders are dotted The border-style property is used in the example above. However, it also works with border-width and border-color (border-left-width:15px;). */ .AvoidMenu { margin-top: 80px; } .DarbyLogo { font-family: "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; } .RoundedShadow img { background-color: #FFFFFF; -webkit-box-shadow: 1ex 1ex 2ex #000000; box-shadow: 1ex 1ex 2ex #000000; border-radius: 2ex; margin-right: 4ex; margin-bottom: 4ex;} .FullWidth img { width: 100%; } #ContentsNav ul { text-align:center } #SubNav ul { margin: auto; width: 18em; } footer { clear: both; display: block; padding: 2em; text-align: center; }