Confused about body element in CSS

HTML-CSS
1

Hi there,

I am SUPER new to this coding business. I am currently following FCC’s learning modules and I am on the “Basic CSS: Inherit Styles from the Body Element” portion.

I guess I’m confused as to why I can just type body into the style element without making it a class.

Like I type it in like this:

body {
background-color: black;
}

as opposed to typing it in as a class, like they’ve been teaching us for the last several tutorials, like this:

.body {
background-color: black;
}

I hope this question makes sense. I guess it’s more of why does it work without the “.” in front of it/why is body not considered a class??

Thanks in advance!

2

anything placed inside the style tags (<style>your style rules go here</style> ) are interpreted by your browser by default as CSS rules. CSS rules take the form:

identifier {
  style-property: value;
}

Identifiers are used to refer to elements or parts of the associated HTML document. The style rules that follow the identifier name (the part inside the curly braces) are applied the the element that matches the identifier.

Identifiers come in various forms, the three most common identifiers are element identifiers, class identifiers and id identifiers. Element identifiers refer to elements by the element name (i.e. the words in your HTML file that are in between the “<” and the “>” delimiters). For example:

<body>
    <div id='luna' class='cat'>
        <p>
        </p>
    </div>

    <div class='dog'>
         <img href='pie.jpg' />
    <div>
</body>

In the previous example “div”, “body”, “img”, and “p” are all element identifiers. Any style applied to one of these will affect all elements of the same type. For example if I add a style that sets the background color for “div” element to hot pink, then the two div elements in the code sample above will have their background color set to hot pink. Element identifiers are represented in your CSS code by typing supplying the element name with no “.” or “#” in front of it:

body {
   background-color: black;
}

Refers to the bady element.

In your average HTML file you will have many elements of the same type, many of which serve similar purposes. So we need to have a way to refer to all div elements that serve the same or similar purpose. One way to refer to a group of elements is to give all the elements in that group the same class name. You do this by setting the “class” attribute on each of these elements to the single desired name.

<body class='GOD'>
    <div class='dog'>
    </div>

    <div class='cat'>
    </div>

    <div class='dog'>
    </div>

    <p class='cat'>
    </p>
</body>

Here we have several elements of different types. Some are assigned to the “dog” class and others are assigned to the “cat” class. Notice that the elements in a class do not all have to be of the same type. In this example we have a “p” element and a “div” element that are assigned to the “cat” class. Any style applied to the “cat” class will affect both the “p” and the “div” elements that are assinged to that class. We style a class by referencing the class name as the identifier for our CSS rule, we reference a class identifier by supplying the class name prefixed by a “.”:

.cat {
    height: 20in;
}

Notice the dot “.” in front of the class name “cat”. Notice also that in this example is assigned the class name “god” to the body element, i could have just as easily have assigned the body element the names “dragon”, “grandma” or… “body”. HTML files have only one body element, so it is usually not necessary to assign a class to the body element. But if we did (and only if we assigned the class by setting the elements class attribute), we could reference the body by using either the “body” element identifier (without the leading dot “.”) and we could also use the “.body” class identifier (notice the leading dot “.”).

id identifier are similar to class identifier in that you create them by setting the "id’ attribute of a given element. Notice my first code snippet, i had an elment with and id attribute set to “luna”. Unlike with classes, there can only be one element with a given id, each id must be unique. id identifiers are refernced in CSS rules by supplying the id indentifier name with a leading hashtag “#”.

#luna {
    state: lazy;
}
1 Like
3

Sorry the previous answer was so long. But in short if you would like to do this:

then you would have to dot his:

<body class="body">
1 Like
4

Note on the above post: while you can write HTML like that (the <body class="body">), don’t actually do that. It’s not good practice for 3 reasons:

  1. You should try to avoid putting styles on the BODY element, unless you know what you’re doing (there are special uses for styling the BODY element), because the BODY element isn’t directly visible. In general, put styles on visible elements, not invisible elements.

  2. Using a class name of “body” on the body element makes no sense. Usually you should use class names that add some sort of semantic meaning to the element that you’re putting them on. This is a better example of how to use class names in general:
    <p class="blue">Some blue text.</p>

  3. The body element is a special-purpose case where if you do want to style it via CSS, you should apply it directly to the body element, and not to a class on the body element. For example:

/* CSS reset */
body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Or base page styles */
body {
    background-color: #222;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
}

/* There really aren't very many other reasons to be styling the body element... */

For more info on HTML elements, classes, and IDs, this link may be helpful: https://www.w3schools.com/css/css_syntax.asp

Avoid putting classes on the body element in your HTML.

<body> <!-- don't add a class here! Use CSS to select the 'body' element instead -->
    <!-- your page content here -->
</body>
3 Likes
5

Ah, okay! Thank you, both of these answers clarify my basic understanding of classes and CSS styling. Thank you. both :slight_smile: @astv99 @zebedeeLewis

1 Like
6

You can style the <body> tag if you wish, but using a class for body is not useful. Use an ID for greater specificity and control.

Classes are for declarations that will be used in more than one place on a document and/or on more than one page. ID’s are unique identifiers.

The <body> tag represent the content of the document, the <body> tag is not invisible. Since the body tag can be styled, I don’t know why you were told it wasn’t directly visible, the body is the entire document itself.

Here’s a snippet of CSS I used in a project to illustrate some of what styling you can do with the <body> tag;

body {
  background-color: rgb(238, 238, 238);
  font-family: 'Source Sans Pro', sans-serif;
}

I want the background to be that color with equates to the hex #eee and I want those fonts to be used for the entire document unless I specifically place a value on a property (such as an <h2> tag).

Instead of W3Schools, which states in the footer on every page;

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

I suggest to people that they go to the MDN Docs. So in this case, read through Learn to style HTML using CSS - Learn web development | MDN

I’d also point people to http://www.w3fools.com/

Today, W3Schools has largely resolved these issues and addressed the majority of the undersigned developers’ concerns. For many beginners, W3Schools has structured tutorials and playgrounds that offer a decent learning experience. Do keep in mind: a more complete education will certainly include MDN and other reputable resources.

If you want to really have an educated and thorough understanding of the cascade, the spec, and CSS as a whole, I suggest MDN over most anything.

I’d rather get my information from a lot of people in the industry that know what they are talking about rather than a nameless bunch running a site that no one has ever known who is behind it.

Folks can say they have helped a lot of beginners, and that is fine and good, but over the years, and I have seen it since the inception of the site, they don’t practice what they preach and if I’m learning and when I am teaching others, I have plenty of other reliable resources that I find more reliable.

Lastly, I leave it up for debate elsewhere. w3schools: The Ugly, the Bad, and the Good

Good luck!

1 Like
7

I agree with you here mate. Over the past few weeks I find myself using MDN a lot, as a matter of fact up until recently I didn’t even know about the site. Whenever I need to really understand a topic and I want a very thorough technical explanation of the thing I would definitely turn to MDN the quality of their stuff is superb.

That being said, I still find myself going back over to w3school whenever I just need a quick overview and simple example of how to use a component or rule. Although I found that Their website tends to be stuck in a perpetual load, it gives me the what I need for what i need it for at the moment. Then later on I can research the component deeper on MDN.

I must say that it is a bit sad that w3school seems to be falling off lately. I remember when I first started to dabble with front end development a couple years back, the material I found on the site was extremely useful and gave me a decent foundation.

1 Like
8

I understand the process of going to w3schools, because they gained a monopoly on search engine queries through whatever means they had before Stack Overflow took the reins from them.

Quick peeks to remember something or how-to-do? Sure, I’m not a total standardista bible thumper, I get that. I use SO the same. I don’t use W3S anymore, haven’t for a number of years. MDN has much of what I need and if I need anything more in-depth, I take to Twitter and usually I have someone pointing me to an article or site that gives me the information on what I need. :slight_smile:

1 Like