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

Get Adobe Flash player


Summary:

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: http://codecamel.com/fullheight