1. Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site using CSS. CB Averitt Florence-Darlington Technical College cb.averitt@fdtc.edu

2. Topics What is CSS CSS Syntax 4 CSS’s Classes ID tag Tools & Resources CSS Best Practices What Browser should be used in designs and layouts? My Challenges Media Types Links with Preloaded Images Button Rollovers – Sprites CSS’s relationship with accessibility Let’s Build a Page Questions?

3. What is CSS? – CSS stands for Cascading Style Sheets – Styles define how to display HTML elements – Styles are normally stored in Style Sheets – Styles were added to HTML 4.0 to solve a problem – External Style Sheets can save you a lot of work – External Style Sheets are stored in CSS files – Multiple style definitions will cascade into one w3schools.com

4. CSS Syntax – Selector {property: value} - example: body {color: black} – More than one property – Semicolon - Selector {property1: value1; property2: value2;} example: p {text-align: center; color: red} – Readable – example: p { text-align: center; color: black; font-family: arial; } – Grouping – use a comma h1,h2,h3,h4,h5,h6 { color: green; }

5. 4 css’s – Browser Default – External style sheet – example – Internal style sheet (inside the head tag) – example: www.powersaviation.com – Inline style (inside an html element) – example A new background and font color with inline CSS link

6. Classes – Different styles for the same type of html element – example: p.right { text-align: right; } p.center { text-align: center; } p.left { text-align: left; } This paragraph will be right-aligned. This paragraph will be center-aligned. This paragraph will be left-aligned. link

7. ID – HTML elements with particular attributes. a unique identifier to an element - example: #red { color: red; } This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. This paragraph will be the color red. link

8. tag – defines a division or a section in an HTML document. – is often used to group block-elements to format them with styles. – Browsers add a between

9. Tools & Resources – Dreamweaver – Web Developer for Firefox – Cssfly.net – www.cssfly.netwww.cssfly.net – www.w3schools.com www.w3schools.com – Google – Validation – Existing Websites

10. CSS Best Practices – Doc Types – examples: http://www.w3schools.com/tags/tag_doctype.asp http://www.w3schools.com/tags/tag_doctype.asp The doctype declaration should be the very first thing in an HTML document, before the tag. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly. linklink – xhtml Closing – example: This is some text. Self closing – example:

11. Best Practices continued – Use standard html tags first - H1, H2, etc. – Defining styles (browsers may be different – default styles) – Screen Resolutions 1024 X 768 What are the big boys doing? – CSS Comments – example: /* This is a comment */

12. What Browser should be used in designs and layouts? – Types Firefox Internet Explorer 7 Internet Explorer 6 Safari Opera Chrome – Browser Stats Over the last 30 days IE is 93%, Firefox is 5.6% and Safari is.68%. Within IE, IE 7.0 is 90%, IE 6.0 is 9% and IE 8.0 is.8%. All Of Them!!

13. My challenges in the beginning – Pushing a page down (min-height. IE 6.0) – Do not start your class name with a number – example: #1heading {color: black;} – Site Centering – Positioning on the parent - linklink

14. Media Types – example: http://www.w3schools.com/css/css_mediatypes.asp & link

15. Links with preloaded images – example: www.imperialinktattoo.net

16. Button rollovers – Sprites – example: www.ptli.org https://www.ptli.org//source/images/button2.jpg – Entire site as one big image with positioning.

17. CSS’s relationship with accessibility – Converting from tables to CSS is the first step. – Not an “end all” Alt tags on images Closed Captioning/Transcripts for videos Links that make sense – avoid “click here” Organize page with H1, H2, p, etc

18. Let’s Build a Page

19. Questions? CB Averitt cb.averitt@fdtc.edu