Tutorial: External style sheets

Contents

 

1. Introduction & Tools

2. How external style sheets and html work together and what each does

3. Linking the html and the external style sheet

4. A bit about writing css in an external style sheet

5. Putting the css into the html code

6. Page body & page backgrounds

7. Text

8. Text links

9. Image links

10. Borders

11. Containers (DIVs)

12. Simple Containers (DIVs)

13. A DIV inside a DIV

14. Container as rows or columns

15. Two columns

16. Three columns

17. More Tools for css

18. Validating and checking the code

19. Creating a site

20. Working with backgrounds: single DIV background page

21. Working with backgrounds:
multiple DIV backgrounds

Bookmark this page

Setting up css properties - borders

Another cool feature of css are different border styles: solid, double, groove, ridge, inset, outset, dotted, and dashed. Borders can be added to divs, text, and images.

 

#wrapper-b-double {
border: double;
border-width: 5px;
border-color: Orange;
}

 

#wrapper-b-dotted {
border: dotted;
border-width: 10px;
border-color: Orange;
}

 

#wrapper-b-groove {
border: groove;
border-width: 10px;
border-color: Orange;
}

 

Text borders - dashed

 

image with a border

.imageborder {
border: 25px;
border-style: dotted;
border-color: Lime;
}

 

What about adding a background color to the border?

image with a border

.imageborder3 {
border: 25px;
border-style: dotted;
border-color: Lime;
background-color: Black;
}

 

You can make the top, bottom, left and right border completely different. How about:

image with a border

.imageborder2 {
border: 25px;
border-style: dotted groove dotted double;
border-color: Lime #8B008B #006400 Fuchsia;
}

 

Pretty fun huh?

Go to next page

Tutorial: External Style Sheets

www.anniemation.com
ALL IMAGES AND CONTENT COPYRIGHT 2011, ANNIEMATION
ANNIEMATION IS A REGISTERED TRADEMARK