CSS Cascading Style Sheets

First add image (.jpg, .png, .gif) into 'images' folder in main root of the site. In HTML code add <img alt="word or phrase describing image" height="162" src="path where image is coming from images/img.gif" width="917" />

go to file menu--> select option "save as" --> then choose the file type "html document" name the file. and you are done

CSS3 (and HTML5) are in the final stages of ratification and so are not yet official releases. Care must be taken with their features as they will not be fully implemented for years. I find that the LCD (Lowest Common Denominator) practice works best!

When you are writing CSS (Cascading Style Sheet) code, you are writing a set of rules that a page's HTML code must follow when rendering the page.

Every block of CSS rules has three important parts: The selector, properties, and values. The selector is what tells the page WHAT elements the following rules apply to, such as all divs with a name of "colorMeRed". Properties are what the page must change on the element, such as it's color. Finally, the value is what that property actually must be set to, such as "red".

All CSS is custom, that is the purpose behind CSS. It allows you to control the presentation of your web pages and separate the rules that govern presentation from the content and markup. You control what rules you develop and set the rules for. CSS stands for cascading style sheets.

A "Skin" is usually a certain format of a page that continues throughout the entire site. If the question is asking to be able to make a "Skin" for the entire site that you can change with just an edit of one CSS file, then here's the answer. To begin, put the CSS you want on every page of your website into one file called "style.css", and upload it to your site. Next, put the following into all your webpages (Or just the webpages you want the skin in); ---- ---- This is an HTML tag. It should be placed anywhere in the

A CSS class is a line of code in your CSS file which corresponds to the HTML equivalent of that class; it is defined with a dot: "."

<div class="test">This is a test.</div>

CSS:

.test { display: block; background: #f90; color: #fff; }

The classes are used to define the style for the individual element of the web page or to determine different styles for the one tag. Syntax for the classes will be the following:

Tag.Name of class { property1: value; property2: value; ... }

Inside of the style sheet the desirable tag is written first, than, after the semicolon - the user's class name. In order to define in HTML code the fact, that tag with the definite style is used, parameter is added to the tag

You may not know it, but a link has four different states that it can be in. CSS 2.1 allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

* active - this is a link that is in the process of being clicked

* focus - applies a style to an element in focus

* hover - this is a link currently has a mouse pointer hovering over it/on it

* link - this is a link that has not been used, nor is a mouse pointer hovering over it

* visited - this is a link that has been used before, but has no mouse on it

* first-child - special style to an element that is the first child of another element

* lang - specifies a language for the specified element

Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:

#content a:link {color: #009900;}

#content a:visited {color: #999999;}

#content a:hover {color: #333333;}

#content a:focus {color: #333333;}

#content a:active {color: #009900;}

Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #content selector to match your division name.

Then for the links in a column you could use the following:

#column a:link {color: #009900;}

#column a:visited {color: #999999;}

#column a:hover {color: #333333;}

#column a:focus {color: #333333;}

#column a:active {color: #009900;}

Once again, this assumes the name of the column division, just change the name to match yours.

This same method can be accomplished by declaring a class instead of an id.

a.column:link {color: #009900;}

a.column:visited {color: #999999;}

a.column:hover {color: #333333;}

a.column:focus {color: #333333;}

a.column:active {color: #009900;}

Though in this case you will need to add a class to each link

&lt;a class="column" href="" title="">some link text&lt;/a>

But, there is still yet an easier way

.column a:link {color: #009900;}

.column a:visited {color: #999999;}

.column a:hover {color: #333333;}

.column a:focus {color: #333333;}

.column a:active {color: #009900;}

It's a more precise way of working. It's also more developed. Using CSS instead of a table to arrange a page is like using a chainsaw instead of a knife to cut down a tree, both will do it, one is more advanced and will do it better.

cimbaue

SPAN STYLE in HTML is used to carry a certain style over blocks of code. This tag can get a little bit complicated for some people. The example I am showing is a very basic example on how to make this happen. For more detailed and more complex ways to use this tag please search the Internet for "HTML Span Tutorial"...

Smasher is <span style="color:green">teaching me</span> how to use<span style="color:red"> HTML tags</span> today.

This would display Smasher is in the default color. Then it opens the span style so the next part will be in green. The tag is then closed so the word how to use would be in the default color. Then we open another span style so the next words will be in red. Now that tag is closed so today would be in the default color.

Again this is a very simple example. This tag usually "Spans" over multiple blocks of code.

font-size

Can be in pixels, ems, cm, in, or a percent. Also can be small, medium, large, etc.

For each item on a webpage, even a piece of a text, you can think of there being a box around it. You can do things like draw borders around the item, define its margins, its size and its position. You define the formatting of the content of it, the space around the content which is called padding. You can define the thickness and style of the borders. Using any or all of these things gives you great control over the items on your webpage. Try this:

<span style="border-width: 20px; border-color: gold; border-style: groove; padding: 5pt; position: absolute; top:5cm; left:3cm; margin:0.5cm;">SAMPLE</span>

Most bowsers have two or three default stylesheets. One for correctly built sites and one for "broken" sites.

External CSS using a separate file ( styles.css) and linked to with the link tag placed between the head tags of all pages using the CSS file.

Embedded CSS used between style tags placed between the head tags of each page.

Inline CSS placed inside a tag using the style="" attribute.

That would inline, as part of the markup on the page. Then there is embedded within the Head element of the page. Lastly there is external where it is linked from the Head element. I have even seen very complicated series of these used with the thought that the last one gets first precedence

Assuming you are trying to change the color of the first letters of a word in an HTML file, there's no actual command, term, attribute, or value to identify the first letter of a word - However, there is still a way to color specific letters using CSS + HTML. Wrap a <span> tag around the letter, in this case the first letter of a word. Give the <span> tag a class name. In your CSS source, give the specific span a color attribute, and the value desired. Example: <html>

<head>

<style type='text/css'>

span.one

{

color: #CCCCCC;

}

</style>

</head>

<body>

<span class="one">H</span>ello, world!

</body>

</html>

1. First, using styles enhance the document. Second, using styles can make the document easy to read.

CSS handles the presentation portion of displaying an HTML document on the web. That is to say that CSS makes things like color, size, shape, weight, etc. possible in HTML.

To say that CSS "enhances" HTML, however, is an over simplification. CSS provides separate and different functionality than HTML does. HTML does not have the abilities inherent in CSS. Instead, the CSS code makes HTML code more palatable for a human user. Most web spiders, for instance, do not employ HTML fully, if at all.

The three primary parts of a CSS definition are:

selector{property:value;}

The selector can be one of three things or a combination of the three. These are element (such as <div> or <img />), id (#), and class (.).

The property can be a number of rules ('background', color, font-weight). A good place to reference these is w3schools.org.

The value is specific to the property. For example, if the selector is 'color', value could be 'red' or '#ccc', but it couldn't be 'bold'.

hold down shift then press the letter key(E.G a which becomes A) to have a capital without using caplock and when you let go of shift which is the arrow which is justa outline press the keys and they wont be caps (e.g abc)

Let following be HTML page:

<HTML>

<head>

<link href='external_style.css' type='text/css' rel='stylesheet'>

</head>

<body>

<p>Hello world</p>

</body>

</HTML>

and following be external css script:

p {text-decoration:underline}

Here is HTML document, in the head section tag <link> is used. Tag link is used to get reference of external style sheet page named "external_style.css" using href property. Both css page and HTML page resides in same directory.

the external css page cannot contain any tags like:<HTML> or <style>

it can contain only style specification like:

p {font-size : 8pt}

H1 {text-decoration:underline}

etc