Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to define and apply a global border width and colour

Status
Not open for further replies.

ugly

Programmer
Jul 5, 2002
70
GB
Various elements within my page have borders applied to them. This varies according to the div and could be top or bottom or right or left. So the position of the border element can vary. What is constant is the colour and width of the border element. I have tried to define these within the body tag but they don't seem to get inherited. Is there some way of globally defining the colour and width of all elements that are on my page that might have a border applied to them.
Thanks for any advice
 
You can have a class with the color and style defined there. then just apply that class to all your elements that need a border.

And apply a second class to define the position of the border or whatever else needs to be specific depending on element.

For example:

Code:
.myborder{
border-color:red;
border-style:solid;
border-width:0px;
}

.someinternaldiv{
border-left-width:2px;
}

.someotherinternalelement{
background-color:#FFFFFF;
border-bottom-width:2px;
}

Then in your html you can have it:

Code:
<div class="someinternaldiv myborder">
...
</div>

<div class="someotherinternalelement myborder">
...
</div>

So the myborder class applies the color and style, and then each specific class defines the position.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
This has been really helpful thankyou. Can I just reiterate(for others who might have a similiar problem) to combine two or more classes within a div you include the classes within the same speech marks with a space inbetween them-
to combine two seperate classes called .bigtext and .textcolour you would write

<div id="somediv" class="bigtext textcolour " >
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top