HTML to CSS

SkylineObsession

Expert daydreamer
Premium
Messages
4,274
New Zealand
New Zealand
Messages
SkylineObsession
Messages
Mangosaurus
The Gran Turismo Series Center , click here to see, is in dire need of a change. So i'm thinking of converting it all to CSS from HTML.

If i did that (i'd have to find out how first) then would it be possible to make it look exactly the same as it does now?

What are the advantages and disadvantages of converting to CSS?

Is it worth doing or is the site fine the way it is?
 
Originally posted by Mustang-man
If i did that (i'd have to find out how first) then would it be possible to make it look exactly the same as it does now?
Not yet. As anyone can tell, your site is primarily table-designed, and it's only possible to get a similar feel by using CSS 2, which is not supported well by most current browsers (especially IE, which absolutely destroys CSS 2 into useless junk :irked:... Other browsers support it much better). However, for the design part of your page (as in, background color, link colors, text colors, table row/data background images, etc.), you should definitely move to CSS 1.

What are the advantages and disadvantages of converting to CSS?
Advantages -
  • Makes HTML files so incredibly smaller it's not even funny (I'm looking through your site's code right now, and it could be reduced almost in half just by CSS), which translates to faster loading and much better browser support.
  • Easier for you to code... instead of specifying each exact little design specification for each tag, you just assign it a class (ex: class="red_text").
  • So much easier to update site design... you just have to update the CSS, re-upload the file, and all of your HTML files are instantly changed. For example, if you wanted to change all of your links to be white instead of yellow, right now you'd have to go through and change every single link property in every single HTML document on your website, and re-upload the files. With CSS, you just have to modify one line of code in your CSS document, upload it, and you're done.
  • Future compatibility... many current HTML properties are being slowly phased out of standards support, and eventually most will be non-standard, which means absolutely no browser support.

Disadvantages -
  • While support for CSS 1 is excellent, CSS 2 support is, as mentioned above, supported very weakly. However, once it gains greater support, it'll literally revolutionize the way sites are designed (since it'll almost completely eradicate the need to tables, and you can bring objects out of their normal flow, which holds an incredible number of possibilities for web designers).
  • It'll be time-consuming for you to learn CSS and then completely re-write your site - From looking through your code, you won't be able to just simply replace a few things here and there... you're going to have to start from scratch, essentially.

Is it worth doing or is the site fine the way it is?
Totally worth doing. Either way, you're going to have to in the future, because the W3C is gradually phasing out many HTML properties.
 
Thanks a lot, that's just what i was hoping someone would reply with. :)

Is there any page building programme which uses CSS instead of HTML? I use Frontpage Express (old) to do all my sites as i don't know much code. :(

Which is also why i don't have my own poll set up - i use one from HTML Gear because i could never get my one working.
 
Originally posted by Mustang-man
Thanks a lot, that's just what i was hoping someone would reply with. :)

Is there any page building programme which uses CSS instead of HTML? I use Frontpage Express (old) to do all my sites as i don't know much code. :(

Which is also why i don't have my own poll set up - i use one from HTML Gear because i could never get my one working.
Okay. A website needs to be coded in a markup language. HTML is a markup language. CSS is not a markup language. You code your website using a markup language (such as HTML or XHTML) and incorporate your CSS into. Cascading Style Sheets are mainly used to add pretty effects to your webpage and make updating easy. Think of it like a cake. The HTML is the main bit of you cake and CSS is the icing. I suggest you check out http://www.w3schools.com/css/default.asp

Here is what I mean by incorporating your CSS into HTML.

This is my CSS style sheet (stylesheet.css).
041003-css_stylesheet.jpg


In my style sheet I have defined how I would like my text to be displayed on my website. Where you see .text is the CSS selector, which is what your HTML file will look for. Anyway, I want my font to be Verdana, 8pt, bold and blue.
041003-stylesheet2.jpg


That's all good and fine, but my HTML doesn't know there is a CSS stylesheet even there. You must first link your entire stylesheet to your HTML by adding a <link href="yourstylesheethere.css" rel="stylesheet" type="text/css" /> between your <head></head> tags. Now our HTML knows that there is CSS style sheet there.
041003-linkhref.jpg


So, now all that is left is to tell the HTML to use the style sheet. You'll notice I have added a class attribute to my <p> tag. Between the two quotes (" ") I have the words text. If you go back to second picture, in my CSS I named the selector .text. class="text" tells the browser to look in our CSS style sheet for a selector called .text and display it's corresponding values. So, if you called your selector .bob in your CSS, you will need to type class="bob" to display it.
041003-paragraph.jpg


If you have done everything correctly, save your HTML file and open it up. Our text is Verdana, 8pt, bold and blue all without <font> tags! Now, say I want to change the colour from blue to red. All I have to do is go into my CSS stylesheet and change the color: #0000FF; to color: #FF0000; and my text will automatically change from blue to red.
041003-paragraph2.jpg


There is a bunch of other stuff you can do with CSS like defining backgrounds, positioning, borders, and the list goes on. But, explaining that took long enough.

As for Web Authoring programs, any recent programs should support CSS. I used Dreamweaver MX for that short tutorial. Or, you can always code it yourself in Notepad...
 
BTW, a clarification - While Dreamweaver supports CSS, it can only create extremely basic CSS pages... if you want to do more than just change your font and font size, then you'd best do it by hand.

Also, I think you really, really should learn XHTML and CSS front-and-back (doesn't take long), then buy a copy and Dreamweaver 2004 (or even better if you have the money, Studio 2004), and continue from there.
 
Originally posted by KosmikFool
Screw CSS, move it over to XHTML. Haha, that reminds, I have to do that...
Erm, you do know that XHTML and CSS are pretty much reliant on each other, right? (Aside from the small dumb things like closing off paragraph and image tags). But anyway, if you don't use CSS with an XHTML-declared document, then the user's browser will go into quirks mode, which defeats the purpose of coding in the made-for-standards-compliance XHTML in the first place.
 
Been about two years since i posted this, so has anything changed much or would i still have to learn CSS from scratch? I'd rather not to be honest, as i'm not terribly good at learning stuff like this.
I wasn't that good at school, and i can't even remember most HTML codes but the basic <b> <i> <u> <br> and i'm only just remembering parts of <img src="image.jpg"> or however it goes.

Have even less motivation for updating the site now, as it just takes far too long and i'm still not happy with the look of it.

www.gtseriescenter.com

I'm even thinking of deleting a few pages to reduce the workload. 👎
Eventually i'd like to be able to pay someone to redesign and update (to the latest website code stuff whatever it may be) the whole site, but with a million other things to pay for first this may not happen for a few years.

Still use Frontpage Express, and am still hitting barriers with it as to what i can and can't do. Tried to implement a feature that when you click on a link a drop down box thingy appears beneath it with links to all the pages in that category (if you know what i mean) but Frontpage kept mucking it up so i had to scrap the idea.

I really wish webdesign wasn't this hard. :indiff:
 
Back