The previous post on HTML / CSS briefly discusses CSS placed in the header, as well as creating an external style sheet. An external style sheet is obviously the best way to go since it allows for quick control over an entire website rather than just one page and puts less code in your page. Having less code in one page means quicker load time for the browser, less page weight, better search indexing all leading to a better experience for your user. CSS is becoming extremely accessible to all browsers allowing for you, the developer, to use it for your layout.

*Please understand that these lessons are not coming from a guru by any means. I am simply sharing with you my knowledge. I am not saying I know everything, but I do know what it takes to create successful websites.

When browsing the internet, you may come upon websites that are of interest to you. I define the creation of websites into two things. One is a flash site which is completely different then what we are doing, the second is DHTML based websites which we are doing.  When you are viewing the website of interest, take a look at how it is created by viewing its source code. All browsers have this option in the toolbar. If you use anything you find, be appropriate and include a comment in your header.

So lets get busy: First we must discuss Rules.

When starting off, you must understand the idea of selectors. A selector is the thing (element) that is associated (linked) to a particular style. For example, if I wanted all my headers to be Red, I would do this;

h1 {
  color: Red;
}

There are different types of selectors. The first is a Class selector, the second is an ID selector. A selector can have different classes which allows for the same element to contain different styles. For example, if you have two paragraphs on a page and you want them to have different colors you can do something like this;

.one {
   color: Red;
}
.two {
   color: Blue;
}

The above signifies the first paragraph having red text where the second paragraph would have blue text. So to understand classes, we are affecting the <p></p> tag in both instances, but applying specific styles to two different selectors allows us to specifically change things without effecting the actual HTML within the page by just adding a class name to the paragraph or whatever element we are working with. The HTML would look like this;

<p><span class="one">This is my example</span></p>
<p><span class="two">This is my example in my other paragraph</span></p>

Another way to do this could be;

<p>I want to effect multiple sentences within the same paragraphy
changing <span class="one">the color to red here</span>, and then
changing <span class="two">the color to blue</span> here.</p>

Both those examples are acceptable and work properly.

Click here for Teaching HTML and CSS [#8].

Tags: class selector, css, DHTML, html, id selector, rules, selectors, styles, tag, web development, website