: Do and don't do with styling and tags When I look at some CSS style for a web page, I typically first look at styling the <html> and <body> tags and then I look at other
When I look at some CSS style for a web page, I typically first look
at styling the <html> and <body> tags and then I look at other
sub-elements.
The styling of <html> and <body> tags is quite confusing by many web
designers and I haven't find out some guidelines clarifying this topic.
So I'm creating this question:
Which styles can be applied to <html> and <body> tags (which create
such base for a typical web page)?
And what is good/bad technique?
More posts by @Chiappetta793
3 Comments
Sorted by latest first Latest Oldest Best
Short version:
<html> - typically only add what you absolutely have to
<body> - again add judiciously
As your project grows the CSS specificity can and will come back to bite you if you're not careful.
Some more details and resources you may find useful
HTML is highly permissive, there are tons of ways to accomplish a task, espeically in layout. This generally leads to lots of opinions about what is "best". For me I turn to people that are well respected when looking for a starting point.
In this instance I'd start with Normalize css. It is not the "end all, be all" but I've found it to be a good place to start. Plus when you look at the normalize.css file it has lots of very good comments that help explain the choices that were made. It isn't going to tell you what you can/can't put in, but I think it does a good job of sorta laying out what a level base can look like.
After that your project will probably want for some structure. The structure of one's HTML and CSS will go a long way to understanding how and why choices are made. One source of "good code smell" is SMACSS, it's a structure I'm working on putting in my work flow. SMACSS is not the only solution, but it can help you understand your project and how to put good bones under it.
If you are interested there are several other good CSS structures to look into: OOCSS & BEM
Finally I like to see how other working professionals do their work. Several major sites have put up posts about how they work, one that I particularly liked came from Trello's blog. Looking at things like this is good because it's not just the theory, it's the toughts of people using these tools day to day to solve real problems on real sites.
None of these alone will solve the question of "What to do put in/how to style <tag name> ?", but they will serve as guide posts that will lead you to the solution that works for you, your team, and your project(s).
By convention, most styling should be placed in the <body> element.
But there is one important reason to apply styles to the <html> element itself: when you are setting the default font styles, in particular font-size. This is because the <html> tag is the root element, thus rem (root em unit) sizing is based on whatever is set for the <html> element.
An example of this is as follows
html {
font-size:12px;
}
body {
font-size:16px;
}
.em-block {
font-size:1.2em; /* Renders to font-size: 19px */
}
.rem-block {
font-size:1.2rem; /* Renders to font-size: 14px */
}
The only other real scenario why you would need to style the <html> element is if you, for some really odd reason, didn't have the body take up the full HTML element. This is rare and generally not recommended, but I have seen it done before. In this case vh, vw, vmax, and vmin would all be sized relative to the <html> element, not the <body>.
You can put other styles that you want inherited in the <html> tag, there is no rule saying you cannot, it's just not recommended or conventional and can be overridden by its children, particularly <body>.
you are supposed to apply styling to body tag. Like set the background color to white, set font, font color, font size etc. You should always use external style sheets. For better management and handling, you should use multiple style sheets.
body {
background-color: #56473 ;
font-family: Arial;
font-size: 1.3em;
margin: 5px;
or anything you want here.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.