What to Expect in Raspberry Pi For Dummies
How to Install Games and Other Software on the Raspberry Pi
How to Structure an HTML Document to Make a Web Page on Your Raspberry Pi

How to Add Borders to Your Website on the Raspberry Pi

You can use the Raspberry Pi to put a border around different parts of your web page, which is a good way to mark out where the parts begin and end, and to draw attention to the most important elements. You can use eight different styles of border.

[Credit: The Midori browser is written by Christian Dywan with artwork by Nancy Runge]
Credit: The Midori browser is written by Christian Dywan with artwork by Nancy Runge

Here are the three properties of the border that you can control:

  • border-width: This specifies the size of the border in pixels. For a thin line, use 1px. For something chunkier, use 4px. Higher values are possible, but rarely look good.

  • border-style: This defines what the border will look like. Most of the time, you will want to use solid, and that’s assumed by default. The other options are dotted, dashed, double, groove, ridge, inset, and outset.

  • border-color: You can specify a color name or color number for border.

Try adding a thin black border around the h1 and h2 headings. You can style them both at the same time by listing them together, separated by a comma, before the curly brackets, like this:

h1, h2 { border-width: 1px;
   border-style: solid;
   border-color: black; }

You can use a shorthand form for styling the border, too, which replaces those three instructions with a single one like this:

h1, h2 { border: 1px black solid; }

If you don’t want a border on all sides, you can specify which side you want it (top, bottom, left, or right), like this, which creates a nice horizontal line under your heading:

h1, h2 { border-bottom: 1px black solid; }
blog comments powered by Disqus
Programming in Scratch
How to Format Lists for Your Web Page on the Raspberry Pi
How to Create Presentations on the Raspberry Pi with LibreOffice Impress
How to Use the Leafpad Text Editor on Your Raspberry Pi
How to Make Your Sprite Move with Scratch on the Raspberry Pi

Inside Dummies.com