HTML Class – Week 05

by on

Link to all Classes     Week 1     Week 2     Week 3     Week 4      Week 5     week 6

Today’s Class

  • CSS
  • Feedback

CSS

We will continue working through the CSS section on W3Schools: http://www.w3schools.com/css/default.asp.

By now you should understand the purpose or function of CSS. It is mostly responsible for the styling of online documents. CSS is also responsible to view documents for different platforms and outputs.

Examples of Output and Display for web-content. Image: live.surveyshack.com
Examples of Output and Display for web-content. Image courtesy of: live.surveyshack.com

Having CSS allows you to change the font, image sizes, layouts to suit different requirements. The ideal size for a font will be different if viewed on a widescreen monitor or on a mobile phone.

After last week you should be aware of the differences between inline, internal and external CSS: http://www.w3schools.com/css/css_howto.asp

We will go through the Styling related tabs as well as the box model. I will ask you to trial the different options as we work through to the Box Model together.

NOTE: In class we worked through the Styling Backgrounds and Styling Text Tabs. We wook time to look at a number of CSS related aspects and we spend a good time exploring the Styling Backgrounds examples.

Screenshot W3Schools: CSS Background Style
Screenshot W3Schools: CSS Background Style

Make sure to explore these ones in some depth:

Trial the links above and change the code from background-position:right top to left top and change the margin to margin-left:240px. Play around with the settings and observe the changes by submitting them in the TryIt Editor.

<!DOCTYPE html>

<html>

<head>

<style> body

{

background-image:url(‘img_tree.png’); background-repeat:no-repeat; background-position:left top; margin-left:230px;

}

</style>

</head>

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

0 Comments

  1. Pingback: HTML Class – Week 06 | RAE - Research and Exploration
  2. Pingback: HTML Class – Week 06 | RAE - Research and Exploration

Leave a Reply

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

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com 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 )

Cancel

Connecting to %s