Learn CSS Step by Step

Learn CSS Step by Step

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

CSS Thinks to avoid

Here are some technologies you should try to avoid when using CSS.


Internet Explorer Behaviors

What is it? Internet Explorer 5 introduced behaviors. Behaviors are a way to add behaviors to HTML elements with the use of CSS styles.

Why avoid it? The behavior attribute is only supported by Internet Explorer.

What to use instead? Use JavaScript and the HTML DOM instead.


Example 1 – Mouseover Highlight

The following HTML file has a <style> element that defines a behavior for the <h1> element:

<html>
<head>
<style type="text/css">
h1 { behavior:url(behave.htc); }
</style>
</head>

<body>
<h1>Mouse over me!!!</h1>
</body>
</html>

The XML document “behave.htc” is shown below:

Example (IE5+ Only)

The behavior file contains a JavaScript and event handlers for the elements.

<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />

<script type="text/javascript">
function hig_lite()
{
element.style.color='red';
}

function low_lite()
{
element.style.color='blue';
}
</script>

Example 2 – Typewriter Simulation

The following HTML file has a <style> element that defines a behavior for elements with an id of “typing”:

<html>
<head>
<style type="text/css">
#typing
{
behavior:url(behave_typing.htc);
font-family:"courier new";
}
</style>
</head>

<body>
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
Behaviors are a way to add DHTML functionality to HTML elements
with the ease of CSS.<br /><br />How do behaviors work?<br />
By using XML we can link behaviors to any element in a web page
and manipulate that element.</p>
</span>
</body>
</html>

The XML document “typing.htc” is shown below:

Example (IE5+ Only)

<attach for="window" event="onload" handler="beginTyping" />
<method name="type" />

<script type="text/javascript">
var i,text1,text2,textLength,t;

function beginTyping()
{
i=0;
text1=element.innerText;
textLength=text1.length;
element.innerText="";
text2="";
t=window.setInterval(element.id+".type()",speed);
}

function type()
{
text2=text2+text1.substring(i,i+1);
element.innerText=text2;
i=i+1;
if (i==textLength)
  {
  clearInterval(t);
  }
}
</script>

Dhtml Blink Text

DHTML Blink Text

<html>
<head>
<script type=”text/javascript”>
function blinking_header()
{
if (!document.getElementById(‘blink’).style.color)
{
document.getElementById(‘blink’).style.color=”red”;
}
if (document.getElementById(‘blink’).style.color==”red”)
{
document.getElementById(‘blink’).style.color=”black”;
}
else
{
document.getElementById(‘blink’).style.color=”red”;
}
timer=setTimeout(“blinking_header()”,100);
}
function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>
<body onload=”blinking_header()” onunload=”stoptimer()”>
<h1 id=”blink”>Blinking header</h1>
</body>
</html>

View Output

DHTML Css

CSS is used to style HTML elements such as layering and positioning the content

wheather u have to learn another language?
DHTML is NOT a scripting language like Javascript, but simply a browser feature, or enhancement,that gives your browser the ability to be dynamic. What really want to learn is not DHTML itself but rather, the syntax needed to use DHTML. It is the ability of the browser to alter a web page’s style and look after the page has loaded.
There are a couple of important points that you should be aware of when you are working with the DHTML client during application development.

Here’s a simple demonstration. the text below change color when the mouse moves over it:
Move your mouse here

The code looks like:

<span id=”sometext”
onMouseover=”sometext.style.color=’red'”
onMouseout=”sometext.style.color=’black'”>Move your mouse here <span/>

In order to get this effect, I first gained access from the element’s ID. Then, through the style object, and finally the style’s color property. All style properties are read/write, and are accessed in a similar manner: element id->style object->property name.

DHTML includes CSS and JavaScript

By means of JavaScript, DHTML is the changing of the style declarations of an HTML element. For instance,if you have a paragraph with a certain text,color defined by

p {color: #cc0000;}

you can do something like
element.style.color = ‘#00cc00’;

as soon as this bit of script is executed the text colour changes from red to green.

div {position: absolute;
top: 20px;
left: 0px;}

and then change its left:

element.style.left = 200;
Now element magically moves to 200 pixels from the left margin of the page.
The style property

So generally,you first go to the HTML element in Internet Explorer you want to influence like :-
document.all[‘tobechanged’].style.left = 200;
then change the style declarations:
element.style.styleDeclaration
If you want to change color, styleDeclaration is color, if you want to change the left, it is left. If you want to change a style declaration with a dash in it, for instance z-index, remove the dash and make the first letter after the dash a capital: zIndex. Same for margin-left => marginLeft.

Note that the style property reflects the inline styles of the element. This is important if you want to read out the styles of the element. If you try to read out the color of the paragraph:

p#testP {color: #cc0000;}<p id=”testP”>This is the paragraph.alert([testP].style.color);

You get an empty alert. This is because the P doesn’t (yet) have an inline color style. The style defined by p#testP is not readable through the style property.
You define your styles inline, it works fine

<p style=”color: #cc0000″>This is the paragraph.alert([testP].style.color);