Borders

Submitted by Yorkiebar on Saturday, January 18, 2014 - 21:03.
Introduction: This is the fourth part in my CSS Styling tutorials, in which I will be covering Borders. Order: Borders around elements come between the elements margin and padding. So, if the element has padding, the border will be away from the element whereas if the element only has margin, the border will be next the element but away from other elements. Basic Structure: The basic border attribute takes three arguments; Width, Type, Colour. The below code would give a solid white border that is 5 pixels width... 
  1. border: 5px solid #ffffff;
Or this code would give a dashed black border of 3 pixels width... 
  1. border: 3px dashed #000000;
There is also; dotted double groove ridge inset outset Setting Sides: Just like margin and padding, you can set individual sides of borders... 
  1. border-right: 3px dashed #000000;
  2. border-left: 1px dotted #ffffff;
  3. border-top: 3px solid #000000;
  4. border-bottom: 13px inset #ffffff;
  5. </cs>
  6.  
  7. <strong>Individual Settings:</strong>
  8. You can also set the properties individually...
  9.  
  10. <css>
  11. border-style: solid;
  12. border-width: 5px; //or medium etc.
  13. border-color: #000000;
Linking CSS To a HTML Element: To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add... 
  1. class='myClass'
... to the attributes of that element if you chose a class, or... 
  1. id='myID'
if you chose an id. Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with... 
  1. .myClass {
  2. 	//Properties go here
  3. }
if you chose a class, or... 
  1. #myID {
  2. 	//Properties go here
  3. }
(You can remove the line beginning with // if you wish). Here's an example... 
  1. <html>
  2. 	<head>
  3. 		<style>
  4. 			.strong {
  5. 				background-color: #000;
  6. 				color: #fff;
  7. 				width: 300px;
  8. 				height: 100px;
  9. 				border: 10px solid #000;
  10. 				// Thick black border of 10 pixels
  11. 			}
  12.  
  13. 			.thin {
  14. 				background-color: #000;
  15. 				color: #fff;
  16. 				width: 300px;
  17. 				height: 100px;
  18. 				border: 2px solid green;
  19. 				// Thin green border of 2 pixels
  20. 			}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<div class='strong'>Strong/Thick Border</div>
  25. 		<div class='thin'>Weak/Thin Border</div>
  26. 	</body>
  27. </html>

Add new comment

About text formats
  • 137 views