14 replies [Last post]
jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

Usually css code:

1. found in page's head eg.

- OR ------------------------
2. or is being called by something like this (also placed in head section):

---------------------
QUESTION:
---------------------
Let's forget questions like "Why would you want ...?" and so on.

Is it a big no-no to place (or call) css code inside of tags?

Say ... dedicated block of css classes right above element which needs them to look and perform the way it was designed for.

Can this way create (or may create) any very unwanted results?
eg. speed loss, interactions, browser problems ....

It does work, but ...

What do you think?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 18 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi jeffz2008, Adding styles

Hi jeffz2008,

Adding styles as a block in the body would not be valid so your page will be rendered in quirks mode by some browsers.

If you need to style a specific element then put the styles in the tag eg:<div style="background:red; border: 1px solid blue;"> Blah </div>

Most people try and stay away for that for reasons such as code maintenance.
It's harder to change the styles by sifting through html files then managing it all from within a stylesheet.

Another big benefit of using a stylesheet is that the browser can cache it and load it quicker on the next page of the site.

Hopefully that is enough to turn you to the path of enlightenment :rolleyes:

jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

Thank you tony .. just one more "but", if you do not mind

css file loads quicker (as it is cached).
If I keep eg. style.css file, but also put some styles in header
a. will it slows down greatly page load?
b. is it valid at all

-----------------------

--------------

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 6 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

In addition too...

In addition to what Tony said...inline styles (putting styles in with the XHTML)is very poor use of CSS. CSS was created to separate style from content. Also, when you have the two separated and have very well constructed and meaningful XHTML, if you ever want to redo the site all you have to do is create a new style sheet and not have to touch your XHTML (that is if you dont want to change the XHTML).

jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

Thank you CupidsToejam

...

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 1 day ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:css file loads quicker

Quote:

css file loads quicker (as it is cached).
If I keep eg. style.css file, but also put some styles in header
a. will it slows down greatly page load?
b. is it valid at all

b. yes it's valid, an external CSS sheet referred to by and also a tag in the

a. depends. Thing is, the first time someone goes to a page on your site, they load (for the first and final time) your CSS sheet, and your HTML page. If they then go to another page on your site, they do not load the external CSS file again, but they of course have to load the new HTML... at this point they are also loading the new CSS in the . Some larger sites do this to keep some small style changes that are page-dependent out of the main CSS (I usually stick everything in one external styesheet, but I've not built a page which has thousands of pages either : ).

That css is not cached (other than, as that particular HTML page is cached if people go back to that page with the Back button) and so cannot refer to other pages.

I do often have an external CSS sheet and then internal CSS for demos. The page styles stay external and are cached, while just the CSS for the demo itself is loaded with that page's CSS. So, all other pages don't need that CSS anyway, so I'm keeping my main CSS sheet lighter. But mostly, I just want people to see the styles with the demo and not confuse them with the page styles.

I'm no expert, but I fake one on teh Internets

jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

Thank you very much Stomme poes

That was very helpful to increase my understanding of how css "fires up" during browsing

jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

just one more question concerning speed

if I put some of css into header:
how much performance-wise I'm going to loose?

Reason for asking:
I can make css in header dynamic (I can embed variables into it), so it is a big difference (to me at least ... and my scripts).

Jeff

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

In today's faster machines,

In today's faster machines, and mostly higher bandwidths, you'll take only a trivial performance hit unless you get crazy or something).

One item of concern is using scripting to set/reset/ style rulesets. In most cases, that is a poor choice. Better, usually, is to alter the class or id attribute, and have ready-made rulesets in the css file.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

you are very right, yet ...

Gary,
Thanks for reply.

1. you are right: Safari and its little brother Chrome do not like it and mostly ignore it (at least that's what I noticed).

2. preparing a few classes and then "shuffling" them as needed using eg. php, or asp is best.

However,

if you prepare quite longish ruleset and you want to alter dynamically just one attribute ... say in
".css_jspop ul li:hover dl a, .css_jspop ul li a:hover dl a" ... Wink

it means (at least to me with my still inadequate css knowledge) making almost cc of this ruleset with minor attribute change and using it when need arises.

As a coder (better or worse, but still) I always try to minimize number of lines of code and squeeze as much as possible performance from that cut-down code, so multiplying lines of code for the sake of minor change does not sit right with me.

Can't wait for dynamic css:)

Triumph (not verified)
Anonymous's picture
Guru

jeffz2008 wrote:... Can't

jeffz2008 wrote:

... Can't wait for dynamic css:)

What can this so-called "dynamic css" accomplish that CSS along with server side or client side scripting can't?

jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

There is always more than one way to "skin a cat"

... if you pardon my "uncool" saying so.

Here's example - again Triumph, please remember, I'm true css "newbie".
---------
You have ruleset 200-300 lines long.
You want to change single attribute, say: top:130px, to top:400px

AFAIK (and practically do) you have to cc entire ruleset and use them as needed in your website.

You can make 1, 2 ... welll ... even 50 of such ruleset. Lotsa code, guessing and work ... but "us coders", we have plenty of time (at least our bosses tend to think so:).

WHAT IF !!! ...
you do not know value of our example "top", as it changes dynamically and can be pretty much anything from 100px to 1000px?

That's when dynamic css could come handy ... don't you think?

(of course sample top is just a sample)

Triumph (not verified)
Anonymous's picture
Guru

Is something really handy if

Is something really handy if it only accomplishes the unnecessary? I don't really respond to what-ifs (too many laws and political campaigns are based on them though), how about a real-world example where it would be necessary?

No offense intended toward your newness.

jeffz2008
jeffz2008's picture
Offline
Regular
Last seen: 10 years 29 weeks ago
Timezone: GMT+1
Joined: 2008-11-12
Posts: 20
Points: 9

do not judge entire "Creation" from your perspective ...

things unnecessary to you ... may be vital to others (or vice versa - vide: religion, or ... dynamic, multi-iterface project I was asked to take a whack at ... which would be easy with dynamic css and is hellish without:)
--------------------

but to more practical matters:

a question:
why Safari and Chrome do not react properly to a css file if it is not linked in the header of main document ?

I try to link it on specific page (as I need it only there) and zipo ...
when I link same css in index page ... works fine.

Other browsers (IE, FF, Opera ... ) do not care.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

I think you've missed the

I think you've missed the point of "practical example". You've said,

Quote:

You have ruleset 200-300 lines long.
You want to change single attribute, say: top:130px, to top:400px

I doubt there are that many properties total, and anyone using that many on a selector is not using css at all properly.

Please give us a specific case where you want the effect, explain the specific effect, and its trigger. At this point, all you've done is ask how high is up, and how long is a string.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.