View Full Version : Web design use of Style sheets to control whole site
goldenfleece 22-07-2008, 16:34 Is the use of 'style sheets' still THE way to have control over the overall look of every page within a web site, ie change one file and the whole site can change its look. Or is there now a better way? Just looking at possible ways to work on web sites, although there is no reason why I should want to change EVERY page on any web site all at the same time and in the same way, but its a thought.....
mr chris 22-07-2008, 16:47 Is the use of 'style sheets' still THE way to have control over the overall look of every page within a web site, ie change one file and the whole site can change its look. Or is there now a better way? Just looking at possible ways to work on web sites, although there is no reason why I should want to change EVERY page on any web site all at the same time and in the same way, but its a thought.....
The separation of style from content is the ONLY way forward. Learn strict DTD (none of this transitional crap) and master CSS and the web world is, as they say, your oyster.
CSS is still best practice yes.
He's already had good replies, the answer was 'yes'.
goldenfleece 22-07-2008, 18:03 Had a look at a CSS editor and have not a clue how to do it!!!! Its all greek to me. is there a totally bullet proof CSS wizard for idiots out there that can do all that stuff in a nice friendly 'beginners only' layout? I only like WSYIWYG software for web design, dont have the time to mess with stuff in notepad and raw code.....
I've never used a WYSIWIG editor that used css. It's not difficult though.
I was about to start describing how to use it, but I've just thought that there are a hundred perfectly good css tutorials out there already. Just google one, I'm afraid you might have to use the code view in your editor at least, if you don't want to use notepad.
fnkysknky 22-07-2008, 18:31 What editor do you use goldenfleece?
goldenfleece 22-07-2008, 18:57 What editor do you use goldenfleece?
Currently one called NVU..pretty good actually...lots of features but nice and simple too. Just does DHTML and has CSS support but cant quite figure out that bit.....for some reason I cant seem to get my head around the CSS layout....
I made this simple working template for my web site using NVU
http://www.doveandrainbow.com/template.html
but its not finished yet I should add, the menu needs formatting properly and not decided on table/cell backgrounds
and a few other things
Ideally tables and cells should only be used where you want to display tabular data, everything else should be logically grouped using spans and divs. What you then do is apply classes to things
<div id="myText" class="standardText">blah blah<hr class="myNormalHR"/></div>
You then define standardText and myNormalHR in your css definition, this includes as many things as you want, but typically about positioning, font, size, background, etc... In addition if you want something special on 'myText' you can define the specific ID in the css file, then on every page where you use an ID="myText" you'll get the same styling.
Finally you can define some options which apply to an element, so for example you might change the default colours of links, or alter the font size for everything within the body.
Your editor will probably support applying id's and classes to things, and can almost certainly create divs and spans. It will probably also help you to create the css, but you'll have to make up class names and id's on your own.
There are far more thorough tutorials available online.
goldenfleece 22-07-2008, 22:15 Ideally tables and cells should only be used where you want to display tabular data, everything else should be logically grouped using spans and divs.
Well thats me stumped then....logic? Hmmmmmmmm....in an ideal world yes, but if the page LOOKS ok, I guess it does not matter too much what kind of code it is....I don't have the time to learn CSS at this stage, but it sounds fascinating...
its a pity there is not some software that can take a standard HTML web site structure and intelligently render a CSS version.......or perhaps there is???
.... if the page LOOKS ok, I guess it does not matter too much what kind of code it is....
There is a valid argument there.
However separating content from style has other benefits in maintainability.
Some will suggest that the extra style code in your page can affect search engine rankings negatively.
The extra style code in the page makes the file size larger so more to download when viewed (there are still plenty of people out there not on super doopa speedy DSL connections ;) ).
its a pity there is not some software that can take a standard HTML web site structure and intelligently render a CSS version.......or perhaps there is???
I'd be impressed if someone had created something like that - let me know if you find one!
I would imagine that some WYSIWYG editors can manage linked stylesheets and update the CSS dynamically as you change styles on the page. I couldn't name one that does I'm afraid.
The extra code in the page makes the file size larger so more to download when viewed (there are still plenty of people out there not on super doopa speedy DSL connections ;) ).
But then you could argue that not having lots of HTML formatting all over the page makes the file size smaller, especially if you use an external CSS file that needs downloading just the once (amazed how many people use in-page or in-tag CSS definitions).
But then you could argue that not having lots of HTML formatting all over the page makes the file size smaller, especially if you use an external CSS file that needs downloading just the once (amazed how many people use in-page or in-tag CSS definitions).
Isn't that what I said? :confused:
goldenfleece 23-07-2008, 11:03 All valid points......lots to thinkabout, but for the time being, think I will have to manage without CSS because it will just slow me down when I start work on the site next week....I guess it can all be changed at a later date, and there are programs like HTML SHRINKER that can shrink down the code by removing repeated and dead tags, and make each page load much quicker.
Style sheets have the ability to change the layout of your site without having to edit every page to change the colour of your page background, text size and rollover colours.
It also cuts down on the amount of formatting code which is good for accessibility.
There are lots of FREE CSS templates (http://www.freecsstemplates.org/css-templates/)on the internet that can quickly get you going.
Isn't that what I said? :confused:
Sorry, DaFoot. I read it as extra CSS style code making the file larger, as opposed to HTML formatting.
No matter - I think we mean the same thing! CSS is the way to go.
For any serious web project you must seperate the content and presentation. If not, you are limiting the output devices which can be used with your project, and so limiting the re-use of your components.
If you're going to do it right I'd recommend this book :)
http://www.amazon.co.uk/Build-Your-Website-Right-Using/dp/0975240293/ref=wl_it_dp?ie=UTF8&coliid=IU98GTBS2N7B5&colid=2CLEVDKKR3YFD
But as everyone says it's all down to separation of presentation and content, semantic markup etc. Also I've found WYSIWYG editors tend to slap <div>s around anything you want to do any complicated styling to which is unnecessary. You can usually just style the element in question :)
I use CSS with external header and footer files. So the actual content pages look as follows:
<? require('header.php') ?>
<h1>Title</h1>
<p>Content</p>
<? require('footer.php') ?>
This lets me change everything (not just the look) with 3 files.
Results of a search for "CSS Generator" (http://uk.altavista.com/web/results?itag=ody&q=%22CSS+generator%22&kgs=1&kls=1)
I'm surprised there are so many
abbasinho 24-07-2008, 08:14 I found the best way to learn CSS is trial and error. Dedicate a couple of hours or so a week to it, you'll soon see what is possible. Also, buy a quick handy guide to CSS. I got a book years ago while I was still at college called ''Learn CSS in 10 minutes" - this basically had a load of tutorials that took 10 minutes to complete. I just used, and still use, this book as a reference point. It only cost me about 8 quid. It's all well and good looking around on google, but if you've got something tangable next you on your desk, you can quickly pick it up and refresh your memory straight away. I used to read that book on the train on the way to college, I soon got the gist of it.
If you're just starting out how to learn why not download a trial version of dreamweaver and have a play around with that for 30 days. You can then have both your html page, and your stylesheet open at the same time and view the changes you make on your stylesheet in realtime.
In time you'll find it much easier to despense with this and move onto using simple text editors as you'll get to grips with handling code.
All in all, as what with what was said before, you should really only use tables for tabular data - not for laying pages out. But I can understand why people still use tables, afterall I used them all the time a few years ago and some people like to stick with what they know.
goldenfleece 24-07-2008, 09:36 All in all, as what with what was said before, you should really only use tables for tabular data - not for laying pages out. But I can understand why people still use tables, afterall I used them all the time a few years ago and some people like to stick with what they know.
probably most true, but I wonder how many websites use older methods. It is a pity there are no WSYIWYG editors that handle all the code for you so you just work in a MS Word type environment designing the important bit (like standard HTML WSYIWYG software). Some let you write whole web sites without even opening a txt editor to view that ghastly code.
The bit that the public sees is what matters I tentatively suggest. 99% of people looking at a web page will not care what the code is, if its up to date, or whatever, as long as the page delivers the information they are seeking.
I ask about CSS to see if there is any software that can do everything for you, as this is what I am used to with 'old fashioned' web site software from the pre CSS days, most of which is still available on the net and has never been abandoned.
Up until Apr this year i used software called Web Express from 1996, and which still used standard html coding from 1996, and it worked fine. But I thought it was time to move on maybe a few years.....
There's ones out there, you create a box (aka div) drag and drop and resize it, you can then add your content and other divs, if something clashes or doesnt work right it will tell you (you can set the standards to transitional, or strict etc) and can recommend a fix.
cant think of the name of the one im thinking of tho, but I saw it in use recently.
goldenfleece 24-07-2008, 09:58 There's ones out there, you create a box (aka div) drag and drop and resize it, you can then add your content and other divs, if something clashes or doesnt work right it will tell you (you can set the standards to transitional, or strict etc) and can recommend a fix.
cant think of the name of the one im thinking of tho, but I saw it in use recently.
If you come across it or anyone knows what this software is, please let me know, be most interested to see it in action. I took a look at a CSS file on the net and it scared me!!! I thought javascript was bad enough....I don't think my brain works in the pure 'logical' way required to take to this stuff without a real struggle....
I wouldn't say that CSS is logical, i'd say it was obvious.
You have a div called "moo" and you want to change the font colour to vivid red..
#moo { color: #FF0000; }
easy, change the font?
#moo { font: ariel; }
Job done.
Take a look around at http://www.w3schools.com/css/ -- thats what I looked through and read, very obvious explinations and so easy to understand.
I wouldn't say that CSS is logical, i'd say it was obvious....
At least it is obvious for simple stuff like changing font.
Once you start playing with the box model, positioning, inheritence and flows it gets soo much more involved. ;)
I think telling people CSS is simple and straightforward is perhaps a little too easy. It does take some getting used to and there are some principles (eg position types, box model etc) you have to understand to exploit the more interesting features.
abbasinho 24-07-2008, 10:20 I wouldn't go anywhere near Javascript until you know the magic of CSS.
If you're not up for paying money for something why not try this http://www.w3.org/Amaya/ - it's a free WYSIWYG web program from the guys at W3C - it's got be worth a look.
There are quite a few CSS editors around. Personally I used TopStyle on windows (back in the Macromedia Homesite days) but there are few good ones for Mac too. The editor lets you set compatibility (IE6, CSS2 etc) and displays all the css tags available for that level. It also gives you a preview of what the element will look like as you write (lets you import your own page if you want to see how the style works on that). After a while you will just remember the tags and will be able to write it in notepad.
I think Ghozer you may be thinking of something like Layout Master for drag 'n' drop CSS layout? http://www.westciv.com/layout_master/
No longer supported but still available as freeware.
I use Style Master from time to time (from the same site/developers). Their tutorials are superb.
probably most true, but I wonder how many websites use older methods. It is a pity there are no WSYIWYG editors that handle all the code for you so you just work in a MS Word type environment designing the important bit (like standard HTML WSYIWYG software). Some let you write whole web sites without even opening a txt editor to view that ghastly code.
The bit that the public sees is what matters I tentatively suggest. 99% of people looking at a web page will not care what the code is, if its up to date, or whatever, as long as the page delivers the information they are seeking.
I ask about CSS to see if there is any software that can do everything for you, as this is what I am used to with 'old fashioned' web site software from the pre CSS days, most of which is still available on the net and has never been abandoned.
Up until Apr this year i used software called Web Express from 1996, and which still used standard html coding from 1996, and it worked fine. But I thought it was time to move on maybe a few years.....
The point of CSS is not for the people looking at the site, it's for the developers (in this case you) who has to maintain that code in the future. And for a lesser extent to support multiple different viewing styles, eg Opera on a phone, some idiot using WAP, us on our PC's and someone else on the Wii.
|
|