External CSS file

blog_guy1 · April 1, 2011, 7:33pm

I want to use an external CSS file.
I want it to affect all the subpages to my website, but not the Home page.
(I’m refering to all the pages other than the Home page as “subpages”. There are about sixty of them)

I know I have to load the external css file to my server, but what page do I enter:

I know it goes between the Head tags, but do I insert it in the Home page or in each of the other “subpages”? If it’s the Head of each subpage, then that seems to go against the very reason for the cascading nature of CSS.

Also, does it go between the Head tags or between the Style tags within the Head tags? I’ve checked many coding sites about this, but they’re never clear on a few things.

I want it to affect all of the subpages all in one fell swoop, but not the Home page.

I do all my own coding… might be a bit rough, but I’m trying!

My site: http://www.blog-guy.info

Any thoughts?

Thanks.

ralphm · April 1, 2011, 10:41pm

Hi blog-guy. Welcome to SitePoint.

As you suspected, yes, you have to put the link to the CSS file in the head section of each page.

<head>
<link rel="stylesheet" type="text/css" href="[COLOR="Red"]/css/[/COLOR]mystyle.css">
</head>

So the <link> code goes between the <head> tags, as above. Notice that I added a reference to a /css/ folder. I recommend you keep the stylesheet somewhere like this, and reference it with the forward slash at the beginning. This means that the link can be the same from all pages in the site, no matter where they are in the hierarchy. (Note that a link like that won’t work if you are testing this on your computer locally, unless you have a server environment set up.) Otherwise, you’d need a different path to the CSS file from different places in the site, which is a pain. E.g. from one part of the site you might need a link like

while on aonther page it might be

So yes, for an individual page to apply the styles, there needs to be a link to the file in the head of that page. The efficiency part of this is that you can alter one file that will affect all pages in the site. Yes, it can be inefficient if you have to go through all pages adding that link, so that’s where forward planning comes into it. You can save yourself a lot of work by using PHP includes.

As for the styles not appearing on the home page, just don’t link to that CSS file on the home page. OR, you can link to that style sheet on the home page but just have some more specific styles in the style sheet that apply to the home page only.

If any of that doesn’t make sense, please feel free to ask for clarification.

Dr_John · April 1, 2011, 10:45pm

You have to tell each page which stylesheet to use, you don’t use it once and magically the other pages know what to do.

So you insert it on every page that you wish to use it on. You can use a different stylesheet on different pages, although that is not usually a practical solution, as there would be lots of redundancy. You could however have one stylesheet for your home page and a different one on every other page.

But WHY?

You can have a set of styles that are only used on a few pages, and all the other styles used almost everywhere in the one stylesheet. You don’t have to use every style in a css file on every single page.

Edit: must type faster…

blog_guy1 · April 2, 2011, 7:28pm

Hi ralph.m and Dr John,

Thanks for your input.
My gray-matter will have to process your points for a while. I understand what you’re saying, but now I have to decide if I want to bite the bullet and redo my coding to include the .php endings and “php includes”. As I said above, I’ve got over sixty pages, but will eventually have many hundreds - so perhaps redoing it now is the better way.

Thanks again.

blog-guy

Black_Max · April 5, 2011, 1:44am

Definitely, definitely do it now. I’ve redone hundreds of pages (transformed a site from table-driven to CSS-driven) and it’s a nightmare. Ralph, that’s a nifty site about PHP includes. I’ve bookmarked it for the next time I want to go down that road.

xhtmlcoder · April 5, 2011, 9:02am

You don’t have to end the pages with the *.php extension. Like was mentioned the sooner you employ includes the better. If you wait too long deciding you’ll be leaving yourself a future headache regarding wasted editing time, once you have more than a handful of pages, etc.

system · April 5, 2011, 4:31pm

I think you missed the point of CSS embeds, or at least how they work.

YES, you have to state it on ever page you want to use it, that’s NOT where the “point of using it” comes from. The point of using it comes from not having to inline appearance on every single element, and having a nice central point from which ALL appearance can be controlled.

Worrying about separating out styles for single pages is also silly if you think about it, as you can PRE-CACHE the unique elements on sub-pages by loading it with your home page. Given that the largest CSS a site should ever need is around 30k, with 10-15k being the average, pre-caching it all in one fell swoop speeds up page-loads of subpages AND saves you on handshakes when the subpages load.

That said the page you linked to seems to miss the point of CSS and even HTML in a lot of ways – the use of non-breaking spaces to do padding’s job, the presence of presentational images in the markup, the lack of images off graceful degradation, presence of elements that don’t even EXIST in the doctype you chose like borer and align, title attributes on elements that shouldn’t have title attributes, absolute URL’s to everything, tags that NEVER actually existed in the spec like nobr. tags that don’t exist in STRICT like IFRAME, endless flat anchors on what SEEM to be flat lists (we have tags for lists), use of EM on elements that should not be recieving emphasis, and worst of all the fixed height wrapper around dynamic fonts, which is why the footer is overlapping the content area for large font/120dpi users. (NEVER fix the height of a multi-line content area!!!)… Same goes for all the absolute positioning for NOTHING. Flow is your friend, only APO inside a flow element – with VERY rare exceptions.

Also might help to strip out all the HTML 3.2 in your XHTML doctype… like all the invalid uppercase tags and lack of closes on elements.

All that said, at least it’s not TOO saggy around the midsection – but taking semantics into account the site may take minimalism of the markup too far – the endless inline-level anchors with BR for obvious lists for example.

I would also highly suggest changing those images to a WEB format like gif, jpeg or png – BMP’s have no business being used on a website! Similarly serif fonts generally are difficult to read on screen, which is why you don’t see a lot of websites using them.

One of the biggest things I’m noticing is your assinging unique classes to each column when most of these columns appear to be taking the SAME values… If they’re all the same, they should all get the SAME class. The vague/meaningless class names “class1, class3, class6” doesn’t help much either. Say WHAT they are!

I also don’t know what that is for a google search, but the disastrously wasteful markup, use of an IFRAME, and a host of other “did the person who made that even understand HTML?” means I’d take an axe to it and use something actually resembling markup to tie into google search. Never heard of “getgooglesearch” – but they look like a bunch of dimwits I’d advise EVERYONE to steer clear of.

So if I was writing that page, the html would probably look something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<!--
	keywords should be 8 or 9 words relevant to the page,
	not TWENTY-THIRTY. Also, try to keep it under 80 bytes
	in length!
-->

<meta
	name="keywords"
	content="blogs, links, index, search, blog-guy"
/>

<!--
	description should be the text you want to show on your SERP
-->

<meta
	name="description"
	content="Links to blogs covering a wide range of topics"
/>

<meta
	name="verify-v1"
	content="gXJGEl+G1fa/WB+rIsYMCSavGfqia7kgllCVEczYlgI="
/>

<meta
	name="google-site-verification"
	content="umEpFAqj3Vpv6_A_2zF3TZxuw34t0Iu_yzPa2DJogK0"
/>

<!--
	CSS links should have a MEDIA type on them to say
	WHAT media you are styling, so you don't send style
	to devices that will screw it up like handhelds or
	print
-->

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Blog-Guy.info
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		blog-guy.info
		<span></span>
	</h1>

	<form method="get" action="http://www.google.com/custom" id="googleTopSearch">
		<fieldset>
			<img src="images/google.png" alt="Google" width="58" height="20" />
			<input type="text" name="q" size="31" maxlength="255" value="" />
			<input type="submit" name="sa" value="Search" />
			<input type="hidden" name="hl" value="en" />
		</fieldset>
	</form>


	<ul id="mainMenu">
		<li><a href="/">Home</a></li>
		<li><a href="/links.html">Links</a></li>
		<li><a href="mailto:blog-guy@blog-guy.info">Contact</a></li>
	</ul>

	<ul id="socialLinks">
		<li>
			<a href="http://www.facebook.com/">
				<img alt="facebook" src="images/facebook.png" />
			</a>
		</li><li>
			<a href="http://www.blogger.com/">
				<img alt="blogger" src="images/blogger.png" />
			</a>
		</li><li>
			<a href="http://www.delicious.com/">
				<img alt="delicious" src="images/delicious.png" />
			</a>
		</li><li>
			<a href="http://digg.com/">
				<img alt="digg" src="images/digg.png" />
			</a>
		</li><li>
			<a href="https://www.paypal.com/">
				<img alt="paypal" src="images/paypal.png" />
			</a>
		</li><li>
			<a href="https://www.clickbank.com/">
				<img alt="clickbank" src="images/clickbank.png" />
			</a>
		</li><li>
			<a href="http://www.squidoo.com/">
				<img alt="squidoo" src="images/squidoo.png" />
			</a>
		</li><li>
			<a href="http://wordpress.com/">
				<img alt="wordpress" src="images/wordpress.png" />
			</a>
		</li><li>
			<a href="http://shop.ebay.com/klught/m.html">
				<img alt="ebay" src="images/ebay2.png" />
			</a>
		</li><li>
			<a href="http://www.godaddy.com/">
				<img alt="godaddy" src="images/godaddy.png" />
			</a>
		</li><li>
			<a href="http://technorati.com/">
				<img alt="technorati" src="images/technorati.png" />
			</a>
		</li>
	</ul>

	<hr />

	<div id="columnWrapper">

		<div id="contentWrapper"><div id="content">

			<ul class="linkColumn">
				<li><a href="/accounting-whatisit1.html">Accounting</a></li>
				<li><a href="/acidreflux1.html">Acid Reflux</a></li>
				<li><a href="/acne1.html">Acne</a></li>
				<li><a href="/afterschoolactivities1.html">After-School Activities</a></li>
				<li><a href="/adsense1.html">Adsense</a></li>
				<li><a href="/affiliatemarketing1.html">Affiliate Marketing</a></li>
				<li>Air Purifiers</li>
				<li>Air-Freight</li>
				<li><a href="/aikido1.html">Aikido</a></li>
				<li>American History</li>
				<li><a href="/anger-mgt-skills1.html">Anger Mgmt</a></li>
				<li><a href="/arts-entertainment1.html">Arts-Entertainment</a></li>
				<li>Article Marketing</li>
				<li><a href="/astrology-elements1.html">Astrology</a></li>
				<li>Astronomy</li>
				<li>ATV</li>
				<li><a href="/autism-howtodetect1.html">Autism</a></li>
				<li>Auto Leasing</li>
				<li>Auto Nav System</li>
				<li>Auto Responders</li>
				<li>Automotive</li>
				<li><a href="/baby-crying1.html">Babies</a></li>
				<li>Back Pain</li>
				<li><a href="/badbreath1.html">Bad Breath</a></li>
				<li>Bargain</li>
				<li>Bathroom Remodeling</li>
				<li>Black History</li>
				<li><a href="/blogging-for-profit1.html">Blogging</a></li>
				<li>Boarding</li>
				<li>Boats</li>
				<li><a href="/breastfeeding1.html">Breast Feeding</a></li>
				<li>Burglar Alarm</li>
				<li>Business</li>
				<li>Buying</li>
				<li><a href="/candlemaking1.html">Candles</a></li>
				<li>Car Rental</li>
			</ul>

			<ul class="linkColumn">
				<li>Carpet</li>
				<li><a href="/cats1.html">Cats</a></li>
				<li>Cell Phone</li>
				<li>Cerebral Palsy</li>
				<li>Childcare</li>
				<li>Christmas</li>
				<li><a href="/cigars1.html">Cigars</a></li>
				<li><a href="/coincollecting1.html">Coin Collecting</a></li>
				<li>Computer Tech</li>
				<li>Contact Lenses</li>
				<li><a href="/cooking1.html">Cooking</a></li>
				<li>Copywriting</li>
				<li>Craigslist</li>
				<li><a href="/creditscores1.html">Credit Scores</a></li>
				<li>Criminology</li>
				<li>Cruiseships</li>
				<li>Culture</li>
				<li>Dance</li>
				<li><a href="/onlinedating1.html">Dating</a></li>
				<li>Dental Assistant</li>
				<li><a href="/anxiety-depression1.html">Depression</a></li>
				<li><a href="/diamonds1.html">Diamonds</a></li>
				<li>Diesal VS Gasoline</li>
				<li><a href="/digitalcameras1.html">Digital Cameras</a></li>
				<li><a href="/puppy-care1.html">Dogs</a></li>
				<li>Drag Racing</li>
				<li><a href="/getting-started-on-ebay1.html">eBay</a></li>
				<li>Education</li>
				<li>Elderly</li>
				<li>Email Marketing</li>
				<li>Entrepreneur</li>
				<li>Excavation Equipment</li>
				<li><a href="/exercise1.html">Exercise</a></li>
				<li>eZine Marketing</li>
				<li><a href="/familybudget1.html">Family Budget</a></li>
				<li><a href="/fashion1.html">Fashion</a></li>
				<li>Fengshui</li>
				<li>Fishing</li>
				<li>Fitness</li>
			</ul>

			<ul class="linkColumn">
				<li>Fruit Trees</li>
				<li><a href="/gambling1.html">Gambling</a></li>
				<li><a href="/organic1.html">Gardening</a></li>
				<li><a href="/golf1.html">Golf</a></li>
				<li>Google Sense</li>
				<li>Government</li>
				<li>Health</li>
				<li>Health Insurance</li>
				<li>History</li>
				<li><a href="/hobbies1.html">Hobbies</a></li>
				<li>Holiday</li>
				<li>Home Decorating</li>
				<li><a href="/home-schooling1.html">Home Schooling</a></li>
				<li>Home-Family</li>
				<li><a href="/survivaltips1.html">Hunting</a></li>
				<li>Hybrid Cars</li>
				<li>Internet Business</li>
				<li>Ireland</li>
				<li><a href="/howtobuyjewelry1.html">Jewelry</a></li>
				<li>Job</li>
				<li>Job Search</li>
				<li>Landscaping</li>
				<li>Las Vegas</li>
				<li><a href="/philosophyoflaw1.html">Law</a></li>
				<li>Loans/Mortgages</li>
				<li><a href="/deductive-inductive1.html">Logic</a></li>
				<li>Martial Arts</li>
				<li><a href="/introtomicrobrews1.html">Micro Brews</a></li>
				<li>Miscellaneous</li>
				<li>Mobility Scooters</li>
				<li><a href="/monograms1.html">Monograms</a></li>
				<li>Motor Homes</li>
				<li>Motorcycles</li>
				<li>Mountain Biking</li>
				<li>MySpace</li>
				<li>New Age</li>
				<li><a href="/nyc-vacation1.html">New York City</a></li>
				<li>Niche</li>
				<li>Nursing Assistant</li>
				<li>Office Chairs</li>
			</ul>

			<ul class="linkColumn">
				<li>Optin List</li>
				<li>Outsourceing</li>
				<li><a href="/paintball-basics1.html">Paintball</a></li>
				<li>Paintings</li>
				<li>PC Security</li>
				<li>Pet</li>
				<li><a href="/pet-health1.html">Pet Health Care</a></li>
				<li>Philosophy</li>
				<li><a href="/historyofphotography1.html">Photography</a></li>
				<li><a href="/podcasting1.html">Podcasting</a></li>
				<li>Politics</li>
				<li>Porsche</li>
				<li>Power Tools</li>
				<li><a href="/ppc1.html">Pay Per Click</a></li>
				<li>Prepaid Legal</li>
				<li>Private Jet Charters</li>
				<li><a href="/privatelabelrights1.html">Private Label Rights</a></li>
				<li><a href="/hamradio1.html">Radio Hobbies</a></li>
				<li><a href="/realestate1.html">Realestate</a></li>
				<li>Recreation and Sports</li>
				<li>Reference-Education</li>
				<li>Refinancing</li>
				<li><a href="/gaudiya-vaishnavism1.html">Religion</a></li>
				<li><a href="/resumes1.html">Resumes</a></li>
				<li><a href="/whatisrss1.html">RSS</a></li>
				<li>San Diego</li>
				<li>San Francisco</li>
				<li>Satellite Radio</li>
				<li><a href="/black-scholarships1.html">Scholarship</a></li>
				<li>School</li>
				<li>Scotch</li>
				<li><a href="/self-improvement1.html">Self-Improvement</a></li>
				<li>SiteMap</li>
				<li>Ski Vacations</li>
				<li>Skin Care</li>
				<li><a href="/snoring1.html">Snoring</a></li>
			</ul>

			<ul class="linkColumn lastColumn">
				<li>Social Networking</li>
				<li>Society</li>
				<li><a href="/coaching-soccer1.html">Sports Coaching</a></li>
				<li>Sportcars</li>
				<li>Student Loan Reports</li>
				<li><a href="/studentloans1.html">Student Loans</a></li>
				<li>Super Foods</li>
				<li>Supercross Racing</li>
				<li>Swimming Pools</li>
				<li><a href="/tattoos1.html">Tattoos</a></li>
				<li><a href="/taxlawattorney1.html">Tax Attorney</a></li>
				<li>Technology</li>
				<li>Tennis</li>
				<li>Theater Arts</li>
				<li><a href="/naturalremedies1.html">Toothache and Toothcare</a></li>
				<li>Tracking Software</li>
				<li><a href="/trafficandseo1.html">Traffic and SEO</a></li>
				<li>Vacation</li>
				<li>Vacuum Cleaners</li>
				<li>Valentines Day</li>
				<li><a href="/youarewhatyoueat1.html">Vegetarian</a></li>
				<li>Vehicles</li>
				<li>Viral Marketing</li>
				<li><a href="/vitamins-and-your-health1.html">Vitamins</a></li>
				<li>WAHM</li>
				<li>Wart Removal</li>
				<li><a href="/webdesignrules1.html">Web Design</a></li>
				<li><a href="/webhosting1.html">Web Hosting</a></li>
				<li>Web Traffic</li>
				<li>Wedding Favors</li>
				<li>Weightloss</li>
				<li>Wine and Spirits</li>
				<li>Women</li>
				<li><a href="/intro-to-yoga1.html">Yoga</a></li>
				<li><a href="/howtomakeayoutubevideo1.html">YouTube</a></li>
			</ul>

			<hr />

		<!-- #content, #contentWrapper --></div></div>

		<div id="firstSideBar">

			<img alt="Blog-Guy" src="images/me2.jpg" class="plate" />
			<h2>
				Welcome to <span>Blog-Guy.info</span>
			</h2>
			<p>
				I'm constantly adding categories of blogs because by its nature a blog site is always growing, and the topics cover everything from <em>A-to-Z</em>.
			</p><p>
				Thanks for visiting!
			</p><p class="signed">
				- Blog-Guy.
			</p>

			<hr />

			<div class="goDaddy">
				<!--
					commented out script for testing
				<script type="text/javascript" src="http://tracedseals.starfieldtech.com/siteseal/get?scriptId=cdSiteSeal3&amp;cdSealType=Seal3&amp;sealId=55e4ye7y7mb730b741859cf960bebyvh1emey7mb7355e4ye7d191355bdbde42c"></script>
				-->
			<!-- .goDaddy --></div>

			<a href="https://www.paypal.com/us/verified/pal=klught%40nyc%2err%2ecom">
				<img
					src="https://www.paypal.com/en_US/i/icon/verification_seal.gif"
					alt="Official PayPal Seal"
					class="plate"
				/>
			</a>

			<hr />

		<!-- #firstSideBar --></div>

		<div id="secondSideBar">

			<div class="googleAd120">
				<script type="text/javascript"><!--
				google_ad_client = "pub-9129938118205640";
				/* 120x600, created 3/24/11 */
				google_ad_slot = "8723888605";
				google_ad_width = 120;
				google_ad_height = 600;
				//-->
				</script>
				<script type="text/javascript"
				src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
				</script>
			<!-- .googleAd120 --></div>

			<hr />

		<!-- #secondSideBar --></div>

	<!-- #columnWrapper --></div>

	<div id="footer">
		<p>
			The author of this web page assumes no responsibility for the clicks made by visitors to or from this web page or any of the links herein.	This web page should not be construed as advice, either: personal, professional, or legal.	Visitors to this site should practice all due diligence and prudence when coming or going to any web page on the internet.
		</p><p>
			(c) March 17, 2011: Klugh Enterprise, L.L.C. (Some rights reserved)
		</p><p>
			The owner of this site makes no claim to ownership of articles herein, but claims the right to use them as per the conditions set by their respective authors.
		</p>
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Gimme a few minutes and I’ll slap together the CSS to go with that, and re-optimize the images while at it since it’s using about 100k of images to do 40k’s job.

system · April 5, 2011, 5:09pm

Live demo for the home page:
template.html

Live demo for a random sub page
template2.html

As with all my examples the directory:
Index of /for_others/blogGuy

Is unlocked for easy access to the bits and pieces like the CSS and related images.

I’m out the door for lunch now, but if I remember later I’ll explain the changes I made and why.

blog_guy1 · April 7, 2011, 4:51pm

deathshadow,

I can’t thank you enough… please leave it there for a while and I’ll replace my code.

Thank you ever so much.

dumb blog-guy

blog_guy1 · April 7, 2011, 6:11pm

deathshadow,

A couple of questions:

Regarding the css file… I see many small vertical rectangles in the code. What are they?
Do I have to modify the code in any way? Is it suitable for both the home page AND the actual blog subpages? (I’m calling a “subpage” all the pages other than the home page)?
Should I enter it in between the Head tags? Or, should I just send it to my server? If I send it to my server, I can place it in its own css folder, but then do I need to modify the “link” tag to reflect that, i.e.

from:
href=“screen.css”
to:
href=“css/screen.css”
or:
href=“/css/screen.css”
or:
href=“…/css/screen.css”

by-the-by… by “vertical rectangles”, see at:
http://www.blog-guy.info/images/vertical-rectangles.png

Thanks again!

xhtmlcoder · April 7, 2011, 7:53pm

Those ‘rectangles’ are Carriage Returns or Line Feeds that are appearing and perhaps occurred when Jason did FTP, etc. You’d possibly be better off with an IDE that is slightly more suited to web design that vanilla Notepad so it will save/display them correctly.

You could open that *.css file with WordPad and just save and then open again in Notepad and they’ll get stripped out.

system · April 7, 2011, 8:14pm

It’s probably because the browser is saving it as UTF-8… and notepad can’t handle UTF-8 which is why I suggest using a notepad replacement like Crimson Editor (what I use) Notepad++ (a close second), EditPlus, Win32pad, etc, etc…

Notepad is a cute toy, but the lack of proper character handling relegates it to the garbage bin for working on modern sites.

Homepage of Crimson Editor - Free Text Editor, Html Editor, Programmers Editor for Windows – what I use for english language sites and files restricted to ASCII7.

Notepad++ | 5.9 – what I use for non-english sites as Crimson can screw up some UTF-8 encodings.

EditPlus - Text Editor, HTML Editor, PHP Editor and Java Editor for Windows – another nice editor.

Plain notepad? Not gonna get the job done – it doesn’t even do block indent/de-indent.

That CSS should look like this:


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

hr {
	display:none; /* hr in my code are for CSS off users */
}

body {
	text-align:center; /* center #pageWrapper IE 5.x */
	font:normal 85%/140% arial,helvetica,sans-serif;
}

a:active,
a:focus,
a:hover {
	color:#080;
}

p {
	padding-bottom:1em;
}

#pageWrapper {
	width:976px;
	margin:0 auto;
	text-align:left;
}

h1 {
	float:left;
	position:relative;
	width:274px;
	text-indent:8px;
	font:bold italic 28px/32px arial,helvetica,sans-serif;
	color:#00C;
	padding:50px 0;
}

h1 span {
	position:absolute;
	top:0;
	left:0;
	width:274px;
	height:132px;
	background:url(images/h1Logo.png) 0 0 no-repeat;
}

#googleTopSearch {
	text-align:center;
	padding-top:48px;
}

#googleTopSearch * {
	vertical-align:middle;
}

#mainMenu {
	clear:both;
	float:left;
	list-style:none;
	padding:4px 0 4px 32px;
	font:normal 16px/18px arial,helvetica,sans-serif;
}

#mainMenu li {
	display:inline;
}

#mainMenu a {
	float:left;
	padding:2px 6px;
	border:1px solid #FFF;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	border:1px solid #000;
}

#socialLinks {
	list-style:none;
	float:right;
}

#socialLinks li {
	display:inline;
}

#socialLinks a {
	float:left;
	text-decoration:none;
	border:1px solid #FFF;
}

#socialLinks img {
	float:left;
}

#socialLinks a:active,
#socialLinks a:focus,
#socialLinks a:hover {
	border:1px solid #008;
}

#columnWrapper {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
}

#contentWrapper {
	clear:both;
	float:left;
	width:100%;
	border-top:2px solid #008;
}

#content {
	margin:0 140px; /* sides == column width */
	padding:0.5em 16px;
}

#content h2 {
	font:bold 140%/120% arial,helvetica,sans-serif;
	padding-bottom:0.3em;
}

#content h3 {
	font:bold 120%/120% arial,helvetica,sans-serif;
	padding-bottom:0.4em;
	color:#008;
}

.linkColumn {
	list-style:none;
	float:left;
	width:133px;
}

.linkColumn li {
	padding:0 8px 6px 0;
	line-height:120%;
}

.lastColumn {
	margin-right:-8px; /* prevent IE float drop */
}

#firstSideBar,
#secondSideBar {
	float:left;
	width:140px;
	padding:0.5em 0;
	margin-top:2px;
}

#firstSideBar {
	position:relative;
	margin-right:-140px; /* == negative column width */
	left:-100%;
}

#secondSideBar {
	margin-left:-140px; /* == negative column width */
}

#firstSideBar h2 {
	font:bold 100%/140% arial,helvetica,sans-serif;
	padding-bottom:0.5em;
	text-align:center;
}

#firstSideBar h2 span {
	white-space:nowrap;
}

.signed {
	text-align:right;
	font-style:italic;
}

.plate {
	display:block;
	margin:0 auto 0.5em;
}

#footer {
	clear:both;
	padding-top:0.5em;
	border-top:2px solid #008;
}

As to moving the CSS, that can make pages overly complicated. Usually I leave the CSS in the same directory as the markup – or if I do move it to a subdirectory like say “/themes/themename” I put the images CSS calls in as a subdirectory of that “/themes/themename/images” – which lets me separate my CSS images that are presentation only from my content images which I’d place in just /images.

But yes, you move the file, you need to change it’s path in the markup…

It should be suitable for most pages, that’s why I made the ‘template2.html’ to show how easy it is to get a sub-page to use the same CSS. You have to say in every html file you want to use that CSS, but it is easily applied across multiple pages so you change the CSS, it will change every page.

blog_guy1 · April 8, 2011, 4:00pm

You guys are great! Thanks for all your help!

blog_guy1 · April 8, 2011, 4:00pm

I can’t believe all the help and encouragement I’ve received here…

Thanks a zillion!

Black_Max · April 8, 2011, 6:45pm

DS, slightly off-topic: why do you prefer Crimson Editor over Notepad ++? Not cracking on you, just asking. I like NP++ but I’m always willing to migrate to a better tool, if it is indeed better. (Side note: I’d love to redo Crimson Editor’s home page. )

system · April 8, 2011, 7:40pm

I prefer Crimson’s behavior on tabbing, auto-tabbing and word-wrap. It also is easier to set the fonts to fixedsys, which on a large fonts/120dpi system is a much better/clearer editor font… It’s also easier to disable all that blasted “color syntax” acid-trip bull that does nothing but make code illegible for me. (which I’ve been saying for 25 years ever since I first encountered it in Turbo Pascal 4!)

But most of all, it’s the only damned editor I’ve found that lets me turn OFF the stupid **** tabbed editing, which for me as a multi-display users is a massive step BACKWARDS in functionality… I’ve got a perfectly good taskbar (in portrait mode, right-most display) to see multiple files with (once you turn that "group by program bull off), and with multiple displays having everything restricted to a single window makes it next to useless for say… see my HTML, CSS, PHP and JS all as separate windows side-by-side spanning two displays.

Which is part of how I’m able to develop pages as quickly as I do.

There are some things about notepad++ I do like – that it doesn’t mangle character sets like Crimson does is a great example, I also like it’s more robust search/replace, the lines characters used to show tabs lining up…

But it has an equal number of annoyances – it’s spaces to tabs conversion for example does ALL spaces, not just the number of spaces used for a tab, looking REALLY stupid when it’s done. It damned near forces you to use it’s endless “style” options meaning you can’t say “this font for all” with ease, with no option to say “I want all files REGARDLESS of extension to default to THIS style”…

On my long term “to do” list is to make an editor that combines what I like to see – Crimson is really close once I turn off most of it’s excess BULL (like the toolbar, tabs, syntax highlighting), if it didn’t mangle foreign language UTF-8 or language specific ISO code pages I’d probably not be using anything else.

I have very specific requirements and distinct dislikes for things that most people consider “progress” – tabbed editing, color syntax highlighting, autocompletion – for me they either get in the way, or are a step BACKWARDS in functionality… I really often wonder what’s in the kool-aid on that one, since a great many things people seem to find “helpful” just gets in my ***** way. (scripting libraries, CSS frameworks, editor aids…)

But then, I consider Win98 the pinnacle of user interface design, and everything since to be useless garbage I just have to turn off.

– edit – oh, and you’re right, Crimson’s home page needs help.

blog_guy1 · April 9, 2011, 6:16pm

To deathshadow,

Firstly… thanks again…

I’ve redone my home page and two of my blog (sub) pages as per your instructions… did a lot of copying and pasting and then did the keyword and description and title thing… the pages look great… one more question…

do I have to do that for all the other 94 blog (sub) pages I had already done originally (I’ve calculated it will take me about seven to eight hours to redo it all)? How on earth did you redo all my coding so quickly? Is there a template you used? I know once it’s done, it’s done… just wondering.

blog-guy

p.s. If I’m whining too much, just tell me to shut up, bite the bullet, and get to work.

p. p. s. I’ve downloaded Crimson… I like it.

Black_Max · April 9, 2011, 8:41pm

DS, let me know when you create your new text editor. Something that combines the positives of CE and NP++ and avoids the negatives would be something worth trying.

Any thoughts on Emerald Editor?

Blog-guy, I do apologize for hijacking your thread!

blog_guy1 · April 10, 2011, 12:58am

BM…
Cool.

system · April 10, 2011, 6:17pm

Pretty much, though that’s the point at which you may want to look into PHP, ASP or even SHTML so you can reuse a lot of the same code. It’s why most blogs run through some kind of CMS system so things like the headers, menus and sidbars that remain the same across pages can be written once and just link in the content…

I have a few baseline things I start from for most sites, said markup looking thus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Template Design CSS
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Site Title
		<span></span>
	</h1>

	<ul id="mainMenu">
		<li><a href="home">Home</a></li>
	</ul>

	<hr />

	<div id="contentWrapper"><div id="content">
		Page Content Here
	<!-- #content, #contentWrapper --></div></div>

	<hr />

	<div id="sideBar">
		SideBar content Here
	<!-- #sideBar --></div>

	<hr />

	<div id="footer">
		Footer Content Here
	<!-- #footer --></div>

<!-- #pageWrapper --></div>


</body></html>

99% of websites that’s really the best starting base I’ve found for. From there I just copied over the various heading texts and did a lot of search and replace on the various classes (typically replacing with nothing).

I always start by writing the full markup FIRST. It’s a little different an approach from the “mainstream” where people draw a goofy picture to try and make their layout… even when working with the PSD jockey I pretend their “pretty picture that has nothing to do with a practical layout” doesn’t even exist, and markup the content semantically first. There are some common styling techniques like gilder-levin and column sandbags/wrappers I apply at that point, but for the most part I code based on the logical document order and NOT the appearance – as appearance is CSS’ job. This gives a fairly attractive and entirely usable layout WITHOUT the styling applied.

I then bend the markup to my will using CSS to create the layout. First I just get everything placed where I want it without images or extra styling, then I build up the appearance on top of the layout – which is when/where I start playing with images. When working from someone else’s pretty picture at this point I usually have to throw out the original and recreate everything anyways, since your average painter who thinks they know how to design a web page knows not gilder-levin, sliding doors or eight corners under one roof – and often make graphics that are a miserable /FAIL/ like fixed height containers.

THANKFULLY your layout lacked any of that sort of nonsense, so was very easy to code up quickly. The HTML took me maybe three minutes, and the CSS 15 minutes tops.

Basically – Content first, appearance last.

The CSS is much more involved, but most of that was pretty much stock too – all the techniques I used are pretty much standard for every site I write so it tends to go fairly quickly.

Though a lot of my speed is just experience – as you gain more experience you’ll learn to make choices about how/what/why more quickly. I’ve been writing computer software for over three decades and websites professionally for about 8 years, (and amateur for about 4 years before that) so I’ve got just a wee bit of a head start on you.

… and we all start somewhere – my work the first six to seven years of doing web development was nauseatingly bad. I mean my first site was vomited up in Nyetscape 4 Composer – and even when I started doing hand coding it took four years for me to finally understand separation of presentation from content and the advantages of STRICT with the reasons for accessibility norms.

Keep with it, there’s a LOT to learn, but it’s worth it in the end… either that or you have a psychotic episode.

Topic		Replies	Views
Difference between internal and external style sheet? HTML & CSS	4	18453	October 8, 2014
CSS and HTML Help! Get Started	7	229	November 19, 2010
External HTML page? Get Started	4	879	May 31, 2013
CSS menu help HTML & CSS	3	465	October 8, 2014
External CSS file Get Started	6	826	October 8, 2014

External CSS file

Related topics