when to use <style /> elements?


Well-Known Member
My knowledge of html is patchy and what I do know is archaic to say the least. In an attempt to improve my skills, I'm teaching myself XHTML and CSS (using a few books and web resources). Something I cant find the answer to is when/if <style /> elements should be used? I believed that style should only be done through CSS but I'm finding lots of references to the use of style elements within the head. Can someone please clarify if these are outdated documents I'm reading or if there are actually instances where its better to use the style tag?
I must admit that I've not read up recently on any html (taught myself in 2009) but I've never knowingly used <style>! I do all the styling through CSS. I would check out HTML5 CSS3 on the web/books first. But Corrosive will be along soon to put us right!
It may seem a bit backwards but I'm going for XHTML & CSS first as there are plenty of idiot guides.

Corrosive's on holiday this week (I've already emailed him to ask other school boy questions) so not sure if he'll be logging on.
I don't think it's backwards... XHTML & CSS are great - then (hopefully) XHTML5 & CSS3 will fall into place! It seems that you can use them to apply a style locally but to be honest I wouldn't use them. They will just add to the HTML file - and as I understand it that should be lean!
Everything I've read advises against inline styling in favor of a dedicated CSS file but then confuses the hell out of me by explaining how to do everything it's just told me not to do within the html. Up until now, I've skipped past those sections but as they pop up more and more, I'm wondering if I'm actually missing something important.

I've been chatting to a coder mate of mine this lunchtime who recons the only time he ever uses style elements within the html is when he wants an image with rounded corners or to use an over sized image and this is only because he's yet to figure out how to get them behaving properly from within the css.
Corrosive's on holiday this week (I've already emailed him to ask other school boy questions) so not sure if he'll be logging on.

I have a reprieve from decorating this afternoon (we've run out of paint) so can stop you from tying yourself up in knots for a bit...

You are talking about two different things through this thread.

First up you get CSS styles that can sit in the <head> tags of a page and that are denoted with <style type="text/css">styles go here</style> and can be useful when you have page specific styles that will be used on one page only and not in the rest of your website, hence they don't have to 'cascade'. Generally I tend to still stick to external CSS wherever I can because, as Kate says, it adds page weight and it is usually best to have a stylesheet for all the styles of a website cached when a visitor first lands on a website.

You'll find tutorials tend to use styles in the head tags for demo purposes because they can deliver one page (with HTML and CSS) to demonstrate a concept. They'd generally expect you to move these styles to an external .css file for a production site.

Inline styles are different. You might get say <h1 style="color: black">Title Goes Here</h1> where the style definitions are actually built into the tag itself. The only times this may be useful is;

1. because of the rules behind 'cascading' and that inline styles take precedence over all other defined styles so you can override some troublesome CSS. That said, if you can't sort it in the stylesheet then you probably need to learn a bit more!

2. HTML e-mails because mail clients have a nasty habit of stripping head tags and all their contents so tables and inline styles are the way to go with those.

Hope that helps a bit dude and will properly reply to your e-mail on Monday :icon_smile:
Cheers mate. That's made it all a lot clearer for me.

That's good. I wonder if it might just be easier for us too hook up over Skype and Teamviewer and I'll take you through the basics... Up to you but let me know if that's of any interest.