What's the big deal? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

cwilkey -> What's the big deal? (4/7/2004 17:29:28)

Can someone please explain to me the signifigance of using CSS? I understand that it keeps things consistant throughout the site however, why not create one page and use the "Save As" option opposed to "Save"? What other benefits are there?



jaybee -> RE: What's the big deal? (4/7/2004 17:47:54)

css separates the layout and style from the content.

This has a lot of advantages.

1. Screen readers only see the content and users don't have to listen to reams of stuff on bold, font, etc before they get to the text.

2.Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in files external to your HTML documents. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing a single CSS document. If you have ever tried to change the font or color of all the headings in all your Web pages, you will understand how CSS can save you a lot of work.

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

3. Your pages become a lot smaller without all the formatting stuff. They download one hell of a lot faster.

Where's Gorilla when you need him. I'm sure he has a book on it. Probably wrote it himself too.

To be fair, the downside of css is browser compatibility, It's getting better but it can still cause some horrors if you are trying to do the entire site in css.



Shirley -> RE: What's the big deal? (4/7/2004 19:05:26)

quote:

3. Your pages become a lot smaller without all the formatting stuff. They download one hell of a lot faster.

Unless you have a huge css file to download as well



c1sissy -> RE: What's the big deal? (4/7/2004 21:30:15)

Hi cwilkey welcome to the forums.

I think that a good suggestion for you would be to read some of the tutorials that out front has on css, and try some things out for yourself. Also look around at some sites that have been done with css to see how things are done.

Try it out for yourself ask questions. Best way to find out what it is all about.[;)]



Giomanach -> RE: What's the big deal? (4/8/2004 3:47:42)

I was gonna answer this before I hit the sack last night, but nope, Jaybee has said it all

Dan



jaybee -> RE: What's the big deal? (4/8/2004 5:19:20)

quote:

ORIGINAL: Shirley

quote:

3. Your pages become a lot smaller without all the formatting stuff. They download one hell of a lot faster.

Unless you have a huge css file to download as well


Yes, but the point is, you're only downloading one css file which then applies to all the pages.

If you have a different css file for each page then....... pardon me for saying...... you're not doing it right.



c1sissy -> RE: What's the big deal? (4/8/2004 7:01:29)

quote:

If you have a different css file for each page then....... pardon me for saying...... you're not doing it right.


You are correct on this one Jaybee.

However, I do have one situation that this would be different for. I'm doing a site for a friend who was kind enough to let me play with his site to get in some practice with css.

The way his site is designed the pages are all different. However, the code elimination due to tables, font and b elements have been totally reduced. In a situation like this I am using an embeded style sheet. A linked would not work in a situation like this, I don't think.

And Mrs. Moderator does stand to be corrected on this [;)].

btw, I'm totally luvin changing this over and seeing it look like he has it set up!



Giomanach -> RE: What's the big deal? (4/8/2004 7:04:23)

I'm currently running a revamp on http://aa.1asphost.com/glimangia and everything but the image at the top left is CSS based. There's only the forum that hasn't been Christened with CSS[:D]



jaybee -> RE: What's the big deal? (4/8/2004 7:24:52)

Mrs Moderator Maam. I think you're approaching that one the right way.

I'm not a big fan of sites that layout each page differently. I'm of the opinion that all pages should have a common element otherwise the whole thing looks disjointed.

If that's alright with you Maam that is. [:)]



c1sissy -> RE: What's the big deal? (4/8/2004 7:59:55)

quote:

I'm not a big fan of sites that layout each page differently. I'm of the opinion that all pages should have a common element otherwise the whole thing looks disjointed


This is true, however, would this not depend on what is on the site?

[;)]



Giomanach -> RE: What's the big deal? (4/8/2004 8:08:34)

<throws my hand in the bag whilst mom slaps it[:D]>

Can I just say the following:

Having every page to a different design and layout, whether the colour(color) scheme os the same or not, IMHO it make the site look ever so amateurish (scuse my bluntness). As Jaybee has said, all pages within the site should be set around one layout and design, colour(color) scheme can change, but only to suit the pages within the site.

Changing the layout to me would automatically degrade the sites quality.

</throws my hand in the bag whilst mom slaps it[:D]>

OK, you can rip into me now

Dan



jaybee -> RE: What's the big deal? (4/8/2004 10:40:05)

quote:

ORIGINAL: c1sissy

This is true, however, would this not depend on what is on the site?

[;)]


To a certain extent yes but I think you still need something to unify it.

Could be layout, could be colours or logo but it needs something.

(Psssst. Now she's going to tell us she has some radical new thing that none of the above applies to) [;)]



cwilkey -> RE: What's the big deal? (4/8/2004 11:20:57)

That all sounds great guys. Thank you for your feedback. I guess I never really bothered with CSS because I typically use "Includes" when developing a site to maintain consistancy and ease of use. I am however very interested in the fact that it can seriously cut down load time.

Okay so, what's next. How do I get started? Is there a good FREE CSS editor I can download somewhere?



Giomanach -> RE: What's the big deal? (4/8/2004 11:27:17)

Ummmm, hows about Notepad???? Either use the Outfront tutorials, or go to http://www.w3schools.com or learn from someone elses stylesheets

Dan



lilblackgirl -> RE: What's the big deal? (4/8/2004 11:38:46)

tell her about the book . . .



c1sissy -> RE: What's the big deal? (4/8/2004 11:46:58)

quote:

Okay so, what's next. How do I get started? Is there a good FREE CSS editor I can download somewhere?


You are actually better off learning CSS before using an editor. You need to understand the cascade and how it works, as well as tons of other things.

There is a tutorial in outfronts tutorial section on CSS, and in the links section here in css forum, there are lots of links. Read the posts in here and you will find more links to tutorials etc...

Its best to know what you are doing before you go to an editor to use that for styles.

And you can always come here to post your questions, someone will always answer it for you, or try to find the answer. Look for Elizabeth Castros html css book, I believe it is the 5th edition that you would look for. It is an excellent book to get you started.

Dan,
The site that has the different layouts for the pages is a professional looking site. Trust me[;)]



bobby -> RE: What's the big deal? (4/8/2004 11:47:29)

quote:

why not create one page and use the "Save As" option opposed to "Save"? What other benefits are there?

I'm not sure you're understanding the purpose of CSS...

Creating one page and using it as a "template" of sorts is a great idea, I do the same thing... open, change content, File > Save As "newpage"

That not only helps to keep your pages consistant, but makes it faster and easier to create new pages. So far, this has nothing to do with a Cascading Style Sheet.

Now for CSS...

Imagine that after you created 20-50 pages (using your "template" method above) and suddenly your client decides they want Verdana font instead of Arial... or the page background should be light blue instead of dark blue...

Or you change your mind about your navigation buttons and you want them to look a little bit different, or you want to change your hyperlinks so that they don't have an underline when you hover over them... etc, etc, etc.

Without CSS your best option is to use some kind of global find and replace feature or program...

With CSS you open a single text document, change the detail you want to be different, and it magically applies to all of the pages... including your template page that will be used to create new pages from that moment on...

Every page that links the CSS in the header will apply the styles, and changes to those styles...

Check out this site:
www.labordegroup.com

The color blocks you see on the left are all done in CSS, so is the layout and positioning of the pages. If I wanted to change the layout and look of the pages I can modify my CSS page and suddenly all the changes I make to that one file are applied throughout the website.

(There are only 4 images used in that entire website...)

If I wanted to I can modify the CSS to place those colored blocks horizontally across the top, diagonally through the middle of the page...stacked on top of each other, etc.

All from a single page in the site...

So you can see that CSS is a very powerful tool for creating, managing and editing your page styles, layout, look, feel, etc.

Even if you only use it for your BG color, fonts and links... you'll notice how easy it is to work with CSS... and you'll wonder how you ever got along without it.

I highly recommend perusing this site for more on CSS:

www.w3schools.com/css

Good luck!

[8|]



jaybee -> RE: What's the big deal? (4/8/2004 14:49:37)

If you want to see examples of how changing the sytle sheet can change the entire layout whilst keeping the content the same then go to csszengarden

Mrs Moderator Maam, can we have a look at this site please? Still don't understand [8|]



c1sissy -> RE: What's the big deal? (4/8/2004 19:00:41)

quote:

Mrs Moderator Maam, can we have a look at this site please? Still don't understand


I would need to ask first I don't want to post without asking about it first. [;)]



Shirley -> RE: What's the big deal? (4/8/2004 20:18:40)

quote:

Yes, but the point is, you're only downloading one css file which then applies to all the pages.

If you have a different css file for each page then....... pardon me for saying...... you're not doing it right.


My point exactly. You cannot say it ALWAYS reduces load time. If you don't do it correctly it does not reduce download time at all and can even increase it.



Peppergal -> RE: What's the big deal? (4/8/2004 20:53:45)

quote:

Notepad??


NOTETAB!!!!!!!!!!!!!!!! Notepad stinks.



Giomanach -> RE: What's the big deal? (4/9/2004 0:01:23)

IO've got notetab, I just can't seem to get to grips with it, yet.......



Peppergal -> RE: What's the big deal? (4/9/2004 0:45:54)

If anything, it's worth it's weight in that you have...<drum roll>.tabs for multiple docs open at once!! Great when you're doing a lot of cutting and pasting and wanna keep things seperated.... Plus, it's got "find and replace", you can change the text case easily...it's tons more powerful than Notepad, and I don't even use half its features. You can strip HTML tags, insert HTML tags around a paragraph or word or whatever... change the case of HTML tags, insert indents or bullets...mmm, mmm...you can search the document, you can instantly go to a certain line....wow, I cannot believe you, my friend, are not taking full advantage of Notetab. It's also got some CSS commands (?) you can add, either embedded, linked, or inline, though I've not used that yet.

You can also use it to add doc types to your html documents, as well as keywords, description, etc.

Holy smoke, you've got yourself a corvette in the garage and you'd rather use the Model T!!!



c1sissy -> RE: What's the big deal? (4/9/2004 7:37:38)

I like homesite5. Search and replace tags, has a validator with in it to help you locate those mising nested items etc..

Totally love this program for doing any hand coding whatsoever.



JointComms -> RE: What's the big deal? (4/9/2004 8:37:20)

I use NoteTab for it's powerful search and replace feature amongst other things

If you don't like hand coding, I've used StyleMaster and TopStyle.



Peppergal -> RE: What's the big deal? (4/9/2004 9:06:14)

Ahhh, but, is homesite free like notetab? Notetab is pretty darn powerful. The licensed version (I think it's only $9 or so) has a spell checker too. the "Pro" version of NoteTab is only $20, I think. I can't believe how powerful the free version of it is.

I've never used homesite so I am not going to say Notetab is better than it, but it is a gazillion times better than Notepad.



bobby -> RE: What's the big deal? (4/9/2004 12:58:16)

Give me a basic text editor for CSS files any day... Notepad works just fine, what are you talking about? [:D]

I prefer to type my styles out long-hand... Front Page works fine for that, so does First Page 2000. My favorite is Quanta Plus (Linux) but most folks have never heard of it, or have a Linux box to try it out.

Notepad is usually what I use when I need to just open the CSS file quickly and add a ";" or something... it's faster then the others...

[8|]



Peppergal -> RE: What's the big deal? (4/9/2004 19:19:39)

I use it mostly for copying and pasting, and I use the multiple tabs to keep different javascripts seperate. If I want to copy a block of text and put it in a html document, I paste it into Notetab first to eliminate any formatting. I am often working on two or three different webs at once and the tabs help keep my text to copy/paste seperated.

I have used the Seek/Replace in it as well. I generally use FP for making my CSS and HTML coding, but use NoteTab quite a bit.

It came in really handy for me the other day. A client emailed me three paragraphs to put on his web. I copied and pasted them in Notetab. then I remembered that FP doesn't put <p> and </p> in automatically when you paste text into the document; usually it just puts <br> in. So I highlighted my text in NoteTab and clicked "Paragraph" under HTML tags, and PRESTO, automatic <p> and </p> tags.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375