©SoftMoore ConsultingSlide 1 Introduction to HTML: Cascading Style Sheets

©SoftMoore ConsultingSlide 2 Reasons to Use CSS Saves work and time –changes appearance of one or more webpages by editing one document –easier to maintain Improves accessibility by separating content from appearance Allows more functionality and control over web design than HTML alone Maintains small file sizes – centralizes display instructions into one file or location Cascades styles – allows multiple styles to be integrated into one hierarchy

©SoftMoore ConsultingSlide 3 Adding CSS to HTML External –separate CSS file –linked from HTML Internal –defined within HTML Inline –defined within HTML tag

©SoftMoore ConsultingSlide 4 External Best Use: group of similar looking pages Separate CSS text file –List of rules; no tags or HTML –File extension is.css Linked within HTML tag Examples <link rel="stylesheet" type="text/css" href="filename.css"> <link rel="stylesheet" type="text/css" href="

©SoftMoore ConsultingSlide 5 Internal Best Use: one uniquely styled page Defineded within HTML <!-- hide from old browsers h1 {color: blue ; } -->

©SoftMoore ConsultingSlide 6 Inline Best Use: one individually styled element Defined within HTML tag Example: Four score and seven year ago... Recommendation: Use this option sparingly

©SoftMoore ConsultingSlide 7 Syntax Basic Syntax: selector {property: value;} Example: h1 {color: blue;} Selector: an HTML element –p– ul –h1-h6– body –div– etc. Property: Manipulates the selector’s style or format –font– color –margin– etc. Value: Gives the property details on how to behave –2 PX– center –bold– etc.

©SoftMoore ConsultingSlide 8 More Syntax Two word Values h2 {font-family: 'sans serif';} ul {list-style: upper-roman;} Multiple Properties p {text-align: center; font: Times;} or p { text-align: center; font: Times; } Group Selectors h1, h3, h4 {color: blue;}

©SoftMoore ConsultingSlide 9 ID & Class Selectors Used when the same element needs to appear differently on the same web page ID –used only once in an HTML document –Style: #name { property: value; } –HTML: Hello Class –applied to many elements in an HTML document –Style:.name { property: value; } –HTML: How are you? –Style: h1.name { property: value; } –HTML: Fine, thanks.

©SoftMoore ConsultingSlide 10 Hyperlink Formats Pseudo-classes –don’t show in HTML markup –uses within the document body Examples a:link { font-size: 15px; } a:visited { color: yellow; } a:active { background-color: #000000; }

©SoftMoore ConsultingSlide 11 Text Properties text-indent: can be negative used mainly for block elements ( div, blockquote, pre ) text-align: center | right | left | justify replaces align = "center" line-height: increases or decreases vertical space between lines vertical-align: baseline | sub | super | bottom | text-bottom | middle | top | text-top especially useful for image placement within text

©SoftMoore ConsultingSlide 12 Text Properties (continued) word-spacing: and letter-spacing: increases or decreases horizontal space between words or letters text-decoration: none | underline | overline | line-through | blink can be used to suppress the underlining of hyperlinks

©SoftMoore ConsultingSlide 13 Font Properties Font styles in CSS replace the tag in HTML font-family: | family | backup family –Times, Helvetica, Arial, Comic Sans, etc. –use single quotes ( ' ), not double quotes ( " ) font-weight: normal | bold | bolder | lighter | , 200, etc. are weights of boldness (higher numbers provide stronger bold) font-style: italic | oblique | normal oblique is a slantiness somewhere between normal and italic font-variant: small-caps | normal allows for upper case letter of different sizes

©SoftMoore ConsultingSlide 14 Box and Border Properties width: height: margin: can be negative margin-top, margin-bottom, margin-right, margin-left padding: –cannot be negative padding-top, padding-bottom, padding-right, padding-left

©SoftMoore ConsultingSlide 15 Box and Border Properties (continued) border: border-top, border-bottom, border-right, border- left border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset border-width: thin | medium | thick | border-top-width, border-bottom-width, border-right-width, border-left-width

©SoftMoore ConsultingSlide 16 Float, Clear, and Lists float: left | right | none allows text to be wrapped around an element clear: left | right | both | none prohibits floating elements from interfering/overlapping with other elements (similar to ) list-style: | | list-style-type: disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none list-style-image: list-style-position: inside | outside

©SoftMoore ConsultingSlide 17 Comments Comments can be used to help explain a statement or code. Comments are ignored by browsers /* Comments go between symbols like these */ Comments can span over multiple lines.

©SoftMoore ConsultingSlide 18 Units and Values Named color –aqua– maroon– etc. –taken from original Windows VGA colors –Example: p {color : red; } RGB color –hexadecimal (#rrggbb) –Example: a:link {color : #ffff00; } Background Image body {background-image: url(image.jpg); } h2 {background-image: url( } Note: No whitespace between “url” and the beginning parentheses.

©SoftMoore ConsultingSlide 19 Unit and Value Lengths Absolute lengths –not recommended for web display (better for print) –too dependent on operating system and monitor –cm, in, pc (picas), mm, pt (points) Relative lengths adjust to screen resolution, width of viewing area, user preferences –em (em-height) - equals font height –ex (x-height) - equals height of a lowercase ‘x’ –px (pixels) - equals one dot on a screen best for images and good for web display possible printing size problems