Free technical help for digital creators - music, video, art, photography, graphic & web design

Basic steps for creating web pages and linking a CSS (style sheet)

The following is an overview of the basic steps you need to complete when creating the first pages/screens of a web site, including creating and linking a CSS (cascading style sheet) to them.

Steps

  1. Create a new folder (structure) for your site on the hard drive.
  2. Open your web design software (Dreamweaver?) and define a new site in it, choosing the folder structure you just created as the location to store your (local) site..
  3. Create a new (xhtml) file/page, this will be your homepage ("index.html").
  4. Type some text into it. Start with "Welcome to my website / homepage"(?).
  5. Format the text with Heading 1, Heading 2, paragraph etc
  6. Put some text into the title box.
  7. Save the page ("index.html").

  8. Create your first style (define in new style sheet file in Dreamweaver). Ensure that when you save it you use the .css extension (eg "styles.css"). This will create and save a new CSS, and attach it to the currently open and active page ("index.html").

  9. Create another file/page.
  10. Repeat steps 4-6 but with different text (eg "All about my friends").
  11. Save the new page, call it something different (eg "friends.html")

  12. Go back to the first page ("index.html"), and in code view, select and copy the line of code in the <head> tag that links (attaches) the CSS. The code will be something like ... <link rel="style sheet" href="styles.css" type="text/css">
  13. Switch back to design view.
  14. Go to the second page, switch to code view, and paste the link code into it's <head> tag.
  15. Switch back to design view.

  16. For subsequent pages repeat steps from 9 onwards, not forgetting to copy the CSS link into the <head> tag of each newly created page.
  17. You can add and edit styles in the CSS ("styles.css") at any time.