Grow your CSS skills. Land your dream job.

Which comes first – cart or horse?

  • # September 12, 2008 at 9:20 pm

    I’ve read about CSS but I obviously have not read enough!

    What I know is that you can use CSS to give your website a consistent look and feel. Also, using CSS you can immediately change the whole of your site merely by changing the CSS coding. So far so good.

    Now consider Dreamweaver which, again, I’ve only looked at briefly and am no expert. If you open a new HTML page in Dreamweaver (NOT a CSS template) when you start entering basic text you obviously have to define your font, text size etc. So at what stage then do you go on to code the CSS style sheet? Should you do that first and, if so, does Dreamweaver automatically apply it?

    Alternatively, do you design the HTML page using a ‘bog standard’ font like Arial 12 pt and then subsequently go on to code a CSS style sheet to apply the changes you require?

    I hope this makes some sort of sense to you guys (and gals!) who are more expert than me and I’ll be interested to see your replies!

    # September 12, 2008 at 10:18 pm

    Well, I guess it all depends on the coder where they start.

    Personally, when I’m coding my XHTML/CSS I do them both from top to bottom. I start with my header, and put the HTML code into my file, than I go to my CSS file and for those HTML elements I write the required styles.

    For example, say my header consists of my business name on the left in red and to the right my phone number in black. In my HTML I put my business name say in an h1 tag with an id/class "logo". My phone number in an h2 with an id/class of "phone". Next I go to my CSS and define my styles – for example floating the h1 left, defining a font size, color and weight. Same for my "phone" class.

    I’d really stay away from dreamweaver as a beginner. I think starting with dreamweaver can lead to bad habits. I’d say start from scratch in notepad (or my fave notepad ++) and don’t rely on something like dreamweaver to fill in any gaps. This way you are in control of EVERYTHING and don’t get mixed up by apply dreamweaver styles, etc.

    For your stylesheet changes to be reflected when you access the file via a browser in the head of your HTML you must link to the stylesheet. Once linked the HTML will tell the browser that (ex) "style.css" is the stylesheet for this document and the browser will then apply all of the styles you have set.

    I hope that helps you and makes some sort of sense!

    As for the second part of your question – I’m not exactly sure what your asking so I’ll try to answer as best as I can :)

    In my CSS I define a standard font, color and size/line height for the body tag. This will then apply to all text on the page, and alternatively when I want to change something I use CSS selectors or assign ids/classes for items I want to have different styles.

    Did that help?

    # September 13, 2008 at 12:36 am

    I always write the markup first, and leave it pretty much style-less. Once I’m happy with it, I move on to CSS. It can be a large headache trying to style your page well (in addition to making it cross-browser compliant) if you don’t have a solid markup foundation.

    I also agree to aim for a simpler IDE when developing sites

    # September 13, 2008 at 9:54 am
    "CharlieBabbage" wrote:
    If you open a new HTML page in Dreamweaver (NOT a CSS template) when you start entering basic text you obviously have to define your font, text size etc.

    I think this is an important point where you might be getting hung up. When you are working in your HTML page, you should not be "defining your font, text size, etc." You should be putting that basic text withing appropriate tags like <h1>, <p>, etc. Then you pop over to your CSS, and define font and text size over there.

    That’s where that separation comes into play. No styling information exists in the HTML at all, all those pages just reference a single CSS file. So when that CSS file changes, they all change.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".