A brief overview
Not every Internet user is aware that in the early 1960s, the Internet was designed to allow military computer system to interact with each other. Back in the 60s, scientists did not predict that the Internet will evolve, as we know it today. No one knew at that time about Facebook, Google or Second life. Most probably, scientists did not predict that in the future, there will be Internet addicts, and that they can suffer from ADHD (Attention deficit hyperactivity disorder).
With all due probability, not everyone is aware that when browsing the Internet, and you click GO or Submit, you are requesting single or multiple files from a server. The sequence is more complex, in fact, there are various Protocols, and each protocol was designed to perform specific functionality.
To request files from a server (or browse the Internet) you do not have to use Telnet as the old days. That headache is over. Today we have Internet browsers. Just key in the link and the browser will do the trick. Sounds easy, but the Internet browser engine is very complex. The engine must be able to get the user input, send requests and interpret every protocol.
Most Web site owners spend a lot of money on their web site appearance; they believe that having an attractive web site is one of the key features for a successful business. On a personal note, I think they are right.
A dynamic business, leads to a dynamic web site. Besides documentation, Web developers must keep in mind, maintainability and future expansion. To cater for these, Web developers use the Cascading Style Sheets (CSS). The CSS enables Web developers to group all the web site formatting in a single file. If the web site formatting needs to be updated or changed, only the CSS file should be modified.
Task description
This article describes my experience while performing a task assigned by my tutor. The task consists of the following stages:
- Download a sample HTML file and its respective CSS file from www.csszengarden.com.
- Analyze and understand the CSS content.
- Modify the CSS file ONLY to create my own template.
Implementation
Before downloading the sample HTML and CSS, I researched a bit on the association between HTML and CSS in web development and how Web developers can implement styling. In web development, CSS styling can be implemented in three ways:
Inline
Formatting and styling is added within an HTML tag. The following HTML code is an example of an inline style:
Since all formatting values are specified in each tag, Web developers will find it difficult to maintain. Although this approach is still in use, it is not recommended.
Embedded or Internal
Formatting and styling is included/embedded in the HTML file and located within the <HEAD> tag. Styles can be used by multiple tags, making maintainability much easier.
The styles are accessible ONLY within the HTML file, so to keep consistency between web pages; Web developers must copy the style parameters in each web page.
External styles
Formatting and all styles are included in a separate style file and all web pages are linked to the style file. This approach is highly recommended because it enables Web developers to apply changes to a single file. Updates are automatically applied to all web pages. Web pages can be linked by including the following code:
Cross browsers
While performing my research on how CSS can be implemented, I noticed that several Internet sources state; that CSS may behave differently across different Internet browsers. So before downloading the sample files I launched www.csszengarden.com from three of the most popular Internet browsers.
- Microsoft Internet Explorer
- Google Chrome
- Mozilla Firefox
Searching the web I found lot of tips and tricks on how to detect the client browser and change the CSS accordingly.
Analyzing samples
Browsing through the different designs in Zen Garden, I was very impressed how the CSS affects the web page appearance. To be honest, I compared some text between designs to ensure that the content is the same. The CSS is well structured and can be easily followed. Using www.w3cschools.com helped me a lot understand code blocks in both the HTML and the CSS file.
Creating my design
Hover
While I was changing some values in my CSS file, I bumped into the syntax 'hover'. This command was introduced in CSS 1 and enables Web developers to include some animation when hovering. Using the sample files, let us assume we have some text in an <H2> tag and we have the following CSS block:
If we want to change the formatting when hovering on the text, the following block will do the trick:
The different outputs are shown in the screenshot below:
Margin and Padding
For some reasons, I always mix things up when dealing with Margins and Padding. While doing this task I took the opportunity to learn a bit more on this matter. The following image shows the relationship between the Element, Padding, Border and Margin.
Using the sample files, the following CSS block shows how the Margins and Padding can be implemented:
Colors
Colors in CSS are defined using a hexadecimal notation as shown in the following sample code :
By default the text color is blue (#009), the text color will change to green (#060) when users hover the text.
According to http://www.w3schools.com/css/css_colors.asp, the hexadecimal value is a combination of RED, GREEN and BLUE. Having values between 0 and 255 for each color, gives more than 16 million different colors. The good news is that Web developers do not need to remember all colors, many IDEs provide color palettes.
To conclude
After many CSS changes, finally I got it right. The HTML appearance is what I was expecting. The images below shows the before and after.
BEFORE
AFTER
