body {padding:0;}

It removes the gap around the edges.

body {background:#fff;} (or whatever color is appropriate)

It is being used just to be granted that white has been choose as default for background , for each browser’s.

form {padding:0;margin:0;}

The form is important not th input.

ul {margin:0;padding:0;}

Padding and margin are set to o.

a img {border:0;}

For margin you will add it if necessary.

IE. behaviors

Behaviors are a certain way to add HTML elements with the use of CSS style.

How can we make exception and avoid problems? Behavior is supported only by IE. What to use else ? = JavaScript and HTML DOM.

1.Typewriter Simulation

The following HTML element has a <style> that defines an behavior for elements with an id.

XML document :

2.Mouseover Highlight

HTML file has a <style> element that defines a behavior for the <h1>.

XML document:

The concept gives you the chance to specify how your document shall be presented in more typo of media. The difference stands in the layout presentation, on the screen, on the paper, with an aural browser.

Media Types :

Attention, some CSS properties are designed for just a certain media. And other properties can be used for different media. “font-size” can be used also for screen and also print media, but with different values.

Media Rules :

Certain rules gives you the opportunity to use some style rules to different media in the same style sheet. The following examples has 14 pixels font, that tells to the browser to display it on the screen. Though if the page is printed, you will need just 10 pixels font. Also see that the font-weight is set to bold, both on screen and paper.

The difference will be seen in a sec, when you will print the page and see under the paragraph under Media Types a different font, with a smaller size, than the rest.

Description

protection : use slides, for projected presentations;

braille : tactile feedback devices

all : type devices

aural :synthesizers for speech and sound

tty : teletypes and terminals for media

Examples :

border-width, border-top-width, border-right-width, border-bottom-width, border-left-width

CSS code:

border,border-top,border-right, border-bottom, border-left

CSS code:

outline-width

CSS code:

height

it shows a block box height

CSS code:

margin, margin-top, margin-right, margin-bottom, margin-left

CSS code:

padding, padding-top, padding-right, padding-bottom, padding-left

CSS code:

outline-style

CSS code:

border-style, border-top-style, border-right-style, border-bottom-style, border-left-style

CSS code:

Examples :

letter spacing

CSS code:

font

CSS code:

font-family

CSS code:

font-size

CSS code:

font-style

CSS code:

text-align

CSS code:

line-height

CSS code:

text-transform

CSS code:

font-weight

CSS code:

white-space

CSS code:

font-variant

CSS code:

text-indent

CSS code:

word-spacing

CSS code:

vertical-align

CSS code:

text-decoration

CSS code:

Definition of Specificity

In short words Specificity determines on which CSS rules is being applied by browser. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.”[Understand Specificity]

All selectors have their specificity. “All rules in your style sheet carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.”[Understanding Specificity]

Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup. It’s a simple enough process, but has caught out a lot of developers at some point in their career. [Selector Specificity]

Principles

• Unequal specificity: “A selector can contain one or more reference points, the greater the specificity rating of these reference points the more specific your rule is.” [Understanding Specificity]

For a while CSS is no longer something that represents what we call ‘unknown’. The following so called article/tutorial will teach you what CSS is and what it can do for you. So CSS is an acronym for Cascading Style Sheets.

What can we do with CSS ?

Simple and with no more other introduction, CSS is the language that defines layout of HTML documents. CSS is covering lines, height, width, fonts, margins, advanced and other things.

HTML is being used to add layout to a website. CSS offers a great and large gamut of option and is more accurate and sophisticated. All the browsers are supporting CSS today.

There is a difference between CSS and HTML ?

First HTML is being used to structure content, and CSS for formatting structured content. The composition may sound lit bit mechanical though in few seconds we will show you the difference.
Back, in the early times when world wide web was just at the beginning , HTML was used just to add structure to text. Everyone could use HTML tags like <h1> and <p> just to mark the text.

Slowly the world wide web gained popularity and to make look better the layout for the online document, HTML was upgrade, especially the tags, was add such as <font> which was lit bit differed from the original.

So some situation where led, by this HTML upgrade, and the original tags where misused to layout pages instead of adding structure to text. And some browsers where not supporting some tags.

So, here was invented CSS to repair the situation and to provide to web designers a sophisticated and large gamut of opportunities to change the layout, which was supported by all browsers.

Benefits of CSS

It is used for web designing. The benefits include :

• permanent control of the layout to document from a style sheet; (more if necessary)
• more control of layout;
• possibility to apply different layout to media-types.
• techniques and advantages.

Example of tags that we will use to layout the content :

<h> Heading tags that range from are <h1></h1> to <h6></h6>, these are going to mark the headings in the pages. <h1> shall be the most wrapped and the last important <h6> tag.

Example :

<h1> CSS Template </h1>

This sends to search engines and browsers that the first page is about ‘CSS Template’. Each browsers have a default size <h> tag. Some of these defaults are not unusable for example <h1> they are too big. But CSS can be easy to change, and we will use CSS to make the text more linking.

<p> We are using the paragraph tag just to mark parts of the pages that are ‘paragraphs’. They are ‘block element’ ; that means where ever a space is inserted a block acts.

<ul> and <ol> will be used to make the menu. <ul> tag make a list tag which makes a list with bullets or images/icons but no order is being specify. <ol> tag represents the ‘ordered tag list’ and make a list, distinct of bullets, list elements which are marked with numbers and letters.

<div> We are using <div> just to create containers for parts of our page. The main attribution of <div> will be to “hold” the menu and also to “hold” the main page.

<a href> The most important in HTML : the hyperlink tag. This make the text hyper so when we click on it we can load another page or we are able to activate a JavaScript.

<img> The image tag, gives you the permission to link to images.