This document provides guidance on using a standardized workflow to create CSS web pages. It recommends starting with content and basic HTML before working on CSS styles from the top of the page down. The CSS should be kept simple with a master style sheet that resets defaults, formats text elements consistently, and defines common reusable classes. Following this workflow helps create CSS pages in half the time by establishing a clean base and reusable styles.

1. Web Authoring
Topic 16 –
CSS Workflow

2. Objectives
Students should able to:
1 Use a standardized workflow to
create a CSS web page.
2. Create a master style sheet.

3. 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.

4. 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.

5. 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

6. 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.

7. 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.

8. 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)

9. 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.

10. 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;
}

11. 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;
}

12. 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.

13. 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.

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
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;
}

16. 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; }

17. 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