CSS Positioning workshop – Phil

In todays workshop we were looking through the following in HTML and CSS

Basic structure elements

  • The Head Section
    • always comes before the body
    • only hold generic information (title, link, script and style)
  •  The Body Section
    • contains content of the website/application

Block Elements

these are used for different sections of the document but also can be used in CSS

  • <p> </p> paragraphs of the content. This enables a force between the texts surrounding and enclosed also could use <p align=”centre”> </p> at the beggining to centre texts or according to where you want the text to go.
  • <h> </h> headers of the content it can go up to 6 levels of importance. divide the sections
  • <div> </div> division of the contents
  • <blockquote> </blockquote> indented text

Inline Descriptive Elements

  • <em> </em> Italics
  • <strong> </strong> Blod
  • <cite></cite> citations
  • <code> </code> spacing

unordered and ordered lists

  • <ul></ul> unordered list; each item has a bulletpoint
  • <ol><ol/> ordered list; each item has a number
  • <li></li> list element


  • <!– add comment–>

Purpose of CSS

CCS stands for Cascading Style Sheet

CSS is the skin of a website (HTML is the body) this means that CSS allows the content to be displayed in the way you want it to. CSS can be used in 3 different ways, one way is internal sylesheet (which is put into the HTML), the other is external style sheet (which is put into a different file but then linked to the HTML) and last but not least Inline Style (which is by putting the CSS within the tag of each section).

Inheritance is a process which CSS properties applied the one tag are past on to nested tags.

CSS Rule Structure

  • is made up of a selector and a declaration.
  • a declaration consists of property and value; selector {property: value;} ; a selector is any of the following body, h1, em, p etc.

IDs and Classes

  • IDs are unique and can only be used on the page once (#)
  • Classes can be used as many times as you need it to be used in a page

Properties and values tell an HTML element how to display.

Padding (top, right, bottom, left) padding is the space between the text and the border.

Border (top, right, bottom, left) you can define the entire border.

Margin (top, right, bottom, left) margin is a space outside the text and the border.

Interrupt the Flow; to do a fancy layout; absolute, float, relative, fix.

after we went throught the powerpoint, we then were asked to create a box model website. this was just the basics of Banner, navigation, container and footer. we had 1 hour to create this on our own. once this was created, we were assigned a task to complete by the next workshop this was to create  container, banner, nav, 2 content boxes one within another and a footer.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s