How to Insert CSS in Between Body Tags
Cascading Style Sheet (CSS) code comes in three flavors: external style sheets, embedded style sheets and inline styles. In all but external style sheets, you add CSS directly in the HTML file. You should place embedded style sheets between "<style>" tags in the head of your HTML files, but you can put them between "<body>" tags as well. Inline styles go in the "style" attribute of HTML tags and affect only the tags where you place them. Keep in mind that style sheets cascade, so inline styles take precedence over embedded styles, and embedded styles take precedence over external style sheets.
Other People Are Reading
Instructions
-
-
1
Open your HTML file in a code editor or Notepad. Locate tags where you want to add styles and give them the "style" attribute. You can add CSS code between the quotation marks like this:
<div style="margin: 0 auto;">
The above code centers that DIV and no others on the page. This is called "inline" CSS and does not require selectors -- code that "selects" HTML elements -- to work.
-
2
Add a space after your first style rule and add another one, if needed. Your tag will now look like this:
<div style="margin: 0 auto; font-style: italic;">
Add as many style rules as you need, but do not forget to separate each one with a semicolon. It is a good idea to end the last rule with a semicolon, though CSS does not require you to do so. You cannot add more than one "style" attribute to the same tag, though. Place all inline style rules for that tag within the same "style" attribute.
-
-
3
Locate the portion of the Web page where you want to place CSS code. Add "<style>" tags as you would between "<head>" tags:
<style type="text/css">
/* CSS code goes here... */
</style>
Replace the commented line "CSS code goes here..." with your CSS code as needed. Note that your styles will not affect the HTML written above these "<style>" tags.
-
1
Tips & Warnings
Use inline styles to test CSS out on your design, and then move the style to an external style sheet before taking the website live.
Take care when placing "<style>" tags between "<body>" tags in HTML files. Though you can do this without causing errors on your Web pages, the preferred and better-organized method is to place "<style>" tags between "<head>" tags.
