|
CSS - Inline Styles Vs. Linked Style Sheet
Can you have both inline styles AND a linked style sheet? would this cause confusion?
Similar TutorialsI've been involved in building an intranet site with about 1200 pages. Now that it's been launched we've found problems in printing many of the pages - there are blank pages printing before the content, probably because of floated divs being pushed down when the width is restricted to A4. (That's a guess). Now I know that what we should have done was create a print style sheet which would have solved this problem easily, but if we do that we'll have to place the link to it in every page, which involves quite a lot of signing-out of 1200 pages etc. I'm prepared to do that if there isn't another way but I wondered if there's any way the existing external style sheet can be amended so it loads (imports) the print styles dependent on some statement or other. I'm doubtful, but if anyone knows of a method that involves editing the one stylesheet rather than the 1200 pages I'd love to hear it! First off, I'll preface that I'm not a CSS expert by any means. I've done web development for many years, but have slowed down a great deal over the last few, so never got heavily into the aspects of CSS that completely replace HTML (tables, etc.). At my current place of employment (where my primary duty is not that of a web developer, thank god), I'm being asked to develop a set of 'templates' using primarily CSS. I've been using the CSS Sculpter plug in for Dreamweaver, and have had decent results from it, but my main issue at this point is this: When I take the CSS code from the header of the page and put it into a separate stylesheet and then link to that stylesheet, it jacks up the content portion of the site. It seems to be completely disregarding the right margin of the content div and allowing text to simply run off. When the code (without changes) is pasted back into the header of the page rather than linked to it, the issue is resolved. Here's the CSS: Code:
<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
background-color: #666;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
/* Commonly used to style section titles. */
h2 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #000;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #000;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
background-color: #fff;
border-left: solid 1 px #666;
border-right: solid 1 px #666;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 650px;
overflow: hidden;
}
#outerWrapper #header {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #topNavigation {
background-color: #ebebeb;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
height: 10px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn1 {
background-color: #ebebeb;
border-left: solid 1px #666; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #ebebeb;
border-right: solid 1px #666; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}
#footer {
background-color: #ddd;
width: 650px;
border-top: solid 1px #666; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 0px 10px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin: 0 auto 0 auto;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
width: 16em;
}
#outerWrapper #contentWrapper #rightColumn1 {
width: 16em;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
-------------- And then the page code: Code: <body> <div id="outerWrapper"> <div id="header"><img src="hockley_header.jpg" alt="" width="650" height="150" /></div> <div id="topNavigation"> <div align="center">Nav </div> </div> <div id="contentWrapper"> <div id="rightColumn1"><h2>H2 rightColumn1 Title </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p> <hr /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div> <div id="leftColumn1"><h2>H2 leftColumn1 Title </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p> <hr /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p> </div> <div id="content"><h1>H1 Main Content</h1> <hr /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <a href="#">More...</a></p> <h2>H2 level heading</h2> <hr /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p> <p> </p> </div> <br class="clearFloat" /> </div> </div> <div id="footer">Footer</div> </div> </body> -------- Like I said, I'm completely out of my element here - learning bit by bit. CSS isn't difficult coming from a programming background, but my troubleshooting abilities are definitely not up to par. Any help on this issue is greatly appreciated. I am trying to use the following in my external style sheet for my links: Code: a:link, a:visited{
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.big {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.big:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.bigger {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
a.bigger:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
My problem is that I can't get big & bigger to work properly in Internet explorer. When I hover over the link it goes to its proper size but when not hovering it stays at 11px. OK, I have a table I'd like to format with CSS. No problem. I have an external stylesheet that I link to for the rest of my site. I figured I'd add the CSS there and be good to go. Nope. When I link to the external stylesheet, everything else on my page is formatted correctly, except the table. It's like the table isn't grabbing the CSS information. (Example 1) When I take the CSS and put it in the header of the page, it works fine (same exact CSS, the only difference is where it's referenced). (Example 2) What is the difference between inline styles and id's? Are there places where you should use one and not the other? Sorry if this has already been answered but I couldn't find anything in a search. I need to create signature files for (Outlook) for my group. Until 2 days ago I knew nothing about css but I am learning. Coz Outlook only picks up the body from an html file I cannot use external css sheets, so all coding must be done inline. Only thing I can't figure out is the style for a weblink. Here's s snip of the relevant line: <a href="http://www.blabla.com.au" style="font: bold 8pt arial,sans-serif"> <span style="color:#ef812a; font-decoration: underline">www.blabla.com.au</span></a> The code (probably shabby) renders fine in Dreamweaver, but the sig in Outlook the underline shows blue - I want the underline for any link (visited, not visited) to show as #ef812a which is sort of orange. I can't figure out how to insert the a:link etc stuff. Thanks James I have some CSS for forms as seen below. (depreciated version) Code:
<div class="item">
<div class="text">Your Name:</div>
<div class="field"><input type="text" /></div>
</div>
...
form .text {
float: left;
width: 75px;
}
form .field {
float: left;
}
Some forms I'd like to be wider than others, though. Is it possible to define the width of .text using inline styles (eg: <form style="*">) rather than create a new class for each width I want to use? Hi, I have a style sheet which works fine on my mac, but not on my PC in IE7. I know how to substitute stle sheets based on browsers, but here's the issue at hand. I have 2 styles for the <ul> which follow: ul.nav{ clear:both; width:192px; padding: 0px; display: block; background-color:#000000; margin-top:-11px; margin-left:0px; float:left; } and ul.bodyText{ font-color:#000000 font-size:12px; font-family:helvetica, arial, sans-serif; } it appears that "ul.bodyText is taking on the characteristics of "ul.nav" Or, for some reason, the <ul><li>'s in my Mac look fine, but on my PC, they do not have the indent preceeded by the dot. Here's the site http://www.caillouette.com/NewestSelvan/English/aboutUs.php can anyone tell me why? thanks -Sean Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks. P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-) Hi all! Hope you are well! Anyway, I have the following in my style sheet.... should this work? PHP Code: td { text-align: centre; } or not? A bit of background. I've just started an IT degree and the first assignment is to create a web page about myself. (I'll post it here once it's up and running). We've got to use a separate as opposed to inline style sheet, and our pages must be validated as part of the assessment. I don't have any trouble validating my XHTML (strict) code but even the simplest style sheet (only a single command) get's rejected. I'm also following the rules set out in the text I've got (The Web Wizards guide to XHTML by Cheryl. M. Hughes). Question. Do I need a DOCTYPE statement in a style sheet? Hi guys, done a few other pages (such as reports and things e.t.c which are basically white pages with text and i get the rightfloat that is on my normal pages appearing all the time!?!? Anyone give me an idea why? tried it on a blank page and still nothing... black page here >>> http://www.generating-sets.com/showissue.php CSS below! Charlie PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div.displaybox { color: #000000; padding: 2%; margin: 1%; border: #000044 solid 1px; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; font-size: 1.1em; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#topleveladminbar { padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px } #header { background-color: #000044; background-image:url(images/wel.jpg); width: 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:150px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: left; height:150px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; } a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #ffffff; background-color: #0000FF; text-decoration: underline;} .displaybox a:link {color: #0000FF; text-decoration: underline;} .displaybox a:visited { color: #0000FF; text-decoration: underline;} .displaybox a:hover {color: #000044; background-color: #EEEEEE; text-decoration: underline;} .redtext { color: #ff0000; font-weight: bold; } .greentext { color: #00ff00; font-weight: bold; } I have a tables layout and for some reason everytime I go to add something to the layout (eg. cutenews) the background disappears. By that I also mean it disappears completely from the html coding in index. This is the style for my layout: body, table, td{ font-size: 9px; font-family: sans-serif; color: #66CCCC; letter-spacing: 1px; margin: 0; } .navi{ font-size: 9px; font-family: sans-serif; margin-top: 5px; text-align: left; } .navhead{ width: 100px; height: 38px; padding-top: 21px; padding-right: 0px; font-size: 10px; text-align: right; color: #CCCCCC; margin-bottom:10px; font-family: monospace; text-transform: lowercase; letter-spacing: 5px; background: black url(Bilder/navheader.jpg); } .head{ width: 310px; height: 38px; padding-top: 10px; padding-left: 25px; font-size: 10px; text-align: left; color: #CCCCCC; margin-bottom: 20px; margin-top: 20px; font-family: monospace; text-transform: lowercase; letter-spacing: 5px; background: black url(Bilder/header.jpg); } .content{ width: 310; padding-left: 10px; padding-right: 10px; color: #66CCCC; text-align: justify; } a:link, a:visited, a:active { text-decoration: none; color: #009999; } a:hover { text-decoration: none; color: #00CC33; } Where and what code can I use for a fixed background? Hello.... As I'm sure many that post to this board are, I'm pretty new to CSS. I've been reading about it for years, studying it for several months, dabbling with it for a few weeks, and writing my first useful, semi-complex CSS page for about 2 days.... My page looks exactly like i want it to (at least with my half dozen little tests so far) in Firefox. i started with no CSS, then added more and more, trial and error, until I got it just how I like it. Then I opened it in IE! OH BOY! It doesn't even look close to what it is in FF!!!!! I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them. Here's the page: http://www.triptrop.com/main.html My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column. Don't pick on my about the colors, I'm just messin around right now Any help would be helpful (by definition) Hi there. I have a print style that won't display images when printing.. img {display: none;} I have a certain page where I need the print style sheet but will like the images to print. How can I override the print style for the images? Hello I'm having trouble with displaying a background image in a div. It worked fine with embedded CSS but when I changed the CSS to external, the text loads but the bg image doesnt. I'll post some code to explain it... This is in the external style sheet: #navbgtop { position:absolute; left:38px; top:185px; width:194px; height:18px; z-index:2; background-image: url(images/navbartop.jpg); } and yes of course I have made the proper link to it in the <head> tag: <link rel="stylesheet" type="text/css" href="css/nav.css" media="all" /> For some reason the background image wont display. Any ideas? One more question also, does it matter if I use media="all" for the whole website? Or do I even need to bother using media=xyz ? I heard most browsers don't even read that as of yet. Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ? Ok, I just started a new website. I have been putting all of the html on every page. So, when I change one small thing on my Nav Bar, I have to go to every single page and change it! There has to be an easier way, right? Isn't it by using external sytle sheets? I tried this code in my homepage, but it isn't working: Code: <head> <STYLE TYPE="text/css" MEDIA="screen, projection"> <!-- @import url(http://www.freewebs.com/ohhdanggggraphics/BASIC.css); --> </STYLE> </head> Basically on my site the only thing I want to change from page to page is the information in the center table. How would I do this? Thanks for your help My Website This is the style sheet, how can i had a background image... the page can be viewed at inkheaddesigns.com/main Code: <?php
header('Content-type: text/css');
header("Cache-Control: must-revalidate");
$pattern = '/^[^a-z0-9]{6}$/';
if (preg_replace('/[^a-z0-9]/i', '', $_GET['style']) && isset($_GET['style'])) {
$color = $_GET["style"];
} else {
$color = "9d60c1";
}
?>
/*
Theme Name: WP-Creativix
Theme URI: http://www.wp-themix.org/themes/wp-creativix-free-premium-portfolio-wordpress-theme/
Description: WP-Creativix is a beautifull business & portfolio Wordpress Theme. It has unlimited variations due to the possibility to define a custom color code as highlight color.
It comes with a Portfolio Template already included which may display your latest work with nice Lightbox support. On the Frontpage it has a nice working Javascript Slideshow.
This Theme comes with a Javascript 3-Level Dropdown Menu. Of course there are many more features such as Custom Logo Uploader and a Big Options set! Have fun while discovering. (Please use my theme DEMO to see how the Theme looks).
Version: 1.5.2
Author: Dennis Nissle
Author URI: http://www.wp-themix.org/
Tags: white, silver, purple, light, three-columns, two-columns, fixed-width, right-sidebar, left-sidebar, theme-options, purple, front-page-post-form, photoblogging, custom-colors, custom-header, sticky-post, microformats
*/
/* General Styles */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: #<?php echo $color;?>;
text-decoration: none;
}
a:hover {
color: #<?php echo $color;?>;
text-decoration: underline;
}
a:visited {
color: #<?php echo $color;?>;
text-decoration: none;
}
body {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
line-height:18px;
}
blockquote {
color: #CCC;
font-size: 11px;
font-style: italic;
}
h1, h2, h3 {
color: 9d60c1;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
caption, th {
text-align: left;
}
q:before, q:after {
content: '';
}
abbr {
border:0;
}
#wrapper {
width:925px;
margin:0 auto;
}
#topmenu {
margin-top: 5px;
float: right;
clear: both;
}
#header {
float: left;
width: 925px;
height: 180px;
}
#logo {
float: left;
width: 230px;
}
#logo a {
font-family: Helvetica;
font-size: 24px;
text-transform: lowercase;
padding-bottom: 18px;
}
#logo a, img {
border: none;
}
#logoname {
float: left;
width: 250px;
margin-top: 145px;
}
#logoname a {
font-family: Helvetica;
font-size: 24px;
text-transform: lowercase;
padding-bottom: 18px;
}
#logoname a, img {
border: none;
}
/* Navigation Styles */
.navigation {
background: url(images/navbar.jpg) no-repeat;
padding-right:18px;
font-size:12px;
position: relative;
z-index: 6;
width: 689px;
height: 48px;
margin-left: 245px;
margin-top: 130px;
}
#search {
width: 200px;
float: right;
height: 28px;
}
#search form {
width: 200px;
height: 28px;
}
#searchbox {
background: url(images/search.gif) no-repeat top;
width: 144px;
height: 28px;
border: none;
margin-top: 10px;
padding: 5px 3px 0px 15px;
color: #6e6e6e;
}
#searchbutton {
background: url(images/search_btn.gif) no-repeat;
width: 27px;
height: 28px;
border: none;
position: relative;
top: -4px;
left: -12px;
cursor: pointer;
}
#header #navbar {
float:left;
height:50px;
line-height:50px;
padding-left:13px;
}
#navbar, #navbar ul {
margin:0;
padding:0;
list-style-type:none;
position:relative;
line-height:50px;
z-index:5;
}
#header #navbar a {
height:48px;
display:block;
padding:0 21px;
text-decoration:none;
text-align:center;
line-height:28px;
outline:none;
float: left;
z-index:35;
position:relative;
color: #6e6e6e;
}
#header #navbar a:hover {
color: #<?php echo $color;?>;
}
#header #navbar ul a {
line-height: 35px;
}
#header #navbar li {
float:left;
position:relative;
z-index:20;
margin-top:10px;
}
#header #navbar li li {
border-left:none;
margin-top:0;
}
#header #navbar ul {
position:absolute;
display:none;
width:172px;
top:36px;
left:-1px;
background: #f5f5f5;
}
#header #navbar li ul a {
width:130px;
height:auto;
float:left;
text-align:left;
padding:0 21px;
}
#header #navbar ul ul {
top:auto;
}
#header #navbar li ul ul {
left:172px;
top: 0px;
}
#header #navbar li ul ul a {
border-left:none;
}
#header #navbar a{
color:#888;
}
#header #navbar ul {
border:1px solid #c0c0c0;
border-top:none;
}
#header #navbar li ul a {
border-bottom:1px solid #fff;
border-top:1px solid #c0c0c0;
}
#header #navbar ul a, #header #navbar ul li {
background-color:#f5f5f5;
}
#header #navbar ul a:hover, #header #navbar ul a:focus {
color: #<?php echo $color;?>;
}
#header #navbar .current_page_item a {
}
#header #navbar li:hover ul ul, #header #navbar li:hover ul ul ul,#header #navbar li:hover ul ul ul ul {
display:none;
}
#header #navbar li:hover ul, #header #navbar li li:hover ul, #header #navbar li li li:hover ul, #header #navbar li li li li:hover ul {
display:block;
}
/* Slideshow Styles */
#slide-wrapper {
background: url(images/slider-bg.gif) no-repeat;
width: 921px;
height: 365px;
margin-top: 10px;
padding-top:5px;
z-index:1;
margin-left: 10px;
clear: both;
float: left;
}
.featurebox {
width: 921px;
height: 365px;
clear:both;
margin:auto;
}
#image-wrapper {
margin:0 auto;
display:none;
padding:0;
width: 921px;
}
#image-wrapper * {
margin:0;
padding:0;
}
#full-image {
position:relative;
padding:0;
width: 860px;
}
.frontslide {
display: none;
}
#text {
float:right;
position:absolute;
top:10px;
width:400px;
height:0;
color:#6e6e6e;
overflow:hidden;
z-index:4;
padding:0px;
left: 490px;
}
#text h3 a {
padding:3px 0 10px 3px;
color: #<?php echo $color;?>;
font-size: 18px;
font-weight:bold;
letter-spacing:-1px;
text-decoration: none;
}
#text h3 a:hover {
text-decoration: underline;
}
#text p {
padding:0 0 5px 3px;
color:#6e6e6e;
float:right;
font-size:12px;
text-align: justify;
margin: 0px;
}
#text p a {
color:#993399;
}
.date {
color:#9d9c9c;
font-size: 10px;
font-style: italic;
}
#image {
width:440px;
height:250px;
}
#image img {
position:absolute;
z-index:2;
width:440px;
height:200px;
left:20px;
top:10px;
border:2px solid #bfbfbf;
}
.imgnav {
position:absolute;
width:25%;
height:180px;
cursor:pointer;
z-index:3;
}
#imgprev {left:0;background:none;}
#imgnext {right:0;background:none;}
#imglink {
position:absolute;
height:150px;
width:100%;
z-index:5;
opacity:.4;
filter:alpha(opacity=40);
}
.linkhover { }
#thumbnails {margin-top:20px;height:38px;}
#arrowleft {
float:left;
width:26px;
height:49px;
background:url(images/left.gif) top center no-repeat;
padding-left:40px;
margin-top: 30px;
z-index:6;
}
#slideleft:hover {}
#arrowright {
float:right;
width:26px;
height:49px;
background:url(images/right.gif) top center no-repeat;
padding-right:40px;
margin-top: 30px;
z-index:7;
}
#slideright:hover { }
#frontarea {
float:left;
position:relative;
width:785px;
margin-left:3px;
height:100px;
overflow:hidden;
}
html* #frontarea {margin-left:0;}
#fronter {
position:absolute;
left:0;
height:100px;
top: 10px;
}
#fronter img {
cursor:pointer;
border:2px solid #<?php echo $color;?>;
}
/* Frontpage Column Styles */
#big-column {
width: 925px;
margin: 0px auto;
}
#column-top {
background: url(images/top-column.gif) no-repeat;
width: 925px;
height: 9px;
float: left;
margin-left: 7px;
}
#column-content {
background: url(images/center-column.gif) repeat-y;
width: 925px;
float: left;
padding-bottom: 20px;
margin-left: 7px;
}
/* Featured Posts & Articles on Frontpage */
.feat-post {
width: 300px;
padding: 10px 10px 10px 20px;
float: left;
}
.feat-post h2 {
font-size: 18px;
text-decoration: none;
color: #6e6e6e;
}
.feat-post h2 a {
text-decoration: none;
color: #6e6e6e;
}
.feat-post h2 a:hover {
text-decoration: none;
color: #<?php echo $color;?>;
}
.desc h3 {
font-size: 10px;
font-style: italic;
color: #<?php echo $color;?>;
font-weight: normal;
clear:both;
border-bottom: 1px solid #b1b1b1;
}
.feat-post p {
text-align: justify;
color: #6e6e6e;
margin-top: 15px;
}
.feat-post img {
margin-top: 20px;
border: 1px solid #<?php echo $color;?>;
}
.latest-posts {
width: 220px;
padding: 10px 10px 10px 20px;
float: left;
}
.latest-posts h2 {
font-size: 18px;
text-decoration: none;
color: #6e6e6e;
}
.latest-posts h2 a {
text-decoration: none;
color: #6e6e6e;
}
.latest-posts ul {
color: #<?php echo $color;?>;
margin-top: 10px;
list-style-type: disc;
}
.latest-posts ul li {
color: #<?php echo $color;?>;
padding-left: 10px;
margin-bottom: 5px;
}
.latest-posts ul li a {
text-decoration: none;
display: block;
line-height: 15px;
color: #<?php echo $color;?>;
}
.latest-posts ul li a:hover {
text-decoration: underline;
color: #<?php echo $color;?>;
}
.latest-posts p {
text-align: justify;
color: #6e6e6e;
margin-top: 10px;
}
/* Subpage Column Styles */
#sub-column {
width: 925px;
height: auto;
margin: 0px auto;
}
#sub-top {
background: url(images/sub-top.gif) no-repeat;
width: 925px;
height: 42px;
margin-left: 7px;
float: left;
margin-top: 10px;
}
#sub-content {
background: url(images/sub-content.gif) repeat-y;
width: 925px;
float: left;
margin-left: 7px;
}
/* Subpage Content Styles */
.content {
width: 620px;
float: left;
padding: 10px 15px 10px 15px;
}
.content h1 {
font-size: 24px;
color: #8a8a8a;
margin: 20px 0px 20px 0px;
font-weight: normal;
}
.content p {
text-align: justify;
color: #8a8a8a;
}
.post ul {
border-top: 1px solid #CCC;
list-style-type: disc;
list-style-position:inside;
color: #6e6e6e;
margin: 20px 40px 10px 10px;
}
.post ul li {
color: #6e6e6e;
border-bottom: 1px solid #CCC;
padding: 5px;
}
.post ul li a {
color: #<?php echo $color;?>;
}
.post ol {
border-top: 1px solid #CCC;
list-style-type: disc;
list-style-position:inside;
color: #6e6e6e;
margin: 20px 40px 10px 10px;
}
.post ol li {
color: #6e6e6e;
border-bottom: 1px solid #CCC;
padding: 5px;
}
.post ol li a {
color: #<?php echo $color;?>;
}
/* Breadcrumb Navigation Styles */
.breadcrumb {
float: left;
padding: 13px 15px 10px 15px;
color: #8a8a8a;
font-size: 12px;
}
.breadcrumb a {
color: #<?php echo $color;?>;
font-weight: normal;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
/* Sidebar Styles */
.sidebar {
width: 220px;
float: left;
margin-left: 30px;
margin-top: 0px;
padding-bottom: 50px;
}
.widgettitle {
color: #8a8a8a;
font-size: 18px;
font-weight: normal;
padding: 20px 0px 10px 0px;
list-style-type: none;
}
#sidebar ul li {
list-style-type: none;
}
#sidebar ul ul li a {
padding-left: 30px;
}
#sidebar ul ul ul li a {
padding-left: 40px;
}
.textwidget {
margin: 10px 8px 20px 0px;
color: #6e6e6e;
}
.sidebar ul li a {
color: #<?php echo $color;?>;
text-decoration: none;
border-bottom: 1px solid #CCC;
display: block;
padding: 5px;
padding-left: 20px;
background: url(images/listenpunkt.gif) no-repeat left center;
}
.sidebar ul li a:hover {
color: #<?php echo $color;?>;
text-decoration: underline;
}
.posted {
color:#9d9c9c;
font-size: 10px;
font-style: italic;
display: block;
padding-left: 10px;
}
#wp-calendar {
border:1px solid #cccccc;
color:#6e6e6e;
width: 220px;
}
#wp-calendar caption {
color: #8a8a8a;
font-size: 18px;
font-weight: normal;
padding: 0px 0px 10px 0px;
list-style-type: none;
}
tbody .pad {
background-color:#dddddd;
}
#wp-calendar a {
font-weight:bold;
font-size:12px;
background: none;
padding: 0px;
margin: 0px;
border: none;
}
thead tr th {
width:20px;
height:20px;
text-align:center;
background-color: #<?php echo $color;?>;
color: #FFF;
border:1px solid #cccccc;
padding: 3px;
}
tbody tr td {
width:20px;
height:20px;
text-align:center;
border:1px solid #cccccc;
}
tfoot #prev {
width:58px;
height:20px;
text-align:left;
background-color:#ffffff;
background: none;
padding-left: 10px;
}
tfoot #next {
width:58px;
height:20px;
text-align:right;
background-color:#ffffff;
background: none;
padding-right: 10px;
}
/* Comment Styles */
.alt {margin: 0;padding: 10px;}
#comment-wrap {
border: 0px;
color: #6e6e6e;
font-size: 11px;
}
#comment-wrap h6 {
font-size: 12px;
margin-bottom: 10px;
}
#comments ol {
list-style-type: none;
line-height: 18px;
border: 0px;
}
#comments ul li {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
border: 0px;
}
.commentlist {
padding: 0;
text-align: justify;
border: none;
}
.comment-body {
margin-bottom: 20px;
}
.reply {
font-size:11px;
clear: both;
float: right;
margin-top: -20px;
}
.commentlist em {
font-size: 11px;
}
.commentlist li {
margin: 5px 0 0px 10px;
padding: 5px 5px 0px 5px;
list-style: none;
border: 0px;
}
.commentlist li ul li {
margin-right: -5px;
margin-left: 30px;
margin-bottom: 0px;
list-style: none;
border: 0px;
}
.commentlist li li {
background:none;
border:none;
list-style:none;
margin:3px 0 3px 20px;
padding:3px 0;
border: 0px;
}
.commentlist li .avatar {
border:1px solid #ccc;
margin:5px 8px 6px 5px;
float: left;
padding:2px;
width:45px;
height:45px;
}
.commentlist cite, .commentlist cite a {
font-style: normal;
font-size: 11px;
margin-top: 2px;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
margin: 10px 5px 5px 65px;
font-size: 11px;
border: none;
}
#commentform p {
}
.commentmetadata {
font-weight: normal;
margin: 0;
display: block;
font-size: 10px;
font-style: italic;
}
.commentmetadata a, .commentmetadata a:visited {
color: #6e6e6e;
}
.commentmetadata a:hover{
}
.children {
padding: 0;
border: none;
}
.thread-alt {
border: none;
}
.thread-even li {
}
.depth-1 {
border: none;
}
.even, .alt li {
margin-bottom: 20px;
}
#respond input {
margin-right: 10px;
font-size: 11px;
color: #8a8a8a;
display: block;
margin-bottom: 5px;
}
#respond h4 {
font-size: 12px;
margin-bottom: 5px;
}
#submit {
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF !important;
padding: 3px 5px 3px 5px;
margin-top: 10px;
text-decoration: none;
font-size: 12px;
cursor: pointer;
}
#submit:hover {
background-color: #FFF;
border: 1px solid #8a8a8a;
color: #8a8a8a !important;
padding: 3px 5px 3px 5px;
text-decoration: none;
}
/* Portfolio Styles */
#portfolio {
margin: 20px 10px 50px 30px;
float: left;
}
.port-pic {
width: 270px;
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
float: left;
margin-bottom: 20px;
margin-right: 20px;
display: block;
}
.port-pic h3 {
font-size: 16px;
font-weight: normal;
color: #<?php echo $color;?>;
margin: 10px 10px 0px 12px;
}
.port-pic h3 a {
text-decoration: none;
color: #<?php echo $color;?>;
}
.port-pic h3 a:hover {
text-decoration: underline;
color: #<?php echo $color;?>;
}
.port-pic p {
text-align: justify;
color: #8a8a8a;
padding: 5px 10px 10px 10px;
font-style: italic;
font-size: 11px;
}
.port-pic img {
border: 2px solid #CCC;
margin: 10px 10px 0px 7px;
text-align: center;
}
/* Blog Styles */
.post {
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom: 1px solid #CCC;
}
.post h1 a {
color: #<?php echo $color;?>;
text-decoration: none;
}
.post h1 a:hover {
color: #<?php echo $color;?>;
text-decoration: underline;
}
.post p {
margin-top: 20px;
}
.blogpic {
text-align: center;
}
.blogpic img {
margin-top: 20px;
border: 2px solid #CCC;
}
.category a {
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;
padding: 3px 5px 3px 5px;
text-decoration: none;
font-size: 11px;
margin: 0px 5px;
line-height: 25px;
}
.category a:hover {
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;
padding: 3px 5px 3px 5px;
text-decoration: none;
}
/* Footer Styles */
#footer {
background: url(images/footer-column.gif) no-repeat;
width: 925px;
height: 45px;
margin-bottom: 5px;
clear: both;
padding: 12px 30px 0px 20px;
margin-left: 7px;
}
#footer .copyright {
color: #8a8a8a;
text-transform: uppercase;
}
#footer a {
color: #<?php echo $color;?>;
text-decoration: none;
padding: 0px 2px;
}
#footer p {
color: #6e6e6e;
text-transform: uppercase;
float: left;
}
#footer a img {
margin: 0px;
padding: 0px;
display: inline;
}
#footer p.footer-right {
color: #6e6e6e;
float: right;
text-transform: none;
margin: 0px 30px 0px 0px;
}
#footer p.footer-right a {
color: #6e6e6e;
text-decoration: none;
clear: both;
padding: 0px 0px 0px 15px;
}
#footer p.footer-right a:hover {
text-decoration: underline;
}
.wordpress-icon {
float: left;
margin-right: 10px;
margin-bottom: 12px;
}
.supported {
color: #CCC;
font-size: 10px;
text-align: center;
width: 925px;
}
.supported a {
color: #CCC;
font-size: 10px;
text-decoration: none;
}
/* Lightbox Images */
#grow {
background:#000 url(images/ajax-loader.gif) no-repeat center center;
border: none;
}
#nycloser {
background: url(images/closed.png) no-repeat center center;
border: none;
}
#next {
background: url(images/next.png) no-repeat center center;
border: none;
}
#next {
background: url(images/next.png) no-repeat center center;
border: none;
}
#prev {
background: url(images/prev.png) no-repeat center center;
border: none;
}
/* Pagenavi */
.wp-pagenavi a, .wp-pagenavi a:link {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;
}
.wp-pagenavi a:visited {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;
}
.wp-pagenavi a:hover {
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;
}
.wp-pagenavi a:active {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;
}
.wp-pagenavi span.pages {
padding: 2px 4px 2px 4px;
margin: 2px 2px 2px 2px;
background-color: #8a8a8a;
border: 1px solid #CCC;
color: #FFF;
}
.wp-pagenavi span.current {
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
background-color: #d4d4d4;
border: 1px solid #8a8a8a;
color: #8a8a8a;
}
.wp-pagenavi span.extend {
padding: 2px 4px 2px 4px;
margin: 2px;
border: 1px solid #000000;
color: #000000;
background-color: #000000;
}
i am trying to make a link at the top of my blog stand out more. however i cant figure out how to override the default style sheet. i am trying to make the following stand out mo <center><font size=4 style="color: red"><u><a href="http://www.jwsuretybonds.com/apps.htm">Apply For Surety Bonds Online</a></u></font></center> at: www.jwsuretybonds.com/blog |
|||||||