Home arrow HTML arrow Page 3 - New Technologies and What They Mean To You: Part 1
HTML

New Technologies and What They Mean To You: Part 1


In the often confusing world of the web we hear new acronyms tossed around all the time. In this series of articles Jeremy will attempt to demistify some of the most common web related acronyms.

Author Info:
By: Jeremy Wright
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
June 18, 2002
TABLE OF CONTENTS:
  1. · New Technologies and What They Mean To You: Part 1
  2. · HTML
  3. · Cascading Style Sheets
  4. · JavaScript
  5. · Conclusion

print this article
SEARCH DEVARTICLES

New Technologies and What They Mean To You: Part 1 - Cascading Style Sheets
(Page 3 of 5 )

Definition
CSS is an extension to HTML to allow styles, e.g. colour, font, size to be specified for certain elements of a hypertext document. Style information can be included in-line in the HTML file or in a separate CSS file (which can then be easily shared by multiple HTML files). Multiple levels of CSS can be used to allow selective overriding of styles.

As said above CSS can be included in-line the HTML file or in a separate CSS file. The latter usually has the preference of most designers, due to mutliple reasons:
  • You are able to use the defined styles across multiple pages, in stead of limiting the styles to only one page.
  • Updating the lay-out takes a lot less work.
  • It saves you bandwith, although a tiny amount, it might make a use difference with traffic-high sites.
Linking to an external CSS needs to be done in the following form:

<head><title> Linking to an external stylesheet </title><link rel="stylesheet" type="text/css" href="url_here"></head>

Home (http://www.w3.org/Style/CSS/).

With CSS you are able to format your text, form elements and almost every HTML-tag out there. CSS is always written in a special format, which resembles this form:

Tag.class {
attributes
}


The tag reflects the HTML-tag you want to apply the style on, for example <p> or <h1>. You can also assign styles to <td> and <table>, as well as all the form elements from <input> to <textarea>.

The class reflects the id of the class. A class is a specific style, and this nifty feature allows you to use several styles with the same tag. In theory this means you are able to use <p> to make a text black, and <p class=green> to make a text green>

To take a closer look at the exact syntax, and at the same time some basic text formatting attributes and classes, take a look at the following code sample:

P {
Text-align: left;
Font-family: Verdana, Arial, sans-serif;
Font-size: 12px;
Font-weight: bold;
Color: #000000;
}

P {
Text-align: center;
Font-family: Times New Roman;
Font-size: 12px;
Font-weight: bold;
Color: #00FF00;
}


<p>This will produce left-aligned, black text in Verdana with a size of 12px</p>
<p class=green>This will produce centered green text in Times New Roman.</p>

What It Really Is
Cascading style sheets are the graphic designer's dream. The finite control that most designers desire can be achieved to a greater extent by using CSS. Offering desktop publishing style control over content, the future of cascading style sheets is bright, allowing the type of control and freedom over web pages that graphic designers have over print based media. It opens doors to typographical layout and manipulation, page formatting, document structure, colour conformity and uniformity. All in all, CSS provides consistency.

One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. Style sheets help documents to become media independent; documents can be presented in a similar fashion whether they are printed, displayed on a conventional monitor, or interpreted by a special screen reader for partially sighted or blind people.

Style sheets separate markup language, typically HTML from the markup style attributes, allowing authors to make document wide changes from one central document- a real time saver for developers. The benefits don't just stop there though; because content is kept with minimal markup and styles can be applied using an external style sheet, page download time is also reduced- speeding up the browsing experience for site visitors, and also reducing network traffic.

Advantages
  • The amount code that needs to be written / checked / edited is significantly smaller then with just HTML, due to the repeated use of styles throughout the documents.
  • The control over the the documents presentation is much greater. There is no need to dive into all of the pages, and edit them one by one. Changing a few lines in the styles section of your page, or in your external stylesheet is sufficient to change the look of an entire page or in the case of an external stylesheet all the pages.
  • By using CSS you are certain that the presentation of the document is the same, all pages are alike, because of the styles being defined seperately from the HTML code.
  • CSS is also guaranteed to allow rapid conversion of offline material to online material without losing style. CSS even allows you to change the look of your entire website by uploading on external stylesheet and replacing the old one with it.
  • CSS is by far one of the most easier languages to learn of the new media and the Internet these days. There are no difficult syntax rules, the amount of attributes is (compared to other languages) relatively small. Yet, being able to work with CSS means a great difference in terms of document creation and presenation.
Disadvantages
  • CSS is relatively new, and therefore it is not yet widely supported. Although the current browsers are doing their best to support as much CSS as they can, the use of CSS might lead to somewhat cluttered designs, due to the visitors browsers not supporting some of the styles used.
  • Without sufficient workarounds to take care of the above described problem, older browsers (who do not support CSS or do not support it completely) fail to display the content correctly.
Examples
Linking to an external stylesheet:

<head>
<title> Linking to an external stylesheet </title>
<link rel="stylesheet" type="text/css" href="url_here">
</head>


Formatting text using CSS:

Code in CSS file:

p {
text-align: center;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #000099;
}


Code in HTML file:

<p>This text will be formatted as described in the CSS code above</p>

Changing the colors of links:

Code in CSS file:

a {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #0000FF;
}

a:active {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #00FF00;
}

a:visited {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #FF0000;
}

a:hover {
text-align: left;
font-family: Verdana, Arial, sans-serif
font-size: 12 px;
font-weight: bold;
color: #000000;
}


Code in HTML file:

<a href="foo.html" title="Link">Foo</a>

The above link will show up blue as default, green when active, red when visited and when the mouse cursor is hovered over the link it will show up black.

CSS on form elements:

Code in CSS file:

input.text {
background-color: #CCCCCC;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
color: #000099;
}

input.submit{
background-color: #FFFFFF;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}

textarea {
background-color: #CCCCCC
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
font-family: Courier;
font-size: 12px
color: #FF0000;
}


Code in HTML file:

<p>Name: <input type="text" class=text size="25"><br>
Message: <textarea cols="40" rows="20"></textarea>
<input type="submit" class=submit value="Send"></p>


The code above will generate 1 textfield with a grey background, which will contain darkblue characters. The textarea will also have a grey background, and have red letters in Courier. The submit-button will have a white background. All these form elements will have a 1px black border.
blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials