SlideShare a Scribd company logo
1 of 18
Naveen Kumar Veligeti
1
Basic CSS Concepts
In this CSS tutorial I will not be able to show you everything there is about CSS, but you will
learn how to create nice looking CSS styled web pages.
After completing this tutorial, you should have enough information to explore CSS and web
design even further.
Things to remember about CSS:
Remember that CSS code is simply written instructions that tells Web browsers (like FireFox
and Internet Explorer) how to display things on a page. For example:
make text bold.
position things a page.
set the font style for a page or paragraph etc.
The sister language to CSS is HTML: code that tells the Web browser WHAT is actually in the
page.
… I know you knew that already, I just wanted to remind you!
CSS reduces the number of tags used
Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a
page big time, all the while still being able to layout great looking pages using only 6 types (for
lack of better words) of HTML tags.
The tags we will use to layout the content:
1. <h> The Heading tags which range from ‘<h1></h1>’ to ‘<h6></h6>’, are going to be used to
mark/tag headings in our pages. So the most important heading will be wrapped in a <h1> tag
and the least important in a <h6> tag.
An example of a heading:
<h1><strong>CSS Template Layout</strong></h1>
This tells the browsers and the search engines too, that this page is primarily about: ‘CSS
Template Layout’
All browsers have a default size (for each<h> tag) as to how it renders text when placed
between these tags. Many of these defaults can be unusable (especially<h1>) because they
come out too big. But never fear, CSS is here. We will use CSS to make the text sizes more to
our liking.
2. <p> The Paragraph tag is used to mark parts of the pages as being ‘paragraphs’, simple enough.
Paragraph tags are what they call a ‘block element’; that means that it acts like a block where a
Naveen Kumar Veligeti
2
space is automatically inserted before and after each <p> tag pair. You see it work in the
examples coming up.
3. <ul> and <ol> List tags will be used to create our menus. The tag <ul> is the ‘un-ordered list tag’
that creates a list with bullets or other images/icons that do not specify or denote an order;
hence the term ‘un-ordered’. The other list tag mentioned (<ol>) is the ‘ordered list tag’ and it
creates a list that, instead of bullets, the list elements are marked with numbers or letters. Code
examples to follow.
4. <div> We all know what the <div> tag is about since we all read the previous article, right? We
will use div’s to create containers for parts of our page. One div will be used to ‘hold’ our
navigational menu and another div to ‘hold’ the main page.
5. <a href> The most important tag in HTML: the ‘link tag’ or the ‘hyperlink tag’. This makes text
‘hyper’ so that when we click on it we can load another page or activate/call some JavaScript
(otherwise known as ECMA script).
6. <img> This is the ‘image tag’, allows you to link to images so that they show up in our pages. In
HTML images are not embedded into the actual page, instead the image tag (<img>) only points
to where the image is and the browser will attempt to load that image when a surfer loads your
HTML page.
That covers the HTML tags we will use in our layout! No need for table tags, <br> tags and
nasty <font> tags.
Basic CSS Concepts: Part 2
The basic page template
Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we
will use as the starting template for this tutorial. You can find it under the heading: ‘To create
the practice HTML page do the following:’ Follow the instructions there and create your basic
HTML page.
Once you have created the template page, create a folder and name it something like:
‘myCSSwebsite’ and then drop the HTML page into it. In that same folder, create a new text
document and call it: ‘myCSS.css’. Once created open that file and paste in this template CSS
code and then save it:
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
Naveen Kumar Veligeti
3
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
Naveen Kumar Veligeti
4
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Naveen Kumar Veligeti
5
Don’t let the CSS freak you out, I will explain the important details and you will soon see how
easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to
add some code to our HTML page.
In between the <body></body> tags you will need to insert this code:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>Go to the Web Designers Killer Handbook home page and grab the
practice HTML page that we will used as the starting template for this
tutorial. You can find it under the heading: 'To create the practice HTML
page do the following:'.</p>
<p>Follow the instructions there and create your basic HTML page
... and do it now!</p></div>
And in between the <head> </head> tags you will need to insert this:
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
With this in place we will be able to start styling our page. If you take a look at the HTML page
now you may be surprised to see that we already started!
If you haven’t set the page up yet, please do so to make sure you have everything working thus
far.
Layout a Page with CSS:
In Part 1 we created a classic two-column layout with left side navigation using CSS and only a
few types of HTML tags.
Naveen Kumar Veligeti
6
Part 1 presented the code for the page and explained what HTML tags we were going to use.
Now we will look at the actual HTML code used so far and the CSS.
Our page so far is really very simple. As you may already know, all the content (text, images,
Flash etc) that the user sees when viewing a web page is marked-up/coded with HTML in-
between the <body> and </body> tags*.
In this case we have this:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>Go to the Web Designers Killer Handbook home page and grab the practice
HTML page that we will used as the starting template for this tutorial.
You can find it under the heading: 'To create the practice HTML page do
the following:'.
Follow the instructions there and create your basic HTML page ... and
do it now!</p>
</div>
In the above code we see that we have 2 main sections demarked by using <div> tags. As you
learned in part one of this tutorial, <div> tags are designed to be used to create a ‘division’ in
the document or in other words create a container. We have created two such containers and
given them each of them a unique ID:
<div id="navigation">
...
</div>
You will notice that the entire contents of the page are contained in one of these two major
page divisions. So the first questions are what are the rules of ID’s in HTML pages and why do
we use them and assign them to page elements like DIVs?
1. First of all you can assign ID’s to any HTML tag. So I could have assigned an ID to a <p> tag as
well.
2. An ID in a page should only be used once. That is to say that no two elements should have the
same ID. ID’s are meant to uniquely identify a page element. So in the above example we know
that there is only one page element with an ID of ‘navigation’ and only page element with an ID
of ‘centerDoc’. I like to use ID names that talk to you, it is pretty clear what is going on in each
division we created above.
Naveen Kumar Veligeti
7
3. ID’s on HTML page elements (tags) are used in CSS. We can target ID’s in our CSS code to
change the appearance, position and even behavior of that element by referencing the ID of
the element.
Inside the <div> tags we use header tags (<h1> and <h2>) to set the headers. I speak to what
header tags mean in part 1 of this tutorial.
And finally I have some <p> tags, and of course I insert the text that makes up this simple page
in-between them.
Now I am going to jump to our CSS file that is attached to the HTML page. We attach the CSS
document with this line of code in between the <head> </head> tags:
<head>
<link href="myCSS.css" rel="stylesheet" type="text/css">
</head>
Like a normal page link we have an ‘href’ attribute this time pointing to a CSS document that
has all our CSS code that will affect this page since it is linked to it. This is not the only way to
associate CSS code to pages (there are a few other ways) but we will leave that to another
article. So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell
the browser that the link is to a CSS page with this attribute: ‘type=”text/css”‘. All that is
important here is that the link point to a CSS file with the name: ‘myCSS.css’
So now that we got the style sheet linked to the document, lets look at some CSS code. This
first snippet of code ‘styles’ the unique ID’s we were talking about before:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
There is a lot going on here so we will focus on just a few elements for now. In the above
elements we have 2 selectors, one for each ID and each selectors are grouped/contained by
using the curly brackets: { }. So here is the CSS selectors code with all their guts removed:
Naveen Kumar Veligeti
8
#navigation {
/*Look ma no CSS rules!*/
}
#centerDoc {
/*Look ma no CSS rules!*/
}
I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would
normally be. So now you can see that anything in between the curly brackets is part of one
group or package that in CSS can generically be called a selector.
In our above examples you can see that there is some text that appears before a curly bracket.
That text gives a name to the selector. So in this case we have two selector names and thus to
selectors: #centerDoc and #navigation. So why do we have the # symbol in front of the text?
Why can’t we call it simply ‘centerDoc’ and ‘navigation’?
Layout a Page with CSS: Part 2
Like HTML and programming certain text in certain places have special meaning that tells the
system to do something particular. In this case whenever you have a # symbol in front of a
name of a CSS selector we are saying that this selector is a special type of selector called an ‘ID’
selector. What is so special about an ID selector? That type of selector can only be applied to
one element in the HTML page. Sounds familiar?
So those of you not asleep at the computer, now see that we have a CSS ID selector for each of
our HTML divs that have an ID, and they have the same corresponding names. So the CSS
selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’ , you got it? Whatever CSS
rules/styles we choose to code into our ID selector will change what appears inside the
corresponding div. So for the div with the id of: ‘navigation’ we have these CSS rules:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
Notice at the bottom we say all text will have a font-weight of ‘normal’:
Naveen Kumar Veligeti
9
font-weight: normal;
We could just as easily have said that we want all the text to appear in the div (the div with the
ID ‘navigation’) bold instead:
font-weight: bold;
This tutorial was about creating an easy to use page template so I will point out the 2 main
elements that make this thing work.
In our page the navigation div is sitting on the left and it has a border … why? It has a nice light
green 1 pixel border because I set this in my CSS:
border-right: 1px solid #C6EC8C;
Pretty self explanatory, no? I would suggest changing the color of the border and changing the
pixel thickness of the border and see how it looks.
Why is the navigation sitting on the left of the page while the centerDoc is to the right of it?
Well first thing to look at is this line in the navigation selector:
position: absolute;
This tells the browser to just place this div on the page as is. This is oversimplifying the subject,
but for our purposes this works for now.
The real magic in this is the CSS code for centerDoc:
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
The line :
padding: 0 0 20px 0; /*top right bottom left*/
Tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID
‘centerDoc’.
Naveen Kumar Veligeti
10
Let’s back up here a second. We just used something called ‘padding’ and it is what it sounds
like: Space that is wrapped around our element (tag).
CSS has this feature and concept of a box model that essentially is a box that wraps around
HTML elements. This box model consists of: padding, margins, borders and the actual content.
This allows us to place a border around elements and space elements in relation to other
elements. From the inside out it is ordered like so:
content -> padding -> border -> margin
So in our case anything in between our <div> tags is the ‘content’. Right after that comes the
padding. Then there is a border and finally a margin. Margin and padding may seem like the
same thing but if you think about it, you can see how being able to control the space before the
border (padding) and after the border (margins) can really effect your layouts.
In this example you notice that the navigation div sits higher up on the page than the centerDoc
div. This is not because of the order that which they appear in the HTML, as they normally
would without CSS, rather it is because of the margin settings I set for each selector; for
centerDoc I set the top margin to 50px:
margin-top: 50px;
And for the navigation div I set it to:
margin-top: 0px;
This sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the centerDoc div.
I would suggest that you move the position of the navigation div under the center doc div in the
HTML just to see if it changes anything, you will see that where the div appears in the actual
HTML code has nothing to do with how it will appear to the user now that CSS positioning has
been used. Another thing to try is to play with the CSS values and see what happens, change
the padding, change the margins etc .
Let’s finish this discussion of CSS in Part 3.
1. There is more HTML that appears on top of the first <body> tag that is very important to
the page but does not actually directly have anything to do with what appears in the
page (from the users perspective) so I won’t discuss it in this article.
Naveen Kumar Veligeti
11
we broke down the major sections of HTML on the page and established separation using DIV
tags with unique ID’s attached to them:
<div id="navigation"> ...</div>
<div id="centerDoc"> ...</div>
Using DIV’s (to position the major page sections) is the alternate method to what most people
use: tables. I would argue one method is not necessarily better than the other. But consider
that CSS is the ‘official’ method to position page elements and tables should only be used to
hold tabular data.
On the other hand there are simply times when using tables is much easier and CSS just doesn’t
cut it.
That said, our current layout (left or right side navigation) CSS is far easier to use and is an
overall better solution.
Now that we have that covered, everything gets really easy from here. We’ve established our
main document and the major sections are in place, all we need to do is add our text and
images.
Breaking down the page:
This page is simple, we have just a single heading:
<h1>The Main Heading</h1>
And a single paragraph:
Go to the Web Designers Killer Handbook home page and grab the practice
HTML page that we will used as the starting template for this tutorial. You
can find it under the heading: 'To create the practice HTML page do the
following:'. Follow the instructions there and create your basic HTML page
... and do it now!
We define how the paragraphs and the headings will look in our CSS code:
p {
Naveen Kumar Veligeti
12
width: 80%;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
This is pretty much self-explanatory. The only thing that should be mentioned is that we set the
width of the <p> tags to 80%. This allows us to control all of our text width in one easy to edit
spot.
The only thing missing from the page is the actual navigation. The best and easiest way to do
this, is by using list (<li>) tags. That makes sense, since navigational menus are essentially a list
of pages.
We styled the list item tags with this CSS:
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
The above code uses an image as the bullets for the list and makes the space between the listed
items 1 and ½ times larger than normal (I like a little more ‘breathing room’). You don’t have to
have an image for the bullets, you could leave it with no images and no bullets by just removing
the attribute:
list-style-image: url(../images/arrowSmall.gif);
Or you could use one of the built in bullet options: ‘disc’, ‘circle’ and ‘square’.
Next you should add to the HTML page an unordered list (<ul></ul>) in between the navigation
DIV’s just under the ‘main navigation’ heading:
<h2>The Main navigation</h2>
<ul>
<li><a href="cssTutorialPage1.htm">Page One</a></li>
Naveen Kumar Veligeti
13
<li><a href="cssTutorialPage2.htm">Page Two</a></li>
</ul>
To make things easier (for the purpose of the article), change the CSS affecting the list item tags
(<li>) so that we use a built in bullet:
li {
list-style-type: disc;
line-height: 150%;
}
Now we have the navigation!
That pretty much covers our goals for this tutorial, but we have just scratched the surface of
CSS. As you can see, we created a nice looking page, while using very few types of HTML tags.
At this time there isn’t much text on the page, but we could add to the page easily, building it
out to include lots of information and images with practically no HTML work at all!
Inserting images with CSS
This article assumes that you know at least basic HTML; you know what a tag is and how to use
simple tags like the <img> or the <p> tag. If this is confusing you, you need to read my tutorial
for total beginners on web design – it’s really easy and people seem to like it, so give it go!
Ok, I assume that everyone knows what images are, as we all have seen images on web pages.
Images are not technically inserted into a web page (to be nerd precise), rather images are
linked to web pages and typically we use the image tag (<img>) to create holding space (or a
reference to the image) for the image.
When someone loads a web page (by going to the URL), it is the browser, at that moment, that
actually gets the image from the web server and inserts it into the page for you to see – makes
sense?
This is different from using a program like MS Word for example, where with Word, when you
insert an image into a Word document, the image actually becomes ‘part’ of the actual
Naveen Kumar Veligeti
14
document. When you save a Word file, all you need to keep track of is that one Word file, and
you know the images you inserted will be there when you open it again no matter where you
move the file.
Where as with an HTML page, since you are only referencing the images with the image tag,
you have to make sure that the images you are linking to always stay in the same spot in
relation to the web page. When people mess up that path between the HTML page and the
images it is referencing, you get that broken link icon that everyone loves to see. You are seeing
that broken link icon because the browser can’t find the image you are referencing in the <img>
tag.
Ok, if you didn’t know much about the mechanics of images loading in web pages, now you
know too much! Lets move to something practical.
Using CSS to insert images into your web pages
This next part is really easy to understand, easy to use and can be very powerful – triple bonus!
With CSS, all block-level and inline elements (tags) can have background images inserted into
them. Block - level tags are <p> and <div>.
Even though you can insert images into any type of tag (block-level or inline), I think it is better
form in most situations to use block-level tags for this sort of thing. But in reality it doesn’t
matter if you use block-level tags, or inline tags because you can turn any tag into a block-level
tag and vice versa; with this simple CSS code I change any tag to block-level:
display: block;
Or the reverse:
display: inline;
So what? Remember my newsletter where I talked about inserting backgrounds with CSS? In
the same way you can insert images in the backgrounds of your web pages, you can do it with
any other element. This combined with some extra padding and you have your headline image
where you want it.
Take a look at this code where I use this technique:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS image placement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Naveen Kumar Veligeti
15
<style type="text/css" media="screen">
#headline1 {
background-image: url(images/newsletter_headline1.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px;
}
#headline2 {
background-image: url(images/newsletter_headline2.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
}
</style>
</head>
<body>
<div id="headline1">Some text … </div>
<div id="headline2">Some more text .. </div>
</body>
</html>
To keep this example easy to follow, I inserted the CSS code into the web page itself. Typically I
would place my CSS code in a separate CSS file and link to it so that I could reuse the CSS code
on many pages.
In the above CSS code you will notice that I insert a background image for each ID (headline1
and headline2) and I increase the padding at the top (padding-top:68px) to push down the text
to make space for the background images.
This may seem unclear now, so just take a look at the page and then pop open the source code
and check it out for yourself. Feel free to take a copy and play with the padding number and see
how it changes things. Why did I add 68px to the padding? The image is 68px tall, but I could
put any number I like to get the placement I want. Padding does not affect the background
image; it only affects the contents inside the tag/element. In this case I used <div> tags.
The 3 ways to insert CSS into your web pages
For some of you, this may sound like a real lame article. But you ought to give it a chance
because I don’t write about stuff you’ll never use! I avoid marginal, nerd centric ivory tower
blather like a cat avoids water.
Naveen Kumar Veligeti
16
I’ve read hundreds (sadly, this is true) of those 2-inch thick nerd books (I don’t get out much)
and I can’t stand it when people waste paper on that kind of generally useless stuff. So read on,
eager student, and you will be well on your way to building your own killer web sites!
The wise people who created CSS came up with 3 basic ways for you to use CSS in your web
pages:
1. With an external file that you link to in your web page:
2.
<link href="myCSSfile.css" rel="stylesheet" type="text/css">
or using the import method:
<style type="text/css" media="all">
@import "myCSSfile.css";
</style>
Why use the import method versus the link method when using external style sheets? Use the
import method if you want to support really old browsers like Netscape 4.0.
Let me explain: Netscape can’t handle most CSS beyond font settings and colors, if it finds any
other types of CSS it could cause good old Netscape 4 to crash in some occasions or at the very
least mangle your page.
Netscape 4 does not understand the @import method of linking to a style sheet like the newer
browsers can, so Netscape just ignores it. You can use this to hide the fancy CCS code in the
external style sheet by using the @import method so all the good browsers can reference it
while keeping Netscape 4 out of the picture.
Netscape 4.0 is pretty much dead (that is really a good thing) so I personally don’t worry much
about it. But for some of you, it may be of concern so I thought it should be mentioned.
3. By creating a CSS block in the web page itself; typically inserted at the top of the web
page in between the <head> and </head> tags:
<head>
<style type="text/css">
p { padding-bottom: 12px; }
</style>
</head>
Naveen Kumar Veligeti
17
4. By inserting the CSS code right on the tag itself:
<p style="padding-bottom:12px;">Your Text</p>
So some of you may be asking why have the 3 methods of including the CSS in a web page? The
answer is: flexibility and laziness! Ok I’m kidding about the laziness, replace it with ‘precision’.
So what the heck does that mean?
I think the easiest way to explain to you what’s going on, is by giving you real examples that
demonstrate the differences. Wait a second, don’t fall asleep … the examples are short and I
think that once you finish, you will see how easy it really is!
Another reason that you want to continue reading this article is that you will gain a good
understanding of some fundamental (and practical) CSS principles – remember that the
difference between people who are really good at what they do, and those who are not so
good, is in the mastery of the basics. Lets get down on it!
Method 1: Create a separate CSS file and link it to your web page(s)
The heading for this part of the article hints at why you would want to go through the trouble
of creating a separate CSS file instead of just typing in the CSS code in the web page itself. Can
you guess? Keep trying … times up! Did you get it? I could quote you some nerd centric
description that describes the advantage; the problem is that only nerds who already know
would understand!
In a nutshell: by keeping the CSS code in its own file, you can link that CSS file to as many web
pages as you want. This has two major advantages:
1. You will have much less code in all your HTML pages – makes the pages neater and easier to
manage and makes the web pages a little faster on the download. (Although this point is really
minor in most cases, and is really over blown in my opinion by some people)
2. It can potentially reduce the amount of work you have to do in a big way. Why you ask? Simple;
lets say you have 50 web pages where you’ve set the text to be black and the headline text
(text in between the <h3> tags for example) to blue. Then one day you decide you want to
change the color of the text. Since the CSS that controls the text color for the 50 pages is in one
CSS file, you can easily change the color of your text in all 50 pages by changing one line in the
CSS file!
Naveen Kumar Veligeti
18
If on the other hand you had decided to include all your font color information in each page,
you would have had to change all 50 pages. This would have been even worse if you had been
using font tags, or CSS right on each tag, you would have to change the color settings/code on
all the <p> and <h3> tags in all 50 pages! I can tell you from experience that that sucks big time!
The rule: If you are going to have more than one web page with the same stylistic properties
(that look the same in some way) you should create a separate CSS file and link your web pages
to it.
Method 2: Create a CSS block in the web page itself
The Rule: Use this method if you want to override the CSS you have in a linked CSS file or if you
only have a one-page web site.
Now that we covered the first method of putting all your CSS code in a separate file and linking
to it, the other methods are easy to describe.
CSS stands for (is the acronym for): ‘Cascading Style Sheets.’ I think the words ‘style sheets’ in
CSS are self-describing … we know what ‘style’ in style sheets mean. But what is the meaning of
‘cascading’ in CSS?
The cascading effect in CSS
The word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code
on the page itself will override the CSS code in a separate linked file. And subsequently, CSS
declared ‘inline’ on the tag itself would override all other CSS.
So let’s look a practical example; let’s say you have a web site with 50 pages where the layout
and fonts are the same on all 50 pages. Wisely you put the CSS information that sets the layout
and font choices in a separate style sheet, but for a particular page you need to change the
color of some of the text and add a border around a paragraph. This is a perfect example where
you might want to place a little CSS in the page itself since the color and border will be unique
to that page. Is this all sinking in?
Method 3: Embed the CSS right on the tags themselves (called inline CSS)
The Rule: Use this method on a unique element/tag that you want to affect with CSS.
An example can be with a special heading on the page where you want to have a little more
padding than you typically do for a heading. Instead of creating a class elsewhere that will only
be used on this one occasion, it makes sense to me to just include the CSS inline. I have to
stress that inline CSS is something you should rarely if ever use because it can get messy quick.

More Related Content

What's hot

Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5kolev-prp
 
Web designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingWeb designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingRabiul robi
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Sayed Ahmed
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!Ana Cidre
 
Font End Development + Automation with Django
Font End Development + Automation with DjangoFont End Development + Automation with Django
Font End Development + Automation with DjangoEvan Reiser
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - IntroductionDavy De Pauw
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introductionDiego Scataglini
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you needDipen Parmar
 
Web development resources brackets
Web development resources bracketsWeb development resources brackets
Web development resources bracketsLaurence Svekis ✔
 
Windows Vista
Windows VistaWindows Vista
Windows Vistacartsh
 
bawawjspdx082117
bawawjspdx082117bawawjspdx082117
bawawjspdx082117Thinkful
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptAn Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptTroyfawkes
 

What's hot (18)

Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Web designing (1) - Html Basic Codding
Web designing (1) - Html Basic CoddingWeb designing (1) - Html Basic Codding
Web designing (1) - Html Basic Codding
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Font End Development + Automation with Django
Font End Development + Automation with DjangoFont End Development + Automation with Django
Font End Development + Automation with Django
 
HTML5 - Introduction
HTML5 - IntroductionHTML5 - Introduction
HTML5 - Introduction
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Html 5, a gentle introduction
Html 5, a gentle introductionHtml 5, a gentle introduction
Html 5, a gentle introduction
 
Ajax
AjaxAjax
Ajax
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
Web development resources brackets
Web development resources bracketsWeb development resources brackets
Web development resources brackets
 
Windows Vista
Windows VistaWindows Vista
Windows Vista
 
bawawjspdx082117
bawawjspdx082117bawawjspdx082117
bawawjspdx082117
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScriptAn Seo’s Intro to Web Dev, HTML, CSS and JavaScript
An Seo’s Intro to Web Dev, HTML, CSS and JavaScript
 

Similar to Basic CSS concepts by naveen kumar veligeti

Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simpleJagadishBabuParri
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlantaThinkful
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Thinkful
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introductioncncwebworld
 
Class 1 handout (2) html exercises
Class 1 handout (2) html exercisesClass 1 handout (2) html exercises
Class 1 handout (2) html exercisesErin M. Kidwell
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2Shawn Calvert
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get startedDimitris Tsironis
 
wd project.pptx
wd project.pptxwd project.pptx
wd project.pptxdsffsdf1
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 

Similar to Basic CSS concepts by naveen kumar veligeti (20)

INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
Css
CssCss
Css
 
Html, css and jquery introduction
Html, css and jquery introductionHtml, css and jquery introduction
Html, css and jquery introduction
 
Class 1 handout (2) html exercises
Class 1 handout (2) html exercisesClass 1 handout (2) html exercises
Class 1 handout (2) html exercises
 
HTML Tutorial
HTML TutorialHTML Tutorial
HTML Tutorial
 
BYOWHC823
BYOWHC823BYOWHC823
BYOWHC823
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Css
CssCss
Css
 
Sacramento web design
Sacramento web designSacramento web design
Sacramento web design
 
HTML+CSS: how to get started
HTML+CSS: how to get startedHTML+CSS: how to get started
HTML+CSS: how to get started
 
wd project.pptx
wd project.pptxwd project.pptx
wd project.pptx
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 

More from Naveen Kumar Veligeti

.Net framework components by naveen kumar veligeti
.Net framework components by naveen kumar veligeti.Net framework components by naveen kumar veligeti
.Net framework components by naveen kumar veligetiNaveen Kumar Veligeti
 
Php forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligetiPhp forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligetiNaveen Kumar Veligeti
 
Why use .net by naveen kumar veligeti
Why use .net by naveen kumar veligetiWhy use .net by naveen kumar veligeti
Why use .net by naveen kumar veligetiNaveen Kumar Veligeti
 
Types of sql commands by naveen kumar veligeti
Types of sql commands by naveen kumar veligetiTypes of sql commands by naveen kumar veligeti
Types of sql commands by naveen kumar veligetiNaveen Kumar Veligeti
 
Sql data types for various d bs by naveen kumar veligeti
Sql data types for various d bs by naveen kumar veligetiSql data types for various d bs by naveen kumar veligeti
Sql data types for various d bs by naveen kumar veligetiNaveen Kumar Veligeti
 
.Net framework by naveen kumar veligeti
.Net framework by naveen kumar veligeti.Net framework by naveen kumar veligeti
.Net framework by naveen kumar veligetiNaveen Kumar Veligeti
 

More from Naveen Kumar Veligeti (8)

.Net framework components by naveen kumar veligeti
.Net framework components by naveen kumar veligeti.Net framework components by naveen kumar veligeti
.Net framework components by naveen kumar veligeti
 
Php forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligetiPhp forms and validations by naveen kumar veligeti
Php forms and validations by naveen kumar veligeti
 
Why use .net by naveen kumar veligeti
Why use .net by naveen kumar veligetiWhy use .net by naveen kumar veligeti
Why use .net by naveen kumar veligeti
 
Types of sql commands by naveen kumar veligeti
Types of sql commands by naveen kumar veligetiTypes of sql commands by naveen kumar veligeti
Types of sql commands by naveen kumar veligeti
 
Sql data types for various d bs by naveen kumar veligeti
Sql data types for various d bs by naveen kumar veligetiSql data types for various d bs by naveen kumar veligeti
Sql data types for various d bs by naveen kumar veligeti
 
Beginners introduction to asp.net
Beginners introduction to asp.netBeginners introduction to asp.net
Beginners introduction to asp.net
 
Clauses in sql server
Clauses in sql serverClauses in sql server
Clauses in sql server
 
.Net framework by naveen kumar veligeti
.Net framework by naveen kumar veligeti.Net framework by naveen kumar veligeti
.Net framework by naveen kumar veligeti
 

Recently uploaded

How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfSpandanaRallapalli
 
Q4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptxQ4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptxnelietumpap1
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxMaryGraceBautista27
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxAshokKarra1
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxDr.Ibrahim Hassaan
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Jisc
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parentsnavabharathschool99
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomnelietumpap1
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfphamnguyenenglishnb
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...JhezDiaz1
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxCarlos105
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSJoshuaGantuangco2
 

Recently uploaded (20)

How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptxYOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
YOUVE_GOT_EMAIL_PRELIMS_EL_DORADO_2024.pptx
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
 
Q4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptxQ4 English4 Week3 PPT Melcnmg-based.pptx
Q4 English4 Week3 PPT Melcnmg-based.pptx
 
Science 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptxScience 7 Quarter 4 Module 2: Natural Resources.pptx
Science 7 Quarter 4 Module 2: Natural Resources.pptx
 
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptxYOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
 
DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...Procuring digital preservation CAN be quick and painless with our new dynamic...
Procuring digital preservation CAN be quick and painless with our new dynamic...
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choom
 
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdfAMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
AMERICAN LANGUAGE HUB_Level2_Student'sBook_Answerkey.pdf
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTSGRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
GRADE 4 - SUMMATIVE TEST QUARTER 4 ALL SUBJECTS
 

Basic CSS concepts by naveen kumar veligeti

  • 1. Naveen Kumar Veligeti 1 Basic CSS Concepts In this CSS tutorial I will not be able to show you everything there is about CSS, but you will learn how to create nice looking CSS styled web pages. After completing this tutorial, you should have enough information to explore CSS and web design even further. Things to remember about CSS: Remember that CSS code is simply written instructions that tells Web browsers (like FireFox and Internet Explorer) how to display things on a page. For example: make text bold. position things a page. set the font style for a page or paragraph etc. The sister language to CSS is HTML: code that tells the Web browser WHAT is actually in the page. … I know you knew that already, I just wanted to remind you! CSS reduces the number of tags used Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to layout great looking pages using only 6 types (for lack of better words) of HTML tags. The tags we will use to layout the content: 1. <h> The Heading tags which range from ‘<h1></h1>’ to ‘<h6></h6>’, are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a <h1> tag and the least important in a <h6> tag. An example of a heading: <h1><strong>CSS Template Layout</strong></h1> This tells the browsers and the search engines too, that this page is primarily about: ‘CSS Template Layout’ All browsers have a default size (for each<h> tag) as to how it renders text when placed between these tags. Many of these defaults can be unusable (especially<h1>) because they come out too big. But never fear, CSS is here. We will use CSS to make the text sizes more to our liking. 2. <p> The Paragraph tag is used to mark parts of the pages as being ‘paragraphs’, simple enough. Paragraph tags are what they call a ‘block element’; that means that it acts like a block where a
  • 2. Naveen Kumar Veligeti 2 space is automatically inserted before and after each <p> tag pair. You see it work in the examples coming up. 3. <ul> and <ol> List tags will be used to create our menus. The tag <ul> is the ‘un-ordered list tag’ that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term ‘un-ordered’. The other list tag mentioned (<ol>) is the ‘ordered list tag’ and it creates a list that, instead of bullets, the list elements are marked with numbers or letters. Code examples to follow. 4. <div> We all know what the <div> tag is about since we all read the previous article, right? We will use div’s to create containers for parts of our page. One div will be used to ‘hold’ our navigational menu and another div to ‘hold’ the main page. 5. <a href> The most important tag in HTML: the ‘link tag’ or the ‘hyperlink tag’. This makes text ‘hyper’ so that when we click on it we can load another page or activate/call some JavaScript (otherwise known as ECMA script). 6. <img> This is the ‘image tag’, allows you to link to images so that they show up in our pages. In HTML images are not embedded into the actual page, instead the image tag (<img>) only points to where the image is and the browser will attempt to load that image when a surfer loads your HTML page. That covers the HTML tags we will use in our layout! No need for table tags, <br> tags and nasty <font> tags. Basic CSS Concepts: Part 2 The basic page template Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will use as the starting template for this tutorial. You can find it under the heading: ‘To create the practice HTML page do the following:’ Follow the instructions there and create your basic HTML page. Once you have created the template page, create a folder and name it something like: ‘myCSSwebsite’ and then drop the HTML page into it. In that same folder, create a new text document and call it: ‘myCSS.css’. Once created open that file and paste in this template CSS code and then save it: /* Generic Selectors */ body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px;
  • 3. Naveen Kumar Veligeti 3 color: #333333; background-color: #F9F9F9; } p { width: 80%; } li { list-style-type: none; line-height: 150%; list-style-image: url(../images/arrowSmall.gif); } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: bold; color: #000000; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; font-weight: bold; color: #000000; border-bottom: 1px solid #C6EC8C; } /**************** Pseudo classes ****************/ a:link { color: #00CC00; text-decoration: underline; font-weight: bold; } li :link { color: #00CC00; text-decoration: none; font-weight: bold; } a:visited { color: #00CC00; text-decoration: underline; font-weight: bold; }
  • 4. Naveen Kumar Veligeti 4 li a:visited { color: #00CC00; text-decoration: none; font-weight: bold; } a:hover { color: rgb(0, 96, 255); padding-bottom: 5px; font-weight: bold; text-decoration: underline; } li a:hover { display: block; color: rgb(0, 96, 255); padding-bottom: 5px; font-weight: bold; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #C6EC8C; } a:active { color: rgb(255, 0, 102); font-weight: bold; } /************************* ID's *************************/ #navigation { position: absolute; width: 210px; height: 600px; margin: 0; margin-top: 50px; border-right: 1px solid #C6EC8C; font-weight: normal; } #centerDoc { position: absolute; padding: 0 0 20px 0; /*top right bottom left*/ margin-top: 50px; margin-left: 235px; }
  • 5. Naveen Kumar Veligeti 5 Don’t let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page. In between the <body></body> tags you will need to insert this code: <div id="navigation"> <h2>The Main navigation</h2> </div> <div id="centerDoc"> <h1>The Main Heading</h1> <p>Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.</p> <p>Follow the instructions there and create your basic HTML page ... and do it now!</p></div> And in between the <head> </head> tags you will need to insert this: <title>First CSS Tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="myCSS.css" rel="stylesheet" type="text/css"> With this in place we will be able to start styling our page. If you take a look at the HTML page now you may be surprised to see that we already started! If you haven’t set the page up yet, please do so to make sure you have everything working thus far. Layout a Page with CSS: In Part 1 we created a classic two-column layout with left side navigation using CSS and only a few types of HTML tags.
  • 6. Naveen Kumar Veligeti 6 Part 1 presented the code for the page and explained what HTML tags we were going to use. Now we will look at the actual HTML code used so far and the CSS. Our page so far is really very simple. As you may already know, all the content (text, images, Flash etc) that the user sees when viewing a web page is marked-up/coded with HTML in- between the <body> and </body> tags*. In this case we have this: <div id="navigation"> <h2>The Main navigation</h2> </div> <div id="centerDoc"> <h1>The Main Heading</h1> <p>Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now!</p> </div> In the above code we see that we have 2 main sections demarked by using <div> tags. As you learned in part one of this tutorial, <div> tags are designed to be used to create a ‘division’ in the document or in other words create a container. We have created two such containers and given them each of them a unique ID: <div id="navigation"> ... </div> You will notice that the entire contents of the page are contained in one of these two major page divisions. So the first questions are what are the rules of ID’s in HTML pages and why do we use them and assign them to page elements like DIVs? 1. First of all you can assign ID’s to any HTML tag. So I could have assigned an ID to a <p> tag as well. 2. An ID in a page should only be used once. That is to say that no two elements should have the same ID. ID’s are meant to uniquely identify a page element. So in the above example we know that there is only one page element with an ID of ‘navigation’ and only page element with an ID of ‘centerDoc’. I like to use ID names that talk to you, it is pretty clear what is going on in each division we created above.
  • 7. Naveen Kumar Veligeti 7 3. ID’s on HTML page elements (tags) are used in CSS. We can target ID’s in our CSS code to change the appearance, position and even behavior of that element by referencing the ID of the element. Inside the <div> tags we use header tags (<h1> and <h2>) to set the headers. I speak to what header tags mean in part 1 of this tutorial. And finally I have some <p> tags, and of course I insert the text that makes up this simple page in-between them. Now I am going to jump to our CSS file that is attached to the HTML page. We attach the CSS document with this line of code in between the <head> </head> tags: <head> <link href="myCSS.css" rel="stylesheet" type="text/css"> </head> Like a normal page link we have an ‘href’ attribute this time pointing to a CSS document that has all our CSS code that will affect this page since it is linked to it. This is not the only way to associate CSS code to pages (there are a few other ways) but we will leave that to another article. So in the above link we name the CSS file name with this: ‘href=”myCSS.css”‘ and we tell the browser that the link is to a CSS page with this attribute: ‘type=”text/css”‘. All that is important here is that the link point to a CSS file with the name: ‘myCSS.css’ So now that we got the style sheet linked to the document, lets look at some CSS code. This first snippet of code ‘styles’ the unique ID’s we were talking about before: #navigation { position: absolute; width: 210px; height: 600px; margin: 0; margin-top: 0px; border-right: 1px solid #C6EC8C; font-weight: normal; } #centerDoc { position: absolute; padding: 0 0 20px 0; /*top right bottom left*/ margin-top: 50px; margin-left: 235px; } There is a lot going on here so we will focus on just a few elements for now. In the above elements we have 2 selectors, one for each ID and each selectors are grouped/contained by using the curly brackets: { }. So here is the CSS selectors code with all their guts removed:
  • 8. Naveen Kumar Veligeti 8 #navigation { /*Look ma no CSS rules!*/ } #centerDoc { /*Look ma no CSS rules!*/ } I just inserted the text: ‘/*Look ma no CSS rules!*/’ to show you where the CSS code would normally be. So now you can see that anything in between the curly brackets is part of one group or package that in CSS can generically be called a selector. In our above examples you can see that there is some text that appears before a curly bracket. That text gives a name to the selector. So in this case we have two selector names and thus to selectors: #centerDoc and #navigation. So why do we have the # symbol in front of the text? Why can’t we call it simply ‘centerDoc’ and ‘navigation’? Layout a Page with CSS: Part 2 Like HTML and programming certain text in certain places have special meaning that tells the system to do something particular. In this case whenever you have a # symbol in front of a name of a CSS selector we are saying that this selector is a special type of selector called an ‘ID’ selector. What is so special about an ID selector? That type of selector can only be applied to one element in the HTML page. Sounds familiar? So those of you not asleep at the computer, now see that we have a CSS ID selector for each of our HTML divs that have an ID, and they have the same corresponding names. So the CSS selector #centerDoc applies to the div: ‘<div id=”centerDoc”>’ , you got it? Whatever CSS rules/styles we choose to code into our ID selector will change what appears inside the corresponding div. So for the div with the id of: ‘navigation’ we have these CSS rules: #navigation { position: absolute; width: 210px; height: 600px; margin: 0; margin-top: 0px; border-right: 1px solid #C6EC8C; font-weight: normal; } Notice at the bottom we say all text will have a font-weight of ‘normal’:
  • 9. Naveen Kumar Veligeti 9 font-weight: normal; We could just as easily have said that we want all the text to appear in the div (the div with the ID ‘navigation’) bold instead: font-weight: bold; This tutorial was about creating an easy to use page template so I will point out the 2 main elements that make this thing work. In our page the navigation div is sitting on the left and it has a border … why? It has a nice light green 1 pixel border because I set this in my CSS: border-right: 1px solid #C6EC8C; Pretty self explanatory, no? I would suggest changing the color of the border and changing the pixel thickness of the border and see how it looks. Why is the navigation sitting on the left of the page while the centerDoc is to the right of it? Well first thing to look at is this line in the navigation selector: position: absolute; This tells the browser to just place this div on the page as is. This is oversimplifying the subject, but for our purposes this works for now. The real magic in this is the CSS code for centerDoc: #centerDoc { position: absolute; padding: 0 0 20px 0; /*top right bottom left*/ margin-top: 50px; margin-left: 235px; } The line : padding: 0 0 20px 0; /*top right bottom left*/ Tells the browser to insert 20px (pixels) of padding to the bottom of the div with the ID ‘centerDoc’.
  • 10. Naveen Kumar Veligeti 10 Let’s back up here a second. We just used something called ‘padding’ and it is what it sounds like: Space that is wrapped around our element (tag). CSS has this feature and concept of a box model that essentially is a box that wraps around HTML elements. This box model consists of: padding, margins, borders and the actual content. This allows us to place a border around elements and space elements in relation to other elements. From the inside out it is ordered like so: content -> padding -> border -> margin So in our case anything in between our <div> tags is the ‘content’. Right after that comes the padding. Then there is a border and finally a margin. Margin and padding may seem like the same thing but if you think about it, you can see how being able to control the space before the border (padding) and after the border (margins) can really effect your layouts. In this example you notice that the navigation div sits higher up on the page than the centerDoc div. This is not because of the order that which they appear in the HTML, as they normally would without CSS, rather it is because of the margin settings I set for each selector; for centerDoc I set the top margin to 50px: margin-top: 50px; And for the navigation div I set it to: margin-top: 0px; This sets its top margin to 0 pixels so it will therefore be 50 pixels higher than the centerDoc div. I would suggest that you move the position of the navigation div under the center doc div in the HTML just to see if it changes anything, you will see that where the div appears in the actual HTML code has nothing to do with how it will appear to the user now that CSS positioning has been used. Another thing to try is to play with the CSS values and see what happens, change the padding, change the margins etc . Let’s finish this discussion of CSS in Part 3. 1. There is more HTML that appears on top of the first <body> tag that is very important to the page but does not actually directly have anything to do with what appears in the page (from the users perspective) so I won’t discuss it in this article.
  • 11. Naveen Kumar Veligeti 11 we broke down the major sections of HTML on the page and established separation using DIV tags with unique ID’s attached to them: <div id="navigation"> ...</div> <div id="centerDoc"> ...</div> Using DIV’s (to position the major page sections) is the alternate method to what most people use: tables. I would argue one method is not necessarily better than the other. But consider that CSS is the ‘official’ method to position page elements and tables should only be used to hold tabular data. On the other hand there are simply times when using tables is much easier and CSS just doesn’t cut it. That said, our current layout (left or right side navigation) CSS is far easier to use and is an overall better solution. Now that we have that covered, everything gets really easy from here. We’ve established our main document and the major sections are in place, all we need to do is add our text and images. Breaking down the page: This page is simple, we have just a single heading: <h1>The Main Heading</h1> And a single paragraph: Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now! We define how the paragraphs and the headings will look in our CSS code: p {
  • 12. Naveen Kumar Veligeti 12 width: 80%; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight: bold; color: #000000; } This is pretty much self-explanatory. The only thing that should be mentioned is that we set the width of the <p> tags to 80%. This allows us to control all of our text width in one easy to edit spot. The only thing missing from the page is the actual navigation. The best and easiest way to do this, is by using list (<li>) tags. That makes sense, since navigational menus are essentially a list of pages. We styled the list item tags with this CSS: li { list-style-type: none; line-height: 150%; list-style-image: url(../images/arrowSmall.gif); } The above code uses an image as the bullets for the list and makes the space between the listed items 1 and ½ times larger than normal (I like a little more ‘breathing room’). You don’t have to have an image for the bullets, you could leave it with no images and no bullets by just removing the attribute: list-style-image: url(../images/arrowSmall.gif); Or you could use one of the built in bullet options: ‘disc’, ‘circle’ and ‘square’. Next you should add to the HTML page an unordered list (<ul></ul>) in between the navigation DIV’s just under the ‘main navigation’ heading: <h2>The Main navigation</h2> <ul> <li><a href="cssTutorialPage1.htm">Page One</a></li>
  • 13. Naveen Kumar Veligeti 13 <li><a href="cssTutorialPage2.htm">Page Two</a></li> </ul> To make things easier (for the purpose of the article), change the CSS affecting the list item tags (<li>) so that we use a built in bullet: li { list-style-type: disc; line-height: 150%; } Now we have the navigation! That pretty much covers our goals for this tutorial, but we have just scratched the surface of CSS. As you can see, we created a nice looking page, while using very few types of HTML tags. At this time there isn’t much text on the page, but we could add to the page easily, building it out to include lots of information and images with practically no HTML work at all! Inserting images with CSS This article assumes that you know at least basic HTML; you know what a tag is and how to use simple tags like the <img> or the <p> tag. If this is confusing you, you need to read my tutorial for total beginners on web design – it’s really easy and people seem to like it, so give it go! Ok, I assume that everyone knows what images are, as we all have seen images on web pages. Images are not technically inserted into a web page (to be nerd precise), rather images are linked to web pages and typically we use the image tag (<img>) to create holding space (or a reference to the image) for the image. When someone loads a web page (by going to the URL), it is the browser, at that moment, that actually gets the image from the web server and inserts it into the page for you to see – makes sense? This is different from using a program like MS Word for example, where with Word, when you insert an image into a Word document, the image actually becomes ‘part’ of the actual
  • 14. Naveen Kumar Veligeti 14 document. When you save a Word file, all you need to keep track of is that one Word file, and you know the images you inserted will be there when you open it again no matter where you move the file. Where as with an HTML page, since you are only referencing the images with the image tag, you have to make sure that the images you are linking to always stay in the same spot in relation to the web page. When people mess up that path between the HTML page and the images it is referencing, you get that broken link icon that everyone loves to see. You are seeing that broken link icon because the browser can’t find the image you are referencing in the <img> tag. Ok, if you didn’t know much about the mechanics of images loading in web pages, now you know too much! Lets move to something practical. Using CSS to insert images into your web pages This next part is really easy to understand, easy to use and can be very powerful – triple bonus! With CSS, all block-level and inline elements (tags) can have background images inserted into them. Block - level tags are <p> and <div>. Even though you can insert images into any type of tag (block-level or inline), I think it is better form in most situations to use block-level tags for this sort of thing. But in reality it doesn’t matter if you use block-level tags, or inline tags because you can turn any tag into a block-level tag and vice versa; with this simple CSS code I change any tag to block-level: display: block; Or the reverse: display: inline; So what? Remember my newsletter where I talked about inserting backgrounds with CSS? In the same way you can insert images in the backgrounds of your web pages, you can do it with any other element. This combined with some extra padding and you have your headline image where you want it. Take a look at this code where I use this technique: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS image placement</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  • 15. Naveen Kumar Veligeti 15 <style type="text/css" media="screen"> #headline1 { background-image: url(images/newsletter_headline1.gif); background-repeat: no-repeat; background-position: left top; padding-top:68px; margin-bottom:50px; } #headline2 { background-image: url(images/newsletter_headline2.gif); background-repeat: no-repeat; background-position: left top; padding-top:68px; } </style> </head> <body> <div id="headline1">Some text … </div> <div id="headline2">Some more text .. </div> </body> </html> To keep this example easy to follow, I inserted the CSS code into the web page itself. Typically I would place my CSS code in a separate CSS file and link to it so that I could reuse the CSS code on many pages. In the above CSS code you will notice that I insert a background image for each ID (headline1 and headline2) and I increase the padding at the top (padding-top:68px) to push down the text to make space for the background images. This may seem unclear now, so just take a look at the page and then pop open the source code and check it out for yourself. Feel free to take a copy and play with the padding number and see how it changes things. Why did I add 68px to the padding? The image is 68px tall, but I could put any number I like to get the placement I want. Padding does not affect the background image; it only affects the contents inside the tag/element. In this case I used <div> tags. The 3 ways to insert CSS into your web pages For some of you, this may sound like a real lame article. But you ought to give it a chance because I don’t write about stuff you’ll never use! I avoid marginal, nerd centric ivory tower blather like a cat avoids water.
  • 16. Naveen Kumar Veligeti 16 I’ve read hundreds (sadly, this is true) of those 2-inch thick nerd books (I don’t get out much) and I can’t stand it when people waste paper on that kind of generally useless stuff. So read on, eager student, and you will be well on your way to building your own killer web sites! The wise people who created CSS came up with 3 basic ways for you to use CSS in your web pages: 1. With an external file that you link to in your web page: 2. <link href="myCSSfile.css" rel="stylesheet" type="text/css"> or using the import method: <style type="text/css" media="all"> @import "myCSSfile.css"; </style> Why use the import method versus the link method when using external style sheets? Use the import method if you want to support really old browsers like Netscape 4.0. Let me explain: Netscape can’t handle most CSS beyond font settings and colors, if it finds any other types of CSS it could cause good old Netscape 4 to crash in some occasions or at the very least mangle your page. Netscape 4 does not understand the @import method of linking to a style sheet like the newer browsers can, so Netscape just ignores it. You can use this to hide the fancy CCS code in the external style sheet by using the @import method so all the good browsers can reference it while keeping Netscape 4 out of the picture. Netscape 4.0 is pretty much dead (that is really a good thing) so I personally don’t worry much about it. But for some of you, it may be of concern so I thought it should be mentioned. 3. By creating a CSS block in the web page itself; typically inserted at the top of the web page in between the <head> and </head> tags: <head> <style type="text/css"> p { padding-bottom: 12px; } </style> </head>
  • 17. Naveen Kumar Veligeti 17 4. By inserting the CSS code right on the tag itself: <p style="padding-bottom:12px;">Your Text</p> So some of you may be asking why have the 3 methods of including the CSS in a web page? The answer is: flexibility and laziness! Ok I’m kidding about the laziness, replace it with ‘precision’. So what the heck does that mean? I think the easiest way to explain to you what’s going on, is by giving you real examples that demonstrate the differences. Wait a second, don’t fall asleep … the examples are short and I think that once you finish, you will see how easy it really is! Another reason that you want to continue reading this article is that you will gain a good understanding of some fundamental (and practical) CSS principles – remember that the difference between people who are really good at what they do, and those who are not so good, is in the mastery of the basics. Lets get down on it! Method 1: Create a separate CSS file and link it to your web page(s) The heading for this part of the article hints at why you would want to go through the trouble of creating a separate CSS file instead of just typing in the CSS code in the web page itself. Can you guess? Keep trying … times up! Did you get it? I could quote you some nerd centric description that describes the advantage; the problem is that only nerds who already know would understand! In a nutshell: by keeping the CSS code in its own file, you can link that CSS file to as many web pages as you want. This has two major advantages: 1. You will have much less code in all your HTML pages – makes the pages neater and easier to manage and makes the web pages a little faster on the download. (Although this point is really minor in most cases, and is really over blown in my opinion by some people) 2. It can potentially reduce the amount of work you have to do in a big way. Why you ask? Simple; lets say you have 50 web pages where you’ve set the text to be black and the headline text (text in between the <h3> tags for example) to blue. Then one day you decide you want to change the color of the text. Since the CSS that controls the text color for the 50 pages is in one CSS file, you can easily change the color of your text in all 50 pages by changing one line in the CSS file!
  • 18. Naveen Kumar Veligeti 18 If on the other hand you had decided to include all your font color information in each page, you would have had to change all 50 pages. This would have been even worse if you had been using font tags, or CSS right on each tag, you would have to change the color settings/code on all the <p> and <h3> tags in all 50 pages! I can tell you from experience that that sucks big time! The rule: If you are going to have more than one web page with the same stylistic properties (that look the same in some way) you should create a separate CSS file and link your web pages to it. Method 2: Create a CSS block in the web page itself The Rule: Use this method if you want to override the CSS you have in a linked CSS file or if you only have a one-page web site. Now that we covered the first method of putting all your CSS code in a separate file and linking to it, the other methods are easy to describe. CSS stands for (is the acronym for): ‘Cascading Style Sheets.’ I think the words ‘style sheets’ in CSS are self-describing … we know what ‘style’ in style sheets mean. But what is the meaning of ‘cascading’ in CSS? The cascading effect in CSS The word ‘cascading’ in CSS describes a cascading mechanism; that is to say that the CSS code on the page itself will override the CSS code in a separate linked file. And subsequently, CSS declared ‘inline’ on the tag itself would override all other CSS. So let’s look a practical example; let’s say you have a web site with 50 pages where the layout and fonts are the same on all 50 pages. Wisely you put the CSS information that sets the layout and font choices in a separate style sheet, but for a particular page you need to change the color of some of the text and add a border around a paragraph. This is a perfect example where you might want to place a little CSS in the page itself since the color and border will be unique to that page. Is this all sinking in? Method 3: Embed the CSS right on the tags themselves (called inline CSS) The Rule: Use this method on a unique element/tag that you want to affect with CSS. An example can be with a special heading on the page where you want to have a little more padding than you typically do for a heading. Instead of creating a class elsewhere that will only be used on this one occasion, it makes sense to me to just include the CSS inline. I have to stress that inline CSS is something you should rarely if ever use because it can get messy quick.