CSS Borders

This Page's Contents

Set up

Start with a new page or a page you already have

Save your page with a suitable name for this exercise mine is called CSS-borders.htm

Set up a CSS Class called redborder

1. Click on the CSS button
2. The CSS Stylsheets window pops up
   1. On the right note the internal stylesheet
   2. On the left under New Style rule select style applied to all elements of class
   3. Enter in the box after the full stop. the name of the class .redborder
   4. Click on .redborder  & highlight it
   5. Click Create Style Rule
3. You are returned to The CSS Stylsheets window
   1. On the right note how under internal stylesheet you have .redborder
   2. On the left note the tabs, click Borders
   3. on the top line note the All four sides use same border style.
      Click and re click this line and note what happens to the four lines of boxes underneath. For this exercise we require all the borders to be the same, but if you prefer you can style each individual border. Ensure that there is a tick in the box and that only the top line below is available to alter
   4. Under Style select a style such as solid
   5. Under Widths select a line width or click the up arrow just to the right 4 times to achieve 4px in the window
   6. Under Colour: Click the large plain grey button. From the Text Colour window select your colour, such as red which has a hex number as #FF0000
   7. Click OK in the Text Colour window
   8. Click OK in the CSS Stylsheets window

Note this class only applies to this page

Apply the redborder Class to a Table

Either create a 4x4 table or click a table you already have created, the number of cell does not matter

• Select the table
• Click the Table Button
• In the Table Properties Window select the Table Tab.
  • Click the Advanced Edit Button.
    • In the Attribute: Box (Bottom left)
    • Select class
    • In the Value box Type in the name of the class which is:  redborder
    • Click OK
• In the Table Properties Window Click OK

Your Table should now have a red border around the table and no cell borders

Apply the redborder Class to a single cell

• Select the Cell in your table
• Click the Table Button
• In the Table Properties Window select the Cell Tab
  • Click the Advanced Edit Button
    • In the Attribute: Box (Bottom left)
    • Select class
    • In the Value box Type in the name of the class which is:  redborder
    • Click OK
• In the Table Properties Window Click OK

See Example page

The Next Step

Experiment

1. Click on the CSSCSS button
2. In the CSS Stylsheets
3. Click on .redborder  & highlight it
4. Under border you can remove the tick and change individual borders. One popular method is to have the top & one side in a lighter shade to the other 2 sides.
5. Under Text you can set the various fonts, size,alignment etc.
6. Under Background you can set the colour or have a background image.
7. Under Box you can set Margins, Paddings, Width & height. The other settings are more advanced.
8. Under Lists select the type of list
9. Select an image, similar to the arrow in this list.
10. Add this class to a Paragraph element