Web Design with CSS and CSS3 Dr. Jan Stelovsky
CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style classes and rules h1 { font-size: 18px; style class h1 rule key font-size rule value 18px
Sample Page with CSS Page file, e.g. 'index.html': <html><head> <title>page with CSS</title> <link rel="stylesheet" type= text/css" href="mystyle.css /> </head><body> <h1>title</h1> <div class="content"> <p id="aloha">aloha</p> Friends of ICS </div> </body></html> CSS file, e.g. mystyle.css': * { margin: 10px 20px; padding: 0; body { font-family: Arial, sans-serif; font-size: 14px; h1 { font-size: 18px;.content { display: block; #aloha { font-weight: bold; color: orange;
font-family: Text Rules Arial, Helvetica, sans-serif; preferable, more readable "Courier New", Courier, monospace; "Times New Roman", Times, serif; font-size: 12px; 1.2em; preferable units are em (design for different media) font-weight: bold; font-style: italic; line-height: color: red, orange, aqua, etc. #ab34d2 (in hex: ab red, 34 green, d2 blue component) rbga(128,128,128,0.5) gray, 50% transparent text-shadow: 5px 2px 3px blue; 5px to the left, 2px down, 3px blur and blue text-align: center, left, right works for other elements, too text-decoration: none; good for links without underline (use color, bold font, etc. instead)
Colors
Appearance Rules visibility: hidden; opacity: 0.2 20% opaque (barely visible) border: 3px solid #aaa; width, then type, then color outline: similar to border: but outside (better), cons: no rounded corners cursor: pointer, text, crosshair, progress, etc. background-color: rgb(20,255,255); background: good for sprites! url(my_pic.jpg) -35px 20px no-repeat background-image: url(my_pic.jpg) background-position: relative to image -35px 20px 35px from top, 20px from left (negative!) background-repeat: no-repeat, repeat-x, repeat-y, default repeat, repeats horizontally and vertically
Element Layout Rules width: 750px; 70%; of parent block height: padding: 25px; 25 pixels top, right, bottom, and left margin: 0; no margins 10px 5px 20px 0; 10px top, 5px right, 20px bottom, 0 left margin-left:, margin-right: 0 auto; centers horizontally
Parent-related Layout Rules position: with respect to surrounding block static; default, ignores most other positioning rules, e.g. top beware! relative; to parent and previous element absolute; relative to parent only fixed; in browser's window, doesn't scroll with page display: block; occupies entire width, fills it inline; lets in other elements horizontally inline-block; horizontally with other elements, occupies width it needs list-item; as item in an <ul> list (as bullet) none; hidden float: left, right, center clear: both; stops floating top:, right:, bottom:, left: z-order: rules overlapping visibility, 1000 overlaps all below 1000
Special CSS special style (pseudo) classes a:hover { when cursor is over the element a:active { when being clicked a:visited { after used input:focus { when text field is selected input:checked { when checkbox/radio button is selected button:enabled { button:disabled { div:first-child {, div:last-child { div:n-th-child(4) { 4 th child of parent p:first-letter { good for big starting letter special rule attributes important! overrides other rules inherit
Style Class Formats & Chaining h1{ HTML elements, e.g. <h1>.my_class{ elements with a class attribute, e.g. <p class="my_class"> #my_id{ element with a id attribute, e.g. <p id="my_id"> h2,.my_class{ or ; e.g. h2 or.my_class.my_class p{ within; e.g. p inside.my_class.my_class > p{ child; e.g. p child of.my_class.my_class + p{ follows as direct sibling; e.g. p that follows.my_class.my_class - p{ precedes some sibling; e.g. p that precedes.my_class
Sample Style Sheet body { background: orange; color: purple; font-family: times new roman, serif; margin-left: 10%; margin-right: 10%; body { background: white; color: black; h1, h2, h3, h4, h5, h6, h7 { color: midnight blue; background: none; font-weight: bold; text-align: center; ul, ol, dl, p { margin-left: 6%; margin-right: 6%; ul ul, table ol, table ul, dl ol, dl ul { margin-left: 1.2em; margin-right: 1%; padding-left: 0;
Precedence 1. style=" " attribute in HTML element 2. <style> element on page 3. external CSS file 1. #my_id id-relative 2..my_class class-relative 3. h1 HTML-element-relative what comes later
CSS3 media queries responsive design (e.g. for mobile) table-related display rules columns round corners text shadow, outline, rotation gradients animations and transitions (3D!) relative selectors
Resources css-tricks.com treasure chest of how-to-do (and tricks) 10 Reasons Why CSS Sucks old but not outdated; good read (if you've got the time) not because of the rants, but because the comments mention a lot of necessary hacks, so that you can google them how to find a solution that may save you hours the usual suspects MDN best for detailed specs W3Schools simpler, but often to simplicistic, lacks details stackoverflow.com great resource for complex issues, great advice by experts often snooty don't ask help for homework there W3C official, but tedious, last resort