Available for freelance work

November 2nd, 2011 .

CSS for Beginners – Lesson 1: The basics

Categorized under: Web Development

Hi folks! If you haven’t read the introduction to HTML I advice you to do so here.
So we have this code

<html>
	<head>
		<title>My first HTML tutorial</title>
		<meta name="description" content="Here is the best place to learn HTML" />
		<meta name="keywords" content="html,tutorial,beginners" />
		<meta name="robots" content="INDEX,FOLLOW" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
		<div id="header">
			<div id="logo">Logo here</div>
			<div id="menu">
				<a href="index.html" title="First page">Home</a> |
				<a href="about.html" title="About Alecs">About</a> |
				<a href="contact.html" title="Contact Alecs">Contact</a>
			</div>
		</div>
		<div id="content">
			Beautifull content with images and videos and comments goes here.
			<a href="https://twitter.com/#!/hyperionXS" title="Follow Alecs on Twitter" target="_blank">Click here for more beautifull content</a>
		</div>
		<div id="footer">
			<div id="footer_links">
				<a href="index.html" title="First page">Home</a> |
				<a href="faq.html" title="Frequently Asked Questions">FAQ</a> |
				<a href="#header">Go to top</a>
			</div>
			<div id="copyright">Copyright &copy; 2011 Alexandru Pandele</div>
		</div>
	</body>
</html>

Loaded in a browser, the code above looks like this:

But this doesn’t look like a modern website at all ! We need colors, images, different font sizes and much more.
This means we need CSS. CSS stands for Cascading Style Sheet and will help us to bring our website to the next level.

How we use it? We can apply CSS to any HTML element using the attribute style
OK, let’s start with the colors. In the code above, change the first link to:

<a style="color:green" href="index.html" title="First page">Home</a>


As you can see, the syntax is style=”property:value”.
The value for Color property can be specified as an RGB triplet in hexadecimal format (eg: #ff0000 for red) or as their common English names like white, silver, red, maroon, yellow, blue, navy (More colors)
Now let’s change the color of all menu links:

<a style="color:red" href="index.html" title="First page">Home</a> |
<a style="color:#00bb00" href="about.html" title="About Alecs">About</a> |
<a style="color:#00aabb" href="contact.html" title="Contact Alecs">Contact</a>


All clear? But now I want all the links to have a green color. We can achieve this by setting color:green to all the links, right?
Now we have only 6 links. It’s not that hard. But in a modern site you might have 100+ links in a page. We can set the color property to all the links. But what if we change design and instead of green we want light green? We should change green to light green in 100+ places. A lot of work, right?
Hopefully there is a workaround. Put this code in the head section of the page:

<style>
	a{
		color:green;
	}
</style>

This will change all the links (that do not have style=”color:…”) in green.

Why a{…}? a is the CSS selector. This means that the properties between curly brackets are applyed to all the a elements.
This means we can also use:
div{color:green} – any text that is inside a div will be green;
body{color:green} – any text in site will be green;
All clear? Download here the source code.

You can follow any responses to this entry through the RSS 2.0 feed.

Comments

  1. When you call the web service in client script, the call will need to have a callback function specified to handle the return value.


    Kyle Suladrene
    January 4th, 2012