Cascading Style Sheets
Most of the attributes in HTML has been deprecated and replaced by CSS equivalents, deprecated means that they should generally be avoided in favor of the better.
Learning Curve
The learning curve should be very small for beginners as well as experienced web designers, this is largely due to enhanced browser support.
Many web designers are discontinuing support for older browsers such as IE6 in favor for better browsers, this is largely to take advantage of new features which enhance the user experience, and sometimes even makes it easier to maintain the website.
Beginners are encouraged to neglect deprecated attributes and elements, and focus more on CSS as a tool to layout their pages, CSS largely consist of properties written in plain english, most of the time the property name will explain enough for any web designer to imagine how it works, and what it dose, but beginners might require a small introduction to chosen properties, which can be found in many references around the net.
Applying Styles
Inline Styles
This is the less maintainable way to apply styling, and works by the use of the style attribute.
<p><img src="MyImage.jpg" alt="" style="border:0;margin:0;"></p>
Embedded Styles.
This is one of the better ways, but has the disadvantage that the CSS wont be cached as it would with External StyleSheets.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Embedded Styles Example</title>
<style type="text/css">
body {
font-size: 1em;
}
p {
margin:0;
}
</style>
</head>
<body>
<p>Embedded Styles Example.</p>
<p>This Website is using CSS.</p>
</body>
</html>
Note. The code applied on the body matches all text inside body, as well as the later descendants of the body element. While the code applied on the p element will match any p elements throughout the page.
External StyleSheets
This is the best method to apply styles in most cases, and is especially useful for websites. There are two ways to link an External Stylesheet, one is my using @import in the style section, another is to use the link element.
By using @import:
<style type="text/css">
@import url("StyleSheet.css");
</style>
By using the Link element in the head section:
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
Tableless Layouts
CSS allow web designers to create tableless layouts, and more graphically appealing websites by taking advantage of features such as the link pseudo-classes, this may also improve the usability.
Tableless Layouts are usually made by the use of div tag aka division elements, which is used to divide the page into sections. More commonly thought about as layers when combined with absolute positioning.
Position Based Layouts
This is the most powerful type of layout, it gives the web designer full control over the look and feel, and requires less containing elements/divs to work, unlike float based layouts which can get quite complex with multiple columns. The Tutorial CSS Position Based Layouts may also be of interest.
Position based layouts are using the Position Properties of CSS.
Float Based Layouts
This is the most flexible solution, as it works in most older browsers. All through position based layouts are getting more common, the float based are still widely used by many web designers. The Tutorial CSS Float Based Layouts may also be of interest.Float based layouts are using the float property of css.
Client use of CSS
Some user agents may allow users to apply their own styling, which may be applied for either all websites or certain websites the user is visiting. One use of this would be to apply a color for visited links, as some websites are known to disable this functionality.
Related Knols
- HTML - HyperText Markup Language Tutorial/Knol.
Links
- Brugbarts CSS Reference
- The W3C CSS Validation Service - Used to check code for errors.
Comments
Write New Comment ▼
Write New Comment
Sorry! This knol's owner(s) have blocked you from editing, making suggestions, or commenting here.