Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Content tag using CSS

    ●   The content of your website goes inside your Content tag.

Learn About:

CSS Code Code Hints HTML tags

  •   If you've been following this series of tutorials, you have created a CSS document with body, html, container, header and navigation tags, and maybe some sort of background image or color.

   •   This tutorial is sixth in a series:

1 - Body    2 - HTML    3 - Containter  4 - Header    5 - Nav    6 - Content   7 - Footer  

Step #1: Content div ~

Hopefully you've done this tutorial first: 16 Navigation Bar

Create a new CSS rule …

new rule

… make it ID and call it content

… set the width to approximately 90%, the margin to auto and the padding to at least 10.



None of these settings are set in Stone!



You may have to change again them later!


Step #2: Click Split ~

Click Split:

Now you can see the code:

Step #3: Find the nav div ~

Find the nav div and click somewhere outside the </div> tag.

Step #4: Clear Some Space to Work in ~

Hit hit enter a few times to make some space to work in:

Step #5: Type < ~

Then type < by hitting this key:

Step #6:   d   i   v ~

Then type:   d   i   v





Again: watch the code hints complete the code for you!


Step #7: id ~

Now hit space and choose id:

Step #8: Content ~

Select content.

Step #9: Close the tag ~

Don't forget to close the tag with >

close tag

Step #10: Type Something ~

Then type something!

Step #11: Close the Tag again ~

Finally, close the tag by typing < again and then / backslash and watch the computer complete your code for you.






Let the computer to write the code for you!


Step #12: View your Work!

Select to view your work.

Last Step: Save and Attach ~

Make sure your new styles.css document IN THE ROOT FOLDER OF YOUR NEW PROJECT, attach it and continue working …

new styles sheet

Other Resources: