CSS Injection 02 – Tutorial
In: Tutorials
2 Oct 2009
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
<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>
<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
Comment Form
For by grace you have been saved through faith. And this is not your own doing; it is the gift of God, not a result of works, so that no one may boast. (Ephesians 2:8-9, ESV)
About Alexify
I understand that people do have different likes and views and I appreciate each one of them. I'm Alex, a Computer Engineer, a noob Web Developer/Web Designer/Graphic Artist :)
Categories
- Advertisement (11)
- Blogger Theme (6)
- Day By Day (1)
- Design (25)
- Facebook (1)
- Flash (1)
- Friendster Layouts (2)
- Literature (2)
- Personal (5)
- Reviews (6)
- Tutorials (10)
- Wordpress Themes (5)
- ALDY: wow kuya... new style :) i like you very much.... i mean "it" lol haha :p [...]
- Alex: @Madam - Thanks din po for the smooth transaction! :) And your comment is very much appreciated. [...]
- Mrs. Prado: thanks for the very fast & hassle transaction--- im sorry i dont know where to place my feedbac [...]
- Alex: @Bushokology - Salamat Kuya Busyok! :) [...]
- busyokology: ganda ng themes mo :-) [...]
Navigation
Ex Links
Shoutmix
TOOLS
