Margins using CSS

As you may have guessed, the margin property declares the margin between an (X)HTML element and the elements around it. The margin property can be set for the top, left, right and bottom of an element. (see example below)

As you can also see in the above example you have 3 choices of values for the margin propert

• length


• percentage


• auto

You can also declare all the margins of an element in a single property as follows:

margin: 10px 10px 10px 10px;

If you declare all 4 values as I have above, the order is as follows:

1. top


2. right


3. bottom


4. left

If only one value is declared, it sets the margin on all sides. (see below)

margin: 10px;

If you only declare two or three values, the undeclared values are taken from the opposing side. (see below)

margin: 10px 10px; /* 2 values */

margin: 10px 10px 10px; /* 3 values */

You can set the margin property to negative values. If you do not declare the margin value of an element, the margin is 0 (zero).

margin: -10px;

Elements like paragraphs have default margins in some browsers, to combat this set the margin to 0 (zero).

p {margin: 0;}

Note: You do not have to add px (pixels) or whatever units you use, if the value is 0 (zero).

You can see in the example below, the elements for this site are set to be 20px (pixels) from the body

body{

margin: 20px;

background: #eeeeee;

font-size: small;

font-family: Tahoma, Arial, "Trebuchet MS", Helvetica, sans-serif;

text-align: left;

}

Read more...

CSS Spans

Spans are very similar to divisions except they are an inline element versus a block level element. No linebreak is created when a span is declared.

You can use the span tag to style certain areas of text, as shown in the following:

Then in my CSS file:

.italic{

font-style: italic;

}

The final result is: This text is italic.

Read more...

CSS Divisions

Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that make up your website. Including additional divisions, spans, images, text and so on.

You define a division within an (X)HTML file by placing the following between the <body></body> tags:

Though most likely you will want to add some style to it. You can do that in the following fashion:

<div id="container">

Site contents go here

</div>

The CSS file contains this:

#container{

width: 70%;

margin: auto;

padding: 20px;

border: 1px solid #666;

background: #ffffff;

}

Now everything within that division will be styled by the "container" style rule, I defined within my CSS file. A division creates a linebreak by default. You can use both classes and IDs with a division tag to style sections of your website.

Read more...

IDs in CSS

IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same (X)HTML file.

I generally use IDs to style the layout elements of a page that will only be needed once, whereas I use classes to style text and such that may be declared multiple times.

The main container for this page is defined by the following.

I have chosen the id selector for the "container" division over a class, because I only need to use it one time within this file.

Then in my CSS file I have the following:

#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

You will notice that the id selector begins with a (#) number sign instead of a (.) period, as the class selector does.

Read more...

Classes in CSS

The class selector allows you to style items within the same (X)HTML element differently. Similiar to what I mentioned in the introduction about inline styles. Except with classes the style can be overwritten by changing out stylesheets. You can use the same class selector again and again within an (X)HTML file.

To put it more simply, this sentence you are reading is defined in my CSS file with the following.

Pretty simple, but lets say that I wanted to change the word "sentence" to green bold text, while leaving the rest of the sentence untouched. I would do the following to my (X)HTML file.

p {
font-size: small;
color: #333333
}

Then in my CSS file I would add this style selector:

.greenboldtext{
font-size: small;
color: #008080;
font-weight: bold;
}

The final result would look like the following:

To put it more simply, this sentence you are reading is styled in my CSS file by the following.

Please note that a class selector begins with a (.) period. The reason I named it "greenboldtext" is for example purposes, you can name it whatever you want. Though I do encourage you to use selector names that are descriptive. You can reuse the "greenboldtext" class as many times as you want.

Read more...

Default values in CSS for browser compatibility

Every browser has different margin and padding values that are set as default. Thats why we prefer to reset all values before building up a site. Most of people add,
to the top of their CSS file to reset everything. But do you really thing that it is enough to reset everything? Use following code block on the top of your CSS file and see what else you’ve missed to reset.

a:link, a, a.visited
{ text-decoration:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, fieldset,input,textarea,blockquote,th,td,p
{ margin:0; padding:0;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var
{ font-style:normal; font-weight:normal; }
ul,ol { list-style:none; }
caption,th { text-align:left; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

Read more...

CSS to load hover buttons faster

With CSS we can target the ‘:hover’ child class for links and update their background properties.


Example

.nav a:link, .nav a:visited {

width: 160px ; height: 30px ; display: block; overflow:hidden;

background: url(’images/nav1.gif’) 0px 0px no-repeat;

}

.nav a:hover, .nav a:active{

background-position: 0px -30px;

}

The Image itself contains both the normal and hover state. This is called a sprite, using this technique the image needs only be loaded once.

Read more...

Changing Link Colors with CSS

Introduction

This guide shows how to specify link colours with CSS whether you want the same colours for all links or different colours for certain links. Also includes how to change the colour “onmouseover” (hover colour).

Specifying the default colour

If you want to specify the default colours which will be used in a web page you should use the following code. These colours will be applied to all links in the document.
This code specifies that all links should be black (#000000), active links should be blue (#0000ff), links which have been visited should be green (#008000) and the hover colour, when you mouseover the link, should be red (#ff0000).
The text decoration has been specified as “underline” which disappears on mouseover. Text-decoration can be “none” “underline” “overline” “line-through” “blink” or “inherit”. You can also add many other styles such as borders, font-family etc.
Note: If you specify the “color” you should also specify the “background-color”.

Specifying different colours for different links

If you want to have different colours or styles for certain links you need to assign those links a class and write the styles for each class.
Assuming we have two links “Blue Bold Link” and “Red Italic Link” we assign each a suitable class link this:

<a href="blue.htm" class="blue">Blue Bold Link</a>

<a href="red.htm" class="red">Red Italic Links</a>

Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)

<style type="text/css">

a.blue:link {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:active {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:visited {color: #0000ff; background: #ffffff; font-weight: bold;}

a.blue:hover {color: #0000ff; background: #ffffff; font-weight: bolder;}

a.red:link {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:active {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:visited {color: #ff0000; background: #ffffff; font-style: italic;}

a.red:hover {color: #ff0000; background: #ffffff; font-style: normal;}

</style>

You can have any number of link styles on a page once you assign each one a class and specify the styles for each class. Effective use of “hover” can add a lot to a web page. Experiment!

Read more...

History of CSS

To improve the capabilities of web presentation, nine different style sheet languages were proposed to the W3C's www-style mailing list. Of the nine proposals, two were chosen as the foundation for what became CSS: Cascading HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP). First, Håkon Wium Lie (now the CTO of Opera Software) proposed Cascading HTML Style Sheets (CHSS) in October, 10 1994, a language which has some resemblance to today's CSS.

Bert Bos was working on a browser called Argo which used its own style sheet language, Stream-based Style Sheet Proposal (SSP), on October 22, 1993. Lie and Bos worked together to develop the CSS standard (the 'H' was removed from the name because these style sheets could be applied to other markup languages besides HTML).
Hakon's proposal was presented at the "Mosaic and the Web" conference in Chicago, Illinois in 1994, and again with Bert Bos in 1995. Around this time, the World Wide Web Consortium was being established; the W3C took an interest in the development of CSS, and it organized a workshop toward that end chaired by Steven Pemberton. This resulted in W3C adding work on CSS to the deliverables of the HTML editorial review board (ERB). Håkon and Bert were the primary technical staff on this aspect of the project, with additional members, including Thomas Reardon of Microsoft, participating as well. By the end of 1996, CSS was ready to become official, and the CSS level 1 Recommendation was published in December.

The CSS Working Group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2 on November 4, 1997. It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was started in 1998, is still under development as of 2008.

CSS 1

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:

* Font properties such as typeface and emphasis
* Color of text, backgrounds, and other elements
* Text attributes such as spacing between words, letters, and lines of text
* Alignment of text, images, tables and other elements
* Margin, border, padding, and positioning for most elements
* Unique identification and generic classification of groups of attributes

The W3C maintains the CSS1 Recommendation.

CSS 2

CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the CSS2 Recommendation.

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on June 15, 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007.

CSS 3

CSS level 3 is currently under development. The W3C maintains a CSS3 progress report. CSS3 is modularized and will consist of several separate Recommendations. The W3C CSS3 Roadmap provides a summary and introduction.

Read more...

Types of CSS

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.They are

1. Browser default
2. External style sheet
3. Internal style sheet (inside the tag)
4. Inline style (inside an HTML element)

Note: So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value).

If the external style sheet link is placed below the internal style sheet in HTML , the external style sheet will override the internal style sheet.

Read more...

What is CSS?

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!


* CSS stands for Cascading Style Sheets
* Styles define how to display HTML elements
* Styles are normally stored in 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

With CSS, your HTML documents can be displayed using different output styles.A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it's style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on...) are accomplished within a CSS.

Read more...