Where CSS can exist physically in a HTML file

HTML & CSS
1

I am learning CSS. I began learning HTML about 20 years and I know many languages. I began learning COBOL in high school more than 40 years ago but I am just now learning CSS.

I have read articles and books but nothing I have found explains some things about CSS in ways that would help me the most to understand CSS. So I have a question that will help me understand my way. My question is answered indirectly in articles and books but I want to ask explicitly.

I am asking where CSS can exist physically in the body of a HTML file. I am not asking about CSS in the header of the HTML. I think the following are the (at least the common) uses of CSS in terms of where it can exist in the body.

  • Explicit use of styles as “class” and “id” attributes in elements
  • Inline style using the “style” attribute in elements
  • Style tags (in the body)

I know that style tags in the body is not common and that in the body HTML 5 only supports style tags with the scoped attribute. Things like that are not relevant to my question however.

I know that type selectors in CSS within style tags in the header can affect the specified element(s) logically but I am only asking about physical presence within the body.

Does the preceding list specify (generally) everywhere that CSS can exist physically in a HTML file?

2

Ideally you shouldn’t have any CSS at all in the body - just tags, ids and classes that the CSS in an external file in the head use to attach the CSS.

Using CSS directly in the body is supported so that you can test the styles directly applied to the element before moving it into the separate CSS file.

2 Likes
3

I think and could be wrong… that when a web-page starts to render and encounters a style tag the rendering has to start all over again. This explains why the screen flickers.

4

Hi SamuelCalifornia welcome to the forum

I do mostly PHP and JavaScript (and a few other languages to lesser extent, but not COBOL) so most of what I know about HTML and CSS comes from working with the DOM

When I started years ago I did things like
<body onload="myFunc()" font="normal">

It “worked” but troubleshooting and maintenance were not fun.

So I started putting my CSS and JavaScript in the <head> section.

A bit better, but it wasn’t “DRY” and it was still a .maintenance problem

So I then started calling in CSS and JavaScript files in the <head> so I could re-use them in more than one page.

Much better.

These days it is common practice to put most JavaScript immediately before the closing body tag </body>
But AFAIK putting <style> tags in the body is not valid even if it might work.

I do occasionally set style attributes to tags using JavaScript, but only for “one off” use when I don’t feel like giving a class and don’t want to or can’t edit the CSS file.

So I’m guessing you can put your CSS wherever you like that makes sense to you.

But do yourself a favor and validate your pages before you put them up live.

And if you are thinking of using a lot of ids / inline CSS, take a look at specificity rules

4 Likes
5

Explicit use of styles as “class” and “id” attributes in elements
Well this is more mark up than CSS. Tho these attributes often serve as hooks for CSS they are just as a HANDY as ways to target elements with .js
Inline style using the “style” attribute in elements
This is true, but remember that CSS here affects specificity.
Style tags (in the body)
OMG, this reminds me of the old myspace days, where people could alter their page layouts by typing a css tag straight into the content of the page. And while it may still work in a wonky way, it won’t pass validation.

6

As I mentioned in another thread it looks like that allowing style tags in the body ‘may’ change as it solves a number of current issues with loading content progressively in an easy and clear way.

1 Like
7

This is currently the only valid place that css can exist within the body element. But it is not a widely used method by developers today, that approach is considered rather clumsy and difficult to maintain.
It is generally preferred to link to an external style sheet in the head to allow global styling across a whole site from a single css file.

These are invalid, although they may still work, due to browsers being quite forgiving to invalid code.

This is not css, they are a means of allowing css selectors to target specific elements, from css elsewhere, either from style tags in the head or an external css file.

3 Likes
8

If you are thinking of CSS as a programming language that may hinder understanding CSS. It is simply a set of rules that are applied to HTML.

2 Likes
9

I think of HTML as the building blocks of a webpage and the CSS as the paintbrush that gives it life. I have actually seen people who have made a nice looking website without any CSS. Granted it still looked a little funky, but it was doable. A great way to perfect your CSS skills is CSS Zen Garden. Not only can you change the website with your own CSS, but see what other people have done. I have to say it even amazes me when I go to that website to see what can be done with just CSS. :grinning:

1 Like
10

Micah Godbolt’s site micah.codes is an example of where no styling at all has been used, it’s worth reading his opening post to see why he’s chosen to do that and see what he’s trying to achieve. That’s all a bit of an aside though…

The only place I can think of where in-line styling is common these days is in email, which has its own peculiar set of limitations. The whole idea behind CSS, is that’s it’s a single file containing all the styling information needed, that can be referenced by multiple HTML pages. As best I can recall, any styling embedded within the HTML itself isn’t CSS, and once you get beyond a single HTML page, it certainly isn’t DRY, as you’d potentially have to repeat the same instructions many times to build a site.

Personally, I can’t imagine going back to any form of in-line styling, as it makes things much harder to manage in the long term. As those above have suggested, there are ways in-line styling will work, but it’s not a place I’d want to learn from at all. Create a CSS file, reference it in the <head> of your HTML document, work from there and adjust to taste…

2 Likes
11

I’m curious why you are specifically interested with css in the body.
If you are new to css and learning it, the first thing you should know is: keep it out of the body.

3 Likes
12

It is also useful for testing - applying the style directly tells you that the style itself works and then you know you have a specificity problem

3 Likes
13

I’ve generally done that in dev tools, as it means I can try things directly in the browser without going back to the editor - if I’m doing that, I might as well edit the CSS, not the HTML.

2 Likes
14

Somehow I was not clear. I said:

Explicit use of styles as “class” and “id” attributes in elements

That is what I am defining (for the purposes of this discussion) some of the (most common) uses of CSS in the body. You can criticize me for using improper terminology but I really thought that I was being adequately clear. I thought that the HTML class attribute is a critical part of CSS. Am I wrong? Does the class attribute not specify a CSS class? Or are you saying we should never use the HTML class attribute? If so then I am confused about what you mean when you say “just tags, ids and classes”. Are you saying we should or should not do that?

15

Thank you, Mittineague.

I am new here and I am not sure if it is clear who I am replying to. I don’t see a way to automatically quote someone. I am not asking for help with that, I need to find the answers myself, I am just explaining if it is not clear who I am replying to.

I am not asking about best practices and personal preferences, I want to limit the discussion to the language. How it works and/or what its syntax is and things like that.

16

dresden_phoenix, as far as “class” and “id” attributes in elements as more mark up than CSS, the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification describes the use of the class attribute in Class selectors and everything I have read about CSS describes the use of the class attribute very extensively. I apologize for not being clear about what I mean by “use”. The critical point is that I am trying to ask about CSS so I can understand it better.

Most authors have a tendency to be detailed in the initial explanations of things. I read book reviews in which people say the introduction (of the subject, whatever it is) is too detailed, so I am not the only one. If someone can answer the question with minimal personal preferences and best practices then that will help. I am asking for help understanding my way.

17

@gandalf458, if anything I said implied that CSS is a programming language then I apologize.

However it depends on what the definition of a programming language is. To the extent that it is a language with a defined syntax that computers and people both understand, some people might call it a programming language. True, it has no methods/functions and very primitive logic. It is used for the UI part of web pages.

18

@SamuelCalifornia,

Post #7 from @SamA74 currently gives the most concise answer to your question.

 
If you consider this part of his statement to be superfluous…

[quote=“SamA74, post:7, topic:219020”]
But it is not a widely used method by developers today, that approach is considered rather clumsy and difficult to maintain.It is generally preferred to link to an external style sheet in the head to allow global styling across a whole site from a single css file.
[/quote] then feel free to ignore it until you are ready for more information.

 
To quote a selection of text from a previous post,
highlight the text in that post with your mouse, then click the gray “Quote Reply” button that appears just above the top left corner of the highlighted text. The quoted text will be added to the top of a new post, or it will be added at the last place you clicked your mouse within the body of the new post that you have already started or may be editing.

Example shown in this screenshot:

723×192 10.9 KB

19

I think what you are getting at is specificity. And that depends a lot on how the Designer works.

At one extreme, a page would need no class or id attributes and target using only element selectors. eg.
body div p span {

At the other extreme, classes and ids could be given to every element whether needed or not. eg.

<body id="page_body">
  <div class="main first">
    <p class="main first primary">
      <span id="page_keyword">

Usually, a designer chooses to have only what is required to get the look they want as the page is, and might foreseeably become.

20

The class attribute is very important in the use of css. But I would not consider it to be css ‘within the body’ it is a html tag. It is in fact instrumental in keeping the css out of the body, where it belongs.

A class attribute alone does nothing. It works in conjunction with css (that is not in the body), creating a link or association between properties in the css and elements in the html. It being the part of the html that makes the connection, and the selector being the part of the css which makes the other end of the connection, thus creating the link between a html element and css properties.
So the class attribute is no more a part of css, than a css selector is a part of html. They are just the things that join the css and html together, allowing you to keep the two separate.

I don’t believe anyone said that.

The general message is to avoid putting any css in the body. That referring to in-line styles, being the only valid means of doing so. Obviously invalid means of using css in the body should never be used.
The use of the html class attribute is a perfectly acceptable way of targeting elements within the html body for styling with css which is external from the body. The id attribute can also be used, though should be used sparingly when appropriate. You may also select base elements without class or id as appropriate.

The above is of course down to:-

which you say you are not interested in. But when you ask things like…

…it seems that is what you are asking about. If not, please disregard at your leisure.

This is a broad subject beyond the scope of a single post, but extensively covered in numerous references. But if you have any specific questions about any particular aspect of syntax or language, please ask.

5 Likes