Div tag and inline styles

  • Div tags are the containers that you put stuff in:

    This sentence is in a div tag
    • <div style="padding: 20px; width: 400px; border: 2px solid #253445; margin:auto">This sentence is in a div tag</div>
  • Divs can be invisible if no styles are applied, but they will determine the layout of your website design:
    • Alignment: center, left or right
    • width and height
    • padding and margins
  • What goes in a div?
    • Text
    • images
    • background images
    • page content
    • javascript
    • Videos
    • <div style="width: 300px; height: 100px; text-align: center; background-color: #F0F8FF; color: #666600; padding: 8px; border: groove 8px #99CCEE;"> This is a test</div>
      This is a test

      Is this <span style="font-size: 48px; color: coral;">perfectly clear?</span>