Web topic 16 css workflow


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web topic 16 css workflow

  1. 1. Web Authoring Topic 16 – CSS Workflow
  2. 2. ObjectivesStudents should able to:1 Use a standardized workflow to create a CSS web page.2. Create a master style sheet.
  3. 3. CSS Web PageDesigners who are just starting out with CSSoften find that it can be difficult to think outhow to use CSS for layout and design.With a standardized workflow, you can createa new CSS Web page in half the time it wouldotherwise take.
  4. 4. DO NOT START WITH CSSIt can be very tempting to start out designinga Web page by working on the design.But with CSS this can get you into trouble.If you don’t know what will be on the page itcan be difficult if not impossible to createanything more than a basic layout.
  5. 5. DO NOT START WITH CSSStart with your content.Put in your navigation in a list, your headlineswith H1, H2, and H3 tags, and your contentinside paragraphs. If you have sub-sectionson the page, you can separate them with divtags
  6. 6. Master Style SheetCSS Workflow - How to Start Work on aCSS Web PageStart off with a new Master style sheetMaster style sheet should remove defaultstyling from browsers and provide a cleanslate for your entire page.
  7. 7. Master Style SheetStart at the Top and Work DownOnce you have your content and basic HTMLin the page, start at the top of the page andwork on CSS styles as you move down thepage.When you work down the HTML document,you are following the direction of thecascade, and so will end up with lesscomplicated CSS.
  8. 8. Master Style SheetKeep Your CSS SimpleUse simpler CSS:Avoid complex selectors - use simple tag,class, and ID selectors where ever possible.Avoid changing your HTML unless it’sabsolutely essential - adding extra div tags isalmost always a mistake (except for your"container" element for columnal layouts)
  9. 9. Master Style SheetCreate a Library of Styles that You Always UseThese include elements like "center", "floatleft", "underline", and "no underline".You can even create a standard style sheetthat you load first on all your pages.Then, for example, when you use the class"floatLeft" you know that that element willhave the float: left; style applied to it.
  10. 10. Master Style SheetGlobal Defaults Your master stylesheet should start by zeroing out the margins, paddings, and borders on the page. This makes sure that they all display the same: html, body { margin: 0px; padding: 0px; border: 0px; }
  11. 11. Master Style SheetHeadline/Header FormattingHeader tags (H1, H2, H3, etc.) typicallydefault to bold text with large margins orpadding around them. Clearing the weight,margins, and padding, you ensure thatthese tags do not have any extra styles:h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif;}
  12. 12. Master Style SheetPlain Text FormattingBeyond headers, there are other text tagsthat you should be sure to clear out.Such as table cell tags (TH and TD) and formtags (SELECT, TEXTAREA, and INPUT).If you do not set those to the same size asyour body and paragraph text, you may besurprised at how the browsers render them.
  13. 13. Master Style SheetLinks and ImagesLinks are easy to manage.Preferably, links are underlined, but if youprefer it a different way, you can set theseoptions separately.Do not include colours in the master stylesheet, because that depends upon thedesign.
  14. 14. Master Style SheetTables Weve already made sure that the default text size is the same for your table cells, but there are a few other styles you should set, so that your tables stay the same: table { margin: 0; padding: 0; border: none; }
  15. 15. Master Style SheetFormsLike with other elements, you should clearout the margins and paddings around yourforms. Define the font information forselect, textarea, and input up above, sothat its the same as the rest of the text. form { margin: 0; padding: 0; display: inline; }
  16. 16. Master Style SheetCommon Classes For this part of the master stylesheet, you should define classes that make sense to you. Note that they are not set to any particular element, so you can assign them to whatever you need: For example: .clear { clear: both; } .floatLeft { float: left; } .textLeft { text-align: left; }
  17. 17. SummaryStart at the Top and Work DownKeep Your CSS SimpleCreate a Library of Styles that You Always UseGlobal DefaultsHeadline FormattingPlain Text FormattingLinks and ImagesTablesFormsCommon Classes