Tell us what’s happening:
I am using CSS to try and apply a font family, size and alignment to the entire document through the “body” element, but it isn’t working. I have searched the web and still haven’t been able to figure it out, please advise!
first
codepen expects you to put what goes inside body tags in the HTML box, what’s inside style tags in CSS box, without the tags
reason why it doesn’t work what you are doing is that many elements have a default styling for some properties (if you try giving a color to the body, that will be applied to all children elements)
for the font-family, is roboto one of the common ones? or you would need to import it?
Hi, thanks for the reply. I’m still not following 100%. Should I be using something other than ‘body’ to apply to all the elements?
And yes, roboto is one of the common ones. I have it applied to the title, so just trying to make it apply to the entire page without individually coding each element
Hi @blythegreen, Roboto is not a common font. A common font is one that is available on most computers. Fonts like Ariel or Helvetica.
A font like Roboto (btw, case is important) is available from Google fonts. If you want to use it on your page you have to either link to it in the head element or import it in CSS.
While you tried to call Roboto in the title if you look at your title you’ll see it’s a serif font. Roboto is a sans-serif font. If you are seeing Roboto on your page it’s because you downloaded it.
Let me know if you need help with either linking to it or importing it.
Hi Roma, thanks so much for the info! I must have misunderstood when I originally put roboto in as the font; I thought it was a common one. I have switched it to Helvetica but I am still having the same issues. I am curious as to why the following code in my CSS won’t apply to everything within the ‘body’ tags on my html? Here’s the link to my code.
Thanks so much!
body {
font-family: Helvetica;
text-align: center;
font-size: 12px;
}
So as ieahleen stated, there are certain things that codepen does for you.
In the HTML section, it applies the boilerplate template for you and only expects the code that you’d put between the body element.
It’s forgiving if you add some of the boilerplate elements.
In CSS it’s not forgiving. If you put in the style elements it randomly messes with your styling. Delete the style elements and you’ll see things will center.
So it’s a good practice to just put in the HTML section what you’d put between the body elements w/out including the body elements and in CSS put everything you’d have between the style element.