Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.

  • Published on
    14-Dec-2015

  • View
    215

  • Download
    2

Transcript

  • Slide 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 Slide 2 Topics What is CSS CSS Syntax 4 CSSs 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 CSSs relationship with accessibility Lets Build a Page Questions? Slide 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 Slide 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; } Slide 14 Media Types example: http://www.w3schools.com/css/css_mediatypes.asp & link Slide 15 Links with preloaded images example: www.imperialinktattoo.net Slide 16 Button rollovers Sprites example: www.ptli.org https://www.ptli.org//source/images/button2.jpg Entire site as one big image with positioning. Slide 17 CSSs 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 Slide 18 Lets Build a Page Slide 19 Questions? CB Averitt cb.averitt@fdtc.edu

Recommended

View more >