What is CSS?
• CSS stands for Cascading Style
Sheets
• CSS Styles define how to display HTML elements such as fonts, tables,
backgrounds etc
• Styles are normally stored within Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one
Why Use CSS?
CSS is a godsend for web designers because
it saves so much time. CSS enables us to style elements in our website
such as the font - i'll give you an example. Before CSS if a client
rang you and suggested changing the main font that ran throughout your
site you would have to go through and manually change that font yourself.
With CSS you dont have to. As long as you have applied a 'style' to
that font you can simply change the font type in your CSS file and the
change will be seen throughout your site - not just on one page. Thats
the basic idea behind CSS as it enables you to do things that old school
languages such as HTML dont. Web design for me personally doesnt stop
once you've designed your layout in Photoshop, it continues into Dreamweaver.
Making a page look good in Dreamweaver was difficult to acheive, but
with CSS you can control the look of your actual content.
What does CSS look like?
Basic CSS is pretty easy on the eye and
doesnt take that much brain power to grasp! Below is an example of a
stylesheet which includes values for 'bodytext' and 'bodylinks'
<style>
.bodytext {color: #4d4b4c; font-family: arial; font-size: 12px; line-height
: 100%; font-weight: none; text-decoration: none;}
.bodylinks A {font-size:12px; color: #ff9900; font-family: arial; font-weight:
none; text-decoration: none;}
.bodylinks A:link {font-size:12px; color: #ff9900; font-family: arial;
font-weight: none; text-decoration: none;}
.bodylinks A:visited {font-size:12px; color: #ff9900; font-family: arial;
font-weight: none; text-decoration: none;}
.bodylinks A:active {font-size:12px; color: #ff9900; font-family: arial;
font-weight: none; text-decoration: none;}
.bodylinks A:hover {font-size:12px; color: #666666; font-family: arial;
font-weight: none; text-decoration: underline;}
</style>
To get to grips with CSS its really a trial and error process
so its best that you get stuck in and start messing about with styles.
Including CSS in your web site
For organisational purposes the best way (and the way i will show you)
to use CSS is to link to an external file. This simply means that you
dont include your CSS in your HTML files - the reason for this is that
it improves loading times and its neater to store all CSS in one location.
Attatching StyleSheets
Its easy to apply a style sheet. Especially if you have Dreamweaver!
To attach the CSS do the following.
1. Open your site in Dreamweaver
2. Go to TEXT > CSS Styles > Attach Stylesheets
3. Locate the CSS document on your computer
4. Dreamweaver will recognise all the styles in the sheet. To add one
go to Window > CSS Styles.
5. Highlight your text, and then click on the name of the style you
want to apply and bingo!
If you dont have the luxury of Dreamweaver you can attatch the stylesheet
manually. Just add the code you see below to any pages you want to use
your CSS on. Make sure it goes inside the <head> tags.
<link href="yourstylesheetslocation.css"
rel="stylesheet" type="text/css">
I hope you found this tutorial a useful introduction to CSS.
Please head on over to CSS2 RFC for
a more indepth explanation, quiz and more on CSS.
- CSS Menus
- CSS Introduction
- CSS Reference
- 1 About the CSS2 Specification
- 2 Introduction to CSS2
- 3 Conformance: Requirements and Recommendations
- 4 CSS2 syntax and basic data types
- 5 Selectors
- 6 Assigning property values, Cascading, and Inheritance
- 7 Media types
- 8 Box model
- 9 Visual formatting model
- 9.1 Introduction to the visual formatting model
- 9.2 Controlling box generation
- 9.3 Positioning schemes
- 9.4 Normal flow
- 9.5 Floats
- 9.6 Absolute positioning
- 9.7 Relationships between 'display', 'position', and 'float'
- 9.8 Comparison of normal flow, floats, and absolute positioning
- 9.9 Layered presentation
- 9.10 Text direction: the 'direction' and 'unicode-bidi' properties
- 10 Visual formatting model details
- 10.1 Definition of "containing block"
- 10.2 Content width: the 'width' property
- 10.3 Computing widths and margins
- 10.4 Minimum and maximum widths: 'min-width' and 'max-width'
- 10.5 Content height: the 'height' property
- 10.6 Computing heights and margins
- 10.7 Minimum and maximum heights: 'min-height' and 'max-height'
- 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
- 11 Visual effects
- 12 Generated content, automatic numbering, and lists
- 13 Paged media
- 14 Colors and Backgrounds
- 15 Fonts
- 16 Text
- 17 Tables
- 18 User interface
- 19 Aural style sheets
- 19.1 Introduction to aural style sheets
- 19.2 Volume properties: 'volume'
- 19.3 Speaking properties: 'speak'
- 19.4 Pause properties: 'pause-before', 'pause-after', and 'pause'
- 19.5 Cue properties: 'cue-before', 'cue-after', and 'cue'
- 19.6 Mixing properties: 'play-during'
- 19.7 Spatial properties: 'azimuth' and 'elevation'
- 19.8 Voice characteristic properties: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', and 'richness'
- 19.9 Speech properties: 'speak-punctuation' and 'speak-numeral'
- Appendix A. A sample style sheet for HTML 4.0
- Appendix B. Changes from CSS1
- Appendix C. Implementation and performance notes for fonts
- Appendix D. The grammar of CSS2
- Appendix E. References
- Appendix F. Property index
- Appendix G. Descriptor index
- Appendix H. Index