Cascading Style Sheets (CSS) - How to?

Mp4 · 17 May 2007 at 22:11

Hi all,

I’ve been given a task of doing a new website for a hotel ive been viewing hotel sites the past 2 days and finding more and more sites done via Cascading Style Sheets (CSS) what is the easiest way to lean this new code? And what wysiwyg editor to use?

Jaffa_Cake · 17 May 2007 at 22:16

Dreamweaver is truly amazing at creating CSS style sheets.

Then you just give a tag a class parameter.

<div class="name">

edwardcasbon1 · 17 May 2007 at 22:20

Before you use CSS you must understand what it is.

CSS is used for styling elements throughout your website. You use it to style any element on the page.

I think its best that you look at some tutorials before you go in head first.

Mp4 · 17 May 2007 at 22:22

any links on some decent css tuts ? wich i can follow using either dreamweaver or another wysiwyg program?

pinkaardvark · 17 May 2007 at 22:38

Set your self aside a couple of hours and a pot of coffee and start here

http://www.w3schools.com/css/default.asp

Stellios · 17 May 2007 at 22:54

CSS is a godsend once you get the hang of using it. Its not that hard to use to be honest.

If you dont know what it is then below is a little demonstration of what it can do.

Embedded code in HTML

Code:

<body colour="gray" align="center">
LOL ROFL n00b
</body>

CSS & HTML

CSS

Code:

#main {
text-color:gray;
text-align:center
}

HTML

Code:

<body>
<div id="main">
LOL ROFL n00b
</div>
</body>

As you can see, it is a bit longer, but if you have multiple pages using the same template then instead of having to edit each page you can just edit the one CSS page and change the values for every page so it does work out as less work eventually.

Mp4 · 17 May 2007 at 23:01

would it be more beneficial to just to a straight forward CSS website , or HTML + CSS work better?

Jaffa_Cake · 17 May 2007 at 23:05

CSS contains style information for HTML tags. HTML is required

Stellios · 17 May 2007 at 23:12

Mp4 said:
would it be more beneficial to just to a straight forward CSS website , or HTML + CSS work better?

You still use all the HTML you would as normal, except all of the styling you do (fonts, positioning etc) will be defined within a CSS sheet.

Mp4 · 17 May 2007 at 23:19

okiedokie , with Dreamweaver im seeing allot of Div's ( Draw Layer ) i take it this is all to do with CSS , as i cant make the divs stay in one place via Dreamweaver depending what screen resolution i use. For instance this hotel website is done via CSS http://www.langhamhotel.co.uk/home how do they achieve the white border etc?

Jaffa_Cake · 17 May 2007 at 23:23

You view the source of their page right at the top you see

Code:

<style type="text/css">

under this is the stylesheet (CSS)

Then you see

Code:

border: 6px solid #fefffd;

that is the white border.

Then its applied to the div tag below.

If you want to see a correct example of CSS usage with XHTML then see a project I made a while ago.

Stylesheet:
http://jaf.richieward.com/php/forum/trunk/templates/beta/stylesheet.css

HTML:
http://jaf.richieward.com/php/forum/trunk/index.php

Completly skinned using CSS that entire webpage is

Mp4 · 17 May 2007 at 23:29

#flash {
width: 740px;
height: 200px;
border: 6px solid #fefffd;

but as the css states #flash { how does it know that its the full table as such? looking at that id be thinking the boarder layout is all a flash element if that is correct?

Jaffa_Cake · 17 May 2007 at 23:30

Yeah its unstandard use of CSS. See my example above

Mp4 · 18 May 2007 at 09:16

Jaffa_Cake said:
You view the source of their page right at the top you see

Code:

<style type="text/css">

under this is the stylesheet (CSS)

Then you see

Code:

border: 6px solid #fefffd;

that is the white border.

Then its applied to the div tag below.

If you want to see a correct example of CSS usage with XHTML then see a project I made a while ago.

Stylesheet:
http://jaf.richieward.com/php/forum/trunk/templates/beta/stylesheet.css

HTML:
http://jaf.richieward.com/php/forum/trunk/index.php

Completly skinned using CSS that entire webpage is

So basically , create a basic html site with notepad or dreamwerver after that add the css ontop of the html to make it look sexy? a face lift so to speak?

is it woth buying a book on css?

sugoi · 18 May 2007 at 10:31

use Dreamweaver if possible rather than notepad, especially if you are just starting, if you really want to buy a book you can, but plenty of resources online for it.

rather than saying creating the basic HTML site with Dreamweaver then adding the CSS on top, i would say it's more the other way round, CSS is usually the foundation and structure of the web site. But if you are just changing colours and fonts, you could describe it the way you did.

Augmented · 18 May 2007 at 10:57

sugoi said:
CSS is usually the foundation and structure of the web site.

CSS only ever provides presentational information, so it cannot provide foundation or structure to a site. Markup is what provides structure, flow and a foundation on top of which you can apply your CSS. A well-built website should be just as functional and usable with no CSS, as it is with CSS applied.

Markup is the bricks and mortar, CSS is the paint and furnishings.

sugoi · 18 May 2007 at 11:17

if you put it like that then yes, maybe it's my own personal approach, i probably used the wrong words to describe it, but when i design my web site, i usually start from the CSS, so to me it's my foundation of building a web site.

growse · 18 May 2007 at 11:50

sugoi said:
if you put it like that then yes, maybe it's my own personal approach, i probably used the wrong words to describe it, but when i design my web site, i usually start from the CSS, so to me it's my foundation of building a web site.

If you start with the CSS, you'll end up just fudging and fitting the content to fit what you want to do. How can you have any concept of how to present the content well without first laying out the content in a logical way?

sugoi · 18 May 2007 at 13:09

in the industry i work in, to be brief, we design concepts in Photoshop, the contents, images etc... are laid out in static form and shown to a client, then i use CSS to style the structure of the web site (you probably understand what i mean, just hard for me to explain), i usually do this on paper first, laying out all the divs, and divs which may or may not be embedded within another, then creating each DIV in HTML, then styling each one in CSS and so on....

hope that's better, i know it's brief... i'm not trying to argue whats right or wrong, im just giving my approach to creating a web site. All your opinions are valid.

growse · 18 May 2007 at 14:15

sugoi said:
in the industry i work in, to be brief, we design concepts in Photoshop, the contents, images etc... are laid out in static form and shown to a client, then i use CSS to style the structure of the web site (you probably understand what i mean, just hard for me to explain), i usually do this on paper first, laying out all the divs, and divs which may or may not be embedded within another, then creating each DIV in HTML, then styling each one in CSS and so on....

hope that's better, i know it's brief... i'm not trying to argue whats right or wrong, im just giving my approach to creating a web site. All your opinions are valid.

Fair enough, I'm somewhat familiar with the "do it in photoshop first" method. Personally I find it a lot easier to work with the content in front of me, but each to their own