The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Cascading Style Sheets CSS - I The Basics

Mar2

Written by:
2009/03/02 08:17 AM RssIcon

Cascading Style Sheets (CSS) is a simple mechanism for adding style. It is a stylesheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Today we are looking at the basics of CSS.

Cascading Style Sheets (CSS) is a simple mechanism for adding style. It is a stylesheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Today we are looking at the basics of CSS.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar mark-up language) from document presentation, including elements such as the colours, fonts, and layout.

There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, or by using the Style property of an individual tag, e.g. h1. The style element contains the style rules for the page. But the most common way of using a Style element is by putting it into a external Style sheet. A file with css extension. This is then linked to the HTML page.

Generally each style is made up of a selector, property and value. This is know as a style rule. The selector is normally a html element, eg Body, H1 etc. A property is some property of that element, eg font, color, size. The value specifies the value of that property, e.g., red, 12px.

By using the HTML style element you can define these styles in-line, or within the HTML file. In the header it might look like this.

Note: I had to put spaces in the opening tags for formating issues.
view source
print?

< HEAD>
< TITLE>CSS Example< /TITLE>
< STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
< /STYLE>
< /HEAD>

Putting the style in an external style sheet follows the exact same syntax as above, but without the HTML elements.
view source
print?

H1 { font-size:x-large; color: red } 

But the style could also be in-line to the tag. For example we might want to change the look of the H1 style. h1 style="font-size: x-large; color: red"

An external style sheet may be linked to an HTML document through HTML's <strong class=" html="">LINK element. External style sheets do not contain any HTML elements such as or . The tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.:
view source
print?

<link href="skin.css" rel="stylesheet" type="text/css"> 

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:
view source
print?

<style type="text/css" media="screen, projection"> 
<!-- 
@import url(http://www.integralwebsolutions.co.za/style.css); 
@import url(/stylesheets/hunk.css); 
dt { background: yellow; color: black } 
--> 
</style> 

The important thing to remember, and something that will confuse many and getting running around in circles, is that style sheets are cascading. The load from the top down and the last style stipulated will be the style used. Also each style can build upon the previous one, but if you overwrite a previous property then the last one is used.

So the process generally is as follows. Your External style sheet is loaded, then any imported style sheets are loaded, then the Embedded style from the element is loaded, and finally in tag in-line styles are loaded. This then will be the final presentation of your page style.

Related Reading:

Cascading Style Sheets (CSS) II - Selectors

Cascading Style Sheets - Selectors III

Cascading Style Sheets (CSS) - III - More Selectors

Cascading Style Sheets – Selectors IV – Pseudo-Classes.

Cascading Style Sheets - Pseudo Elements

Tags:
Categories:
blog comments powered by Disqus
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<April 2017>
SunMonTueWedThuFriSat
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print