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!

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

external style sheet

Status
Not open for further replies.
rrmcguire

rrmcguire

Programmer
Oct 13, 2010
304
0
0
US
Have a quick question with my current code below I plan on using the CSS styles wrapper, menu, spry, about, news and content with all of my pages, probably 10 additional pages. All of the others are more so specific to this page, so can I link an external style sheet for these styles I'll use throughout then add the specific ones per page as the pages are created. Also where does the external style sheet need to be located...thanks for any help provided

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meadow Lark Companies Transportation Brokerage</title>
<style type="text/css">
<!--

ul.MenuBarHorizontal li ul li {
clear:left;
}


.wrapper {
width: 900px;
margin-right: auto;
margin-left: auto;
background-image: url(images/testbanner6.png);
background-repeat: no-repeat;
}
.menu {
background-repeat: no-repeat;
height: 35px;
padding-top: 10px;
}

.top a {
color: #060;
font-size: 14px;

}

.top a:hover {
color: #060;
}

.menu .top {
height: 40px;
width: 700px;
float: right;
}
.about .mission {
color: #FFF;
text-align: left;
padding-left: 25px;
font-size: 15px;
}
.about ul {
color: #FFF;
text-align: left;
padding-right: 200px;
font-size: 14px;
}


.menu .Spry {
float: right;
width: 655px;
clear: both;
}
.top {
text-align: right;
padding-right: 10px;
}

.splash {
height: 400px;
background-image: url(images/gettycropped2.jpg);
overflow:hidden;
}

.splash h1 {
color: #FFF;
font-size: 18px;
text-align: right;
padding-top: 75px;
padding-right: 40px;
}
.splash .welcome {
font-size: 20px;
color: white;
text-align: right;
padding-right:25px;
}
.splash .main {
text-align: right;
color: white;
padding-right: 25px;
padding-left: 350px;
}
.about .About.Us {
font-size: 20px;
color: white;
padding-left: 10px;
}
.news .News.and.Events {
font-size: 20px;
color: #000;
padding-left: 35px;
}

.splash .deals {
color: #FFF;
font-size: 16px;
text-align: right;
padding-right: 175px;
}

.content {
height: 400px;
overflow: hidden;
}

.about {
float: left;
height: 100%
width: 400px;
background-image: url(images/leftcolumn_background2_new.png);
height: 485px;
width: 488px;
}

.news {
border: 2px solid gray;
float:right;
width:408px;
height:100%;
background-image: url(images/rightcolumn_background3.png);
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-image: url(images/test%20background.png);
}
-->
</style></head>

<body>
<div class="wrapper">
<div class="top"><p><a href=" Your Equipment</a> <a href=" Quote Request</a> <a href=" Booking</a> <a href=" Loads</a> <a href=" Services</a> <a href=" top>
<div class="menu">
<div class="Spry">
<ul id="MenuBar" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Flatbed</a>
<li><a href="#">Van</a>
<li><a href="#">Heavy Haul</a>
<li><a href="#">Global</a>
<li><a href="#">LTL</a>
<li><a href="#">Cross Border</a>
</ul>
</li>
<li><a href="#">Customers</a></li>
<li><a href="#">Logistics</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Contractors</a></li>
<li><a href="#">Logistics</a></li>
</ul>
</div spry>
</div menu>
<div class="splash"><h1>A FRESH NEW LOOK AT TRANSPORTATION</h1><p class="deals">"No Bad Deals"</p><p class="welcome">Welcome to Our Website</p><p class="main">With over two decades of service, Meadow Lark has offered innovative solutions to any transportation needs with on-demand operational services and advanced technology. Customers, contractors, and agents alike benfit from association with our company. Family owned and operated, Meadow Lark is the permier choice for your shipping requirements</p></div>
<div class="content">
<div class="about">
<h1 class="About Us">About Our Company</h1>
<p class="mission">Mission Statement</p>
<ul>
<li>No Bad deals. All players benefit from association with our company.</li>
<li>We are constantly in pursuit of excellence in our image and operations</li>
<li>We do not compare our selves to any other cusiness, only to how WE were yesterday</li>
<li>Our word is our bond</li>
</ul>
</div about>
<div class="news"><h1 class="News and Events">News and Events</h1></div>
</div content>
</div><! wrapper ->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
 
Sort by date Sort by votes
Hi,
see to see how to add an external style sheet to a page. Simply write your stylesheet in notepad ( omitting the <style ...</style> tags and save with a .css extension. The css file should then be placed in the same folder as all of the pages you want to include it in.

Just copy and paste your CSS styles wrapper, menu, spry, about, news and content into notepad and maybe save as allpages.css.

The css file should then be placed in the same folder on your server as all of the pages you want to include it in.

Please note any duplicate styles in styles sheets embedded on your pages will take precedence over any in your external style sheet

Hope this helps.

Steve
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

peterd51
  • Locked
  • Question
HTML External Links Fail
Replies
15
Views
122
peterd51
peterd51
notsoevilgenius
  • Locked
  • Question
CSS Precedence - Can I override the CSS Style Sheet
Replies
6
Views
76
notsoevilgenius
notsoevilgenius
c0deM0nK424
  • Locked
  • Question
Mozilla Firefox Style - New Tab Controls - Thumbnail Images for 'recent websites' viewed ?
Replies
3
Views
56
ChrisHirst
ChrisHirst
PCHomepage
  • Locked
  • Question
Applying Tag Style Only Within DIV 1
Replies
2
Views
41
PCHomepage
PCHomepage
tshad
  • Locked
  • Question
Class Style order
Replies
3
Views
37
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top