Complete CSS Tutorial
| First Step - Beginner CSS | Second Step - Intermediate CSS | Third & Final Step - Advanced CSS |
|---|---|---|
| 1. Applying CSS | 1. Class and ID Selectors | 1. Display |
| 2. Selectors, Properties, and Values | 2. Grouping and Nesting | 2. Page Layout |
| 3. Colors | 3. Pseudo Classes | 3. At-Rules |
| 4. Text | 4. Shorthand Properties | 4. Pseudo Elements |
| 5. Margins and Padding | 5. Background-images | 5. Specificity |
| 6. Borders | ||
| 7. Putting It All Together |
Borders can be applied to most HTML elements within the body.
To make a border around an element, all you need is
Finally,
Add the following code to the CSS file:
This will make a red dashed border around all HTML secondary headers (the
border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.Finally,
border-color sets the colour. |
| CSS Tutorial by BH24 |
Add the following code to the CSS file:
h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }
This will make a red dashed border around all HTML secondary headers (the
h2
element) that is 3 pixels wide on the top and bottom and 10 pixels wide
on the left and right (these having over-ridden the 3 pixel wide width
of the entire border).