CSS (Full Version)

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



Message

DaveX -> CSS (7/11/2005 18:45:10)

Can anyone explain to me simply what CSS is and does? Benefits and drawbacks? I know this may sound silly but I just don't get it.



dpf -> RE: CSS (7/11/2005 19:13:12)

css = cascading style sheets... the word sheets is somewhat deceiving because css can be included in your page or in a seperate file. frankly, there are no drawbacks to css. when it first came out, the huge drawback was that the late 90s browsers didnt support it.

at its simplest, css allows you to describe "styles" that are applied accross the entire page or multiple pages with a single line. A few years ago, I was asked to give a price on changing the font in a web site from red to blue - simple, eh? well, I quoted $400 and the owner was shocked. I didnt make the site and it didnt use css - instead, every paragraph in every one of 450 pages had the <font tag with attribute color="red". each had to be changed. an external stlye sheet would have had that description one time accross all 450 pages.

Im not even doing it justice so I will leave it for others to give you a better answer.



DaveX -> RE: CSS (7/11/2005 19:18:08)

So, basically, it's a set of instructions revolving around the layout and look of the site that is refered to by all the pages in the site?



dpf -> RE: CSS (7/11/2005 19:28:20)

exactly..the beauty of css is that it can get incredibly complex and do amazing things but that domplexity, which can be scary, can be arrived at slowly. you can start with very very simple things like control fonts and move on gradually. there are some css zealots here who love to guide newcomers..<smile> ultimately, it reaches the point where it can be used for postioning; placing elements on the screen exactly where you want them and even 3 dimension - oneoverlapping another which previously you needed to do in a graphics program and insert into html as an image.



DaveX -> RE: CSS (7/11/2005 21:26:21)

I'm intrigued...



Tailslide -> RE: CSS (7/12/2005 4:06:15)

CSS is a method that you can use to completely separate off your content and the layout and presentational information. All the layout and presentational info can be stored in one or more separate stylesheets which apply globally across your site. This means that your site becomes leaner and faster and easier to edit. Wonder what your site would look like with a serif font? Easy - just change it in one place and see - if you don't like the result then change it back. About 1 minute's work max.

Because the HTML page will now just have content (and surrounding <p>s and <br />s for instance) the pages download faster and take up less space on the web server - which could save you money!

You could have two (or any amount actually) completely different looks for your site without messing with the content at all - users would be able to switch between site styles by clicking a link which would switch the stylesheet that's applied to the page. CSS Zen Garden is a prime example of CSS used this way - it's the same HTML page with different stylesheets applied. http://www.csszengarden.com/

The downside is that it's a different way of thinking from tables etc - it'll take a while to really grasp it. But then again it took a while to learn tables in the first place! The other major downside is making sure the CSS you use is understood by all browsers. Unfortunately the world's current favourite browser doesn't interpret all the CSS "rules" as it should which can mean a fair bit of fiddling to get sites to look the same in IE as they do in more standards compliant browsers such as Firefox or Opera. (No browser is 100% perfect - it's just a question of scale of incompetence!).

There's quite a nice CSS tutorial here: http://academ.hvcc.edu/~kantopet/css/index.php But you'll find there are loads of resources out there for people learning CSS.

In the end it takes a fair bit of effort to learn CSS - is it worth it? Oh yes - the initial effort will make your life easier long-term. There are some excellent books out there too and we CSS Zealots ([;)]) like nothing better than helping people make the change!



womble -> RE: CSS (7/12/2005 4:07:41)

You're best visiting the Cascading Style Sheets section of the forum then (though try not to get scared off by the cries of 'Help! Why won't it do what I want it to do?!'

Like Dan says, you're probably best starting off with the styling of fonts etc., then moving on to the more complex stuff.

If you're interested in CSS, there's a number of websites that show the possibilities of CSS...

http://www.csszengarden.com/
http://www.tanfa.co.uk/
http://positioniseverything.net/
http://www.meyerweb.com/eric/css/
http://cssvault.com/cat_navigation.php
http://www.alistapart.com/

...just a selection of the sites that inspire me. (Not forgetting of course, here!) I'm sure someone else'll be along with more of their favourite CSS sites.
(Be warned though, it's addictive! [;)] )



caz -> RE: CSS (7/12/2005 6:11:53)

A good place to start is in the Tutorials section on the blue bar at the top of this page where there is a very concise introduction to CSS by Katherine Nolan. An introduction to CSS.

The MS site also has an introduction and training for using CSS with FP2003 here

It's best to understand the editor that you are using as well as the basics of css, so that there is less chance od disappointment/frustration later on.[;)]



DaveX -> RE: CSS (7/12/2005 14:14:08)

So is the CSS stored within a particular page and referenced by other pages or is it stored in the directory?



dpf -> RE: CSS (7/12/2005 14:20:07)

there are 3 types of css
1. in-line where you have a style that only impacts that line of html
2. embedded which is within a <style></style> tag set placed in the head section and which impacts the entire page but only this page
3. external - you place you css in a text file and usally name it with a .css extention and then link to it -every page that links to it will be impacted -- so if you name your file style.css, you add this in the head section:

<LINK href="style.css"
type=text/css rel=stylesheet>
the cascade part derives from the fact that the closest of the three prevails. for example, if the external says that the basic page text is red but the embedded says an H1 header is blue, the headers will be blue. however, if an in-line style for H1 says red, that (and only that) H1 will be red.



womble -> RE: CSS (7/12/2005 14:25:24)

The CSS file's a text file that's saved with the extension css, if you're using an external stylesheet, e.g. styles.css. It's linked to each page of the website in the <head> section - either by something like:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

or the '@ import' directive, e.g.:

<style type="text/css" media="all">
@import "style.css";
@import "advanced.css";
</style>







bobby -> RE: CSS (7/12/2005 15:15:08)

www.w3schools.com/css

great first place to start (though Kathrines tutorial is pretty good too [;)])

Once you start using CSS you will never go back [;)]



DaveX -> RE: CSS (7/12/2005 15:32:04)

Can you add one after a site is built or does it need to go in at the beginning?



dpf -> RE: CSS (7/12/2005 15:40:41)

oh it can be added anytime



bobby -> RE: CSS (7/12/2005 15:43:09)

That all depends really... if you have a bunch of <font> and <style> tags in your page code then it will override the CSS.

You can add the CSS any time... but it may take some work to strip out the old way of doing things...

[;)]



womble -> RE: CSS (7/12/2005 15:50:59)

There's no reason why you couldn't do it on an existing site, though it'd mean going through all your code manually and stripping out all the in-line styles if you're wanting to use an external stylesheet.

Similarly, with CSS positioning, you'd need to take out the tables and replace that with the CSS positioning rules for each element.

IMO it's probably easier starting from scratch so you can really get to grips with the css, especially it you're wanting to using CSS's positioning capabilities. Having said that though, there's no use re-inventing the wheel. My original site was done in FP using a table layout and I'm now redesigning it using xhtml and css. I'm doing the CSS from scratch, but copying and pasting the code from the original site wherever possible to save myself as much typing as possible, then tweaking and closing tags etc so it'll validate. Getting there slowly...[;)]



bobby -> RE: CSS (7/12/2005 16:09:00)

I would strongly recommend saving CSS positioning for later...

Stick with the formatting you use now, only use CSS to help you define it.

For instance, you can designate your table cell widths in the stylesheet while maintainting the table for the basic structure of the site.

Jumping head first into CSS positioning may turn you away from CSS. It's not easy to grasp at first, and never gets easy to impliment across all browsers...

Stick with defining colors, styles, sizes and such... worry about positioning later [;)]



womble -> RE: CSS (7/12/2005 16:16:45)

quote:

I would strongly recommend saving CSS positioning for later...


True. Launching in with both feet isn't a good idea if you want to preserve your sanity, as I discovered [:D]



bobby -> RE: CSS (7/12/2005 16:53:37)

Yep, agreed.

I tried to learn it all at once... for my masochistic mentality it worked out pretty well but for the average joe..?

[8|]



Tailslide -> RE: CSS (7/12/2005 17:15:07)

I did the "CSS or nothing" route too - nothing wrong with me (*twitch*).

I would imagine if you're doing it bit by bit you'll find that you'll reach a point in the CSS learning thing where the balance will tip and then you simply will not want to go back. If that sounds a bit "holier than thou" or smug then it's not meant to - it's just that the more you can do with CSS, the more you'll want to do with it.

You'll start off setting fonts and colours and pretty soon you'll be examining CSS Zen Garden stylesheets and swearing about IE - you'll see (*twitch*) uh huh, uh huh, you'll see...



bobby -> RE: CSS (7/12/2005 17:21:26)

the power to completely change the layout, colors and styles of your entire website from a single document is what enticed me.

[;)]



c1sissy -> RE: CSS (7/13/2005 9:32:31)

quote:

Womble
True. Launching in with both feet isn't a good idea if you want to preserve your sanity, as I discovered


womble, I have to agree with you on this one! This is how I went at it. Full speed and full force. And since there is so much to learn, and this changes constantly, it is better to start with basics and work your way up.

btw, got your email and will reply sometime today



DaveX -> RE: CSS (7/16/2005 21:01:18)

Wow! Thanks for all the input!



womble -> RE: CSS (7/17/2005 6:28:48)

quote:

I would imagine if you're doing it bit by bit you'll find that you'll reach a point in the CSS learning thing where the balance will tip and then you simply will not want to go back. If that sounds a bit "holier than thou" or smug then it's not meant to - it's just that the more you can do with CSS, the more you'll want to do with it.


True. I've all but forgotten how to do table layouts [;)] and if I can only get the floats to behave themselves I'd be happy with CSS...

quote:

You'll start off setting fonts and colours and pretty soon you'll be examining CSS Zen Garden stylesheets and swearing about IE - you'll see (*twitch*) uh huh, uh huh, you'll see...


Ah, swearing about IE! (*twich*) (it's catching!) - most of the problems I've encountered with CSS, IE's involved there somehow...

/dreams of a day we have a standards compliant IE - we can but dream...



FlowerPower -> RE: CSS (7/18/2005 0:34:18)

I'm replying just to give the perspective of someone who only just recently embarked on the journey to CSS nirvana. I guess it's a never-ending journey, really, but I think everyone who's responded above are much further along the road than I. [;)]

I first started experimenting with CSS two years ago, but only did formatting stuff. I taught basic css to junior high school students as part of a basic course on HTML and web site making, but didn't have time to learn positioning properly at the time.

Now, I have a web site for my students made with frames - I can't believe I'm admitting to that [sm=icon_redface.gif] - I've been meaning to fix it up for ages, but just haven't had time to make something new. However, just this last week I have completely redone it - actually, I have made it again from scratch using CSS for both formatting and layout this time. It is really cool, but was also quite frustrating at times when I just couldn't work out the positioning. Luckily, the people here are very friendly and helpful, and I got some help along the way.

I feel that just this last weekend, I have progressed immensely, and don't think I'll ever go back to any other way of designing my site. But I must say I agree with the above posts - you may easily feel yourself getting overwhelmed if you try to learn it all at once, so maybe just use tables for the layout, and use CSS for the formatting at first.

The cool thing, as was pointed out above, is that you can add things incrementally and test them out immediately. I find myself using http://www.w3schools.com a lot, and I like the TryIt editor they have there.

And then when I think I'm done, it's crunch time: http://www.w3.org has a CSS validator which is great for weeding out mistakes.

Good luck, and have fun!



Tailslide -> RE: CSS (7/18/2005 3:53:48)

Thought of something else.

There are loads of on-line sources of information which you will probably come to rely on quite heavily (I do and I've been using CSS for 3 years).

That said - there are a couple of books which are really worth getting.

Designing with Web Standards - Jeffrey Zeldman - Very detailed book about CSS, web standards and other issues facing designers.
Web Standards Solutions - Dan Cederholm - Really excellent, easy to understand book about CSS styling and layouts etc.



jaybee -> RE: CSS (7/18/2005 5:09:12)

quote:

womble, I have to agree with you on this one! This is how I went at it. Full speed and full force.


Me too and my therapist says I'm fine! [;)]



c1sissy -> RE: CSS (7/18/2005 8:06:55)

quote:

Me too and my therapist says I'm fine!


Your lucky then, my therapist wont even come near me now [:D][;)]



briesmith -> RE: CSS (7/19/2005 10:37:02)

CSS is the way forward but you'll still need tables but only for what they're really good at - ie presenting data in columnar format - rather than as a workround for all the things browsers won't do.

Talking about things browsers won't do leads me on to the question of IE versus FireFox versus Godzilla (sic) etc. Browsers usually don't malfunction because of incompetence but because the standards published by W3C and others require, depend on or allow interpretation and it's there that the differences creep in.

Two things are apparent in the browser world.

FireFox is now too big for the volunteer ethic to effectively support and drive it forward; the FireFox team's performance is now at least as bad as the Great Satan's and because it has wider presence it's now attracting the virus, worm and horse makers' attention.

The ever encroaching issue of standards will have the same effect on browser technology it had on COBOL. So many powerful interests will have massive investments in the status quo getting agreement for change will become impossible. COBOL was the programming language but even while millions of lines of it were continuing to be written every day it was already dying simply because it couldn't go forward.

This is the future for web software technology. The ony reason we continue to progress at all is because Microsoft don't give a tinker's for anybody else's opinion; once they're brought to heel that'll be the end.

Can you imagine any committee that included the US and Europe agreeing on anything? Can you hear the French representative ever saying, "that's a good idea, Bill"?



dpf -> RE: CSS (7/19/2005 12:07:26)

quote:

COBOL was the programming language but even while millions of lines of it were continuing to be written every day it was already dying simply because it couldn't go forward.
to me, thats like saying the model T died out because it didnt move forward - it died out because the core designcouldnt handle new develments after 20 years - cheaper and better to start building upon a new and more appropriate core. cobol was a 60's language that became outdated - not suited for objects and clunky - intended for mainframes and attempts to adapt to pc were made but couldnt compete with C based models



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.90625