Politics, Society and Online Business

    There is nothing worse than a fine mind going to waste ...

    The internet has been the sole catalyst for the longest and most defined period of global collaboration throughout the history of human kind. Never before has there been an invention, discovery of realisation that has encouraged people to work together on such a large scale and at such a fast pace.

    This is unknown territory, humans today are the again map writers, compass builders and parchment makers as we chart the coastline of this new online land. I am part of this community of collaborative development and have a passion for politics, society and online business.

    I write and debate about issues relevant to Melbourne, Australia and the world. You will find my latest thoughts below...



Lesson 1: Cascading Syle Sheets (CSS)


Cascading Style Sheets

Today I am researching basic principles of writing Cascading Style Sheets or as it’s referred to, a websites CSS. The beauty of a generic website style sheet is that the styles you outline can be applied easily across all HTML pages on a website, thus reducing potential workloads in re-writing individual styles for each page on a domain. I have begun my search for knowledge at FriendlyBit with his beginners guide to CSS.

Learnings:

Before you create your CSS sheet you need to reference it in the HTML page you want it’s styles to be implemented in. This is a crucial process and can be easily done by adding this line in the header (<head></head>)of the HTML page:

<link rel="stylesheet" href="style.css" type="text/css">

This line should be added inside the header of every page you wish to apply your styles. The next step is to open up a plain text document or Dreamweaver file to start writing your CSS. The best way to learn is to do. I am going to be using Dreamweaver.

Emil Stenstrom, author of FriendlyBit, states that there are many selectors, however today we will address 3 types of “selectors” in a CSS file.

  1. Element
  2. Class
  3. ID

An Element

An example of an element is <h1> or <p>, it is a HTML tag sitting on the page. By including this in the CSS sheet you are able to control exactly how this element is displayed on all pages of your website. The styles you add into this section of the CSS will effect all elements with this tag across the HTML documents of your website. Let’s give it a go:

/* CSS Document */
h1 {
Parameter1: value1
Parameter2: value2
Parameter3: value3
}		 Real Parameters >> h1{
font-size: 16px
font-weight:bold
color:#000000
}

A full list of CSS Parameters and how to implement them is available here. Remember, the styles associated with each tag in the CSS sheet will apply the style to all tags.

A Class

Writing a “class” into your style sheet is also simple. The same principles apply, if you include a class attribute within a tag, the information within that tag will be affected by all styles written in the class selector. It is is quite simple to introduce a “class” into a section of a web page, but why would you need to and what could you use it for? Remember, the whole purpose of creating a style sheet is to create consistency throughout a website. A class attribute could be used for the comments section of a blog <div class=”blog.comments”>. It could be used for alerts on a website such as warnings and messages <div class=”alerts”>. Or specific to an element, such as a certain set of links being a different color <em class=”outbound.links”>. You will get the jist from those last three examples of how to implement class attributes onto a HTML page, however I have restated them below:

<div class"name.of.class">
<em class"outbound.links>

The <em> selector tag allows you to apply a class or special element (em = element) with a unique style.
For example: <h1>This is the <em class"outbound.links">best website</em>in Australia!</h1>

Let’s now look at how to write the class selector into the style sheet. We will follow the same formula as written above and see how that effects the example given above.

/* CSS Document */
.outbound.links {
Parameter1: value1
Parameter2: value2
}		 Real Parameters >> .outbound.links {
text-style: italic
color: ##FF0000
}

This means that the HTML  <h1>This is the <em class"outbound.links">best website</em>in Australia!</h1> would look something like this: This is the best website in Australia!

A Class

The final selector we will cover in lesson one is a class. An ID works in much the same way as a class. However, an ID is used to define a certain section of the page and in theory a web page can not have two of the same sections. For example, many areas of a webpage could require the “.outbound.links” class. But, an Id which is used to define a specific element can only exist once on the page, like “sidebars”, “headers” and “footers”. You wouldn’t have two headers, just like you wouldn’t build two separate roofs on top of a house. An ID can contain various elements which directly affect that specific section of a website. For example:

/* CSS Document */
#header {
Parameter1: value1
Parameter2: value2
}		 Real Parameters >> #header {
padding-top: 10px
bg-color: ##FF0000
}

Finally, you will have noticed I used live examples above. For the purpose of your records, and mine, I have outlined the styles being applied in the terms they are referred to.

Selector1{
(declaration1)Property:value
(declaration2)property:value
}

Get the idea? I will working on developing a basic Style sheet in the next few days and then start on Lesson 2.

Speaking Engagements

21/12/2008 Teenage Boys Conference - Ausmed

Featured Speaking engagement[...]

Follow me

Twitter