Adding Style - three ways (h3)

Style can be added to a page in three different ways, from very specific (affecting one line) to a more general (for your whole site). These ways are:

  1. Inline Styles - adding style within the pages HTML tags themselves.
  2. Internal CSS - adding the style block within the header to specify the way an entire page is to be stylized.
  3. External CSS - linking to an external page of just CSS (ends with a .css) that has the style defined - this can then be added to many pages to make an entire webpage look the same. And a change to one file can then affect all the pages of the website.

This HTML page contains examples of all three of these, check them out.

My First h1 Heading (h1 tag)

This is a sample paragraph of text, with a dashed border in red and then an outer box using a div tag with a 10px border with 100px margin and 20px padding, with a yellow background. See The CSS Box Mode W3 page for more details.

My first paragraph of text. It does not care about spaces or new lines, all the text will flow as one paragraph within these "p" Tags.

My Second Heading (also an h1 tag)

Sub Heading (h2)

My Second paragraph. is here all one continuous line of text that can go on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on. You get the idea.

Groups of Words in a paragraph Can be Bolded with the strong Tag or Emphasized with the em tag. Oops did I forget the end paragraph tag, but it still works...

Another Paragraph can have things like links in contained in them: Like this Link to our Class website. The target="_blank" makes the link open in a new window. And then there is more text after that link.

Another Sub Heading (h2)

And we can insert an image here: from an online image (from the Garfield HS site) and resize it to fit better on our page with the width & height attributes

Or we can reference an image stored in our folder: Gar_Bulldog.jpg

This is alternative text to show in case the image can not be displayed.

Now lets try some lists (h2)

First an Un-Ordered List created with the ul tag:

Then an Ordered List created with the ol tag (notice they both use the li tag for list items):

  1. PreHeat oven to 350 degrees Fahrenheit.
  2. Mix ingredients in a bowl
  3. Pour mixture into a cake pan.
  4. Bake for 20 minutes.