Oct 2, 2009
Admin
No Comments
Tutorials

CSS Injection 02 – Tutorial

This was an activity we had during my collage days :D wherein CSS codes are injected inside the HTML script.
By proceeding with the tutorial. You may get to know what CSS can do to a simple HTML script.


Below is the output of the activity:


Shopping list for Monday:

  • Milk
  • Bread
    • White bread
    • Rye bread
    • Whole wheat bread
  • Rice
  • Potatoes
  • Pizza with mushrooms

Go to the Grocery store


<html>
<head>
    <title>More Styles - Alex</title>

<style type="text/css">
a {text-decoration: none }
a: hover { underline; color: red; background-color: #ccffcc }
li em { color: red; font weight: bold }
li { color: green; margin-left: 15px }
ul ul { text-decoration: underline; margin-left: 15px }
</style>
</head>

<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p><a class="nodec" href="#">Go to the Grocery store</a></p>
</body>
</html>

As seen in the box above, you may be able to change colors, fonts and the position of a certain text without using any html tags.

A CSS is used to create a set of styles that can be applied to your fonts, tables and most other attributes of a web page.
“These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied.” – http://www.devarticles.com

Leave a comment

Stop censorship