Jessett.com home  

css

getting started
css style properties
browser support
css classes
borders
link styles
images as bullet points
first letter/line pseudo element
custom scroll bars
css and dreamweaver

home > css > getting started with style sheets

getting started with style sheets

  • Copy the style sheet on the previous page (the text with a grey background only) into a text editor such as NotePad
  • Save as main.css in the /styles/ folder of your web site
  • In your html documents, add <link rel="stylesheet" href="/styles/main.css"> somewhere in between the <head> & </head>
  • Experiment with different stylesheet attributes and other html tags to get the effect you want

using style sheets in dreamweaver

  • Copy the style sheet on the previous page (the text with a grey background only) into a text editor such as NotePad
  • Save as main.css in the /styles/ folder of your web site
  • In Dreamweaver, open the page (or template) you wish to attach the style sheet to
  • Go to "Window > CSS Styles"
  • Click on the "Attach Style Sheet" icon, and browse to the /styles/main.css file to attach it
  • The style sheet is now applied to the page (or all pages from a template)
  • More information on style sheets and dreamweaver

classes

  • The .right element in the style sheet on the previous page is a class
  • This can be attached to any applicable html tag
  • e.g. <p class="right">Text here will be aligned to the right.</p>
  • You can also span classes in between html tags:
  • <p>Paragraph with a <span class="red">red</span> word</p>
    • n.b.: You would need to create the class "red"

classes in dreamweaver

an existing class

  • Select the text you would like to apply the class to
  • In the CSS Styles floating menu ("Window > CSS Styles"), click on the class to apply

to create a new class

  • Click on the "New Style" icon on the CSS Styles floating menu
  • Select "Make Custom Style" (Class)
  • Give the class a name
  • Use the interface to select attributes for the new class

further resources