Web Authoring Topic 16 – CSS Workflow
Objectives Students should able to: 1 Use a standardized workflow to create a CSS web page. 2. Create a master style sheet.
CSS Web Page Designers who are just starting out with CSS often find that it can be difficult to think out how to use CSS for layout and design. With a standardized workflow, you can create a new CSS Web page in half the time it would otherwise take.
DO NOT START WITH CSS It can be very tempting to start out designing a 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 it can be difficult if not impossible to create anything more than a basic layout.
DO NOT START WITH CSS Start with your content. Put in your navigation in a list, your headlines with H1, H2, and H3 tags, and your content inside paragraphs. If you have sub-sections on the page, you can separate them with div tags
Master Style Sheet CSS Workflow - How to Start Work on a CSS Web Page Start off with a new Master style sheet Master style sheet should remove default styling from browsers and provide a clean slate for your entire page.
Master Style Sheet Start at the Top and Work Down Once you have your content and basic HTML in the page, start at the top of the page and work on CSS styles as you move down the page. When you work down the HTML document, you are following the direction of the cascade, and so will end up with less complicated CSS.
Master Style Sheet Keep Your CSS Simple Use simpler CSS: Avoid complex selectors - use simple tag, class, and ID selectors where ever possible. Avoid changing your HTML unless it’s absolutely essential - adding extra div tags is almost always a mistake (except for your "container" element for columnal layouts)
Master Style Sheet Create a Library of Styles that You Always Use These include elements like "center", "float left", "underline", and "no underline". You can even create a standard style sheet that you load first on all your pages. Then, for example, when you use the class "floatLeft" you know that that element will have the float: left; style applied to it.
Master Style Sheet Global 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; }
Master Style Sheet Headline/Header Formatting Header tags (H1, H2, H3, etc.) typically default to bold text with large margins or padding around them. Clearing the weight, margins, and padding, you ensure that these 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; }
Master Style Sheet Plain Text Formatting Beyond headers, there are other text tags that you should be sure to clear out. Such as table cell tags (TH and TD) and form tags (SELECT, TEXTAREA, and INPUT). If you do not set those to the same size as your body and paragraph text, you may be surprised at how the browsers render them.
Master Style Sheet Links and Images Links are easy to manage. Preferably, links are underlined, but if you prefer it a different way, you can set these options separately. Do not include colours in the master style sheet, because that depends upon the design.
Master Style Sheet Tables We've 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; }
Master Style Sheet Forms Like with other elements, you should clear out the margins and paddings around your forms. Define the font information for select, textarea, and input up above, so that it's the same as the rest of the text. form { margin: 0; padding: 0; display: inline; }
Master Style Sheet Common 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; }
Summary Start at the Top and Work Down Keep Your CSS Simple Create a Library of Styles that You Always Use Global Defaults Headline Formatting Plain Text Formatting Links and Images Tables Forms Common Classes

Web topic 16 css workflow

  • 1.
    Web Authoring Topic 16 – CSS Workflow
  • 2.
    Objectives Students should ableto: 1 Use a standardized workflow to create a CSS web page. 2. Create a master style sheet.
  • 3.
    CSS Web Page Designerswho are just starting out with CSS often find that it can be difficult to think out how to use CSS for layout and design. With a standardized workflow, you can create a new CSS Web page in half the time it would otherwise take.
  • 4.
    DO NOT STARTWITH CSS It can be very tempting to start out designing a 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 it can be difficult if not impossible to create anything more than a basic layout.
  • 5.
    DO NOT STARTWITH CSS Start with your content. Put in your navigation in a list, your headlines with H1, H2, and H3 tags, and your content inside paragraphs. If you have sub-sections on the page, you can separate them with div tags
  • 6.
    Master Style Sheet CSSWorkflow - How to Start Work on a CSS Web Page Start off with a new Master style sheet Master style sheet should remove default styling from browsers and provide a clean slate for your entire page.
  • 7.
    Master Style Sheet Startat the Top and Work Down Once you have your content and basic HTML in the page, start at the top of the page and work on CSS styles as you move down the page. When you work down the HTML document, you are following the direction of the cascade, and so will end up with less complicated CSS.
  • 8.
    Master Style Sheet KeepYour CSS Simple Use simpler CSS: Avoid complex selectors - use simple tag, class, and ID selectors where ever possible. Avoid changing your HTML unless it’s absolutely essential - adding extra div tags is almost always a mistake (except for your "container" element for columnal layouts)
  • 9.
    Master Style Sheet Createa Library of Styles that You Always Use These include elements like "center", "float left", "underline", and "no underline". You can even create a standard style sheet that you load first on all your pages. Then, for example, when you use the class "floatLeft" you know that that element will have the float: left; style applied to it.
  • 10.
    Master Style Sheet GlobalDefaults 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.
    Master Style Sheet Headline/HeaderFormatting Header tags (H1, H2, H3, etc.) typically default to bold text with large margins or padding around them. Clearing the weight, margins, and padding, you ensure that these 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.
    Master Style Sheet PlainText Formatting Beyond headers, there are other text tags that you should be sure to clear out. Such as table cell tags (TH and TD) and form tags (SELECT, TEXTAREA, and INPUT). If you do not set those to the same size as your body and paragraph text, you may be surprised at how the browsers render them.
  • 13.
    Master Style Sheet Linksand Images Links are easy to manage. Preferably, links are underlined, but if you prefer it a different way, you can set these options separately. Do not include colours in the master style sheet, because that depends upon the design.
  • 14.
    Master Style Sheet Tables We've 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.
    Master Style Sheet Forms Likewith other elements, you should clear out the margins and paddings around your forms. Define the font information for select, textarea, and input up above, so that it's the same as the rest of the text. form { margin: 0; padding: 0; display: inline; }
  • 16.
    Master Style Sheet CommonClasses 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.
    Summary Start at theTop and Work Down Keep Your CSS Simple Create a Library of Styles that You Always Use Global Defaults Headline Formatting Plain Text Formatting Links and Images Tables Forms Common Classes