This CSS tutorial takes you through all you
need to learn about Cascading Style Sheets (CSS). You'll start out with basic styles, run
through styling text, adding backgrounds and borders, styling tables and forms,
and much more.
CSS: Lesson 1 - What is CSS?
What is Css?
HTML allows you to put information (content) on a webpage, css allows
you to give it style. Some of you might
be asking doesn’t HTML already have some kind of style and answer is no. Once
you start using CSS you will never ask that question again.
So how does CSS work. In order for you to add style to a web page
to have to specify where style should be applied to. For example : you would like to have
background of the web page be red. So
you have to specify the tag, in this case body, and then give set the css
property to Red.
Here is one way to do that.
<html>
<head>
<style>
Body
{
Background-color: red;
}
</style>
-----------------------------------------------
</head>
<Body>
</body>
</html>
CSS: Lesson 2 - Adding CSS to an HTML file
Different ways CSS can be used. There are three ways to add css to html.
1.
Within the tag itself, this Is called inline CSS
An example would be if you wanted to target
the body and have the background display red, then you would write it like
this: <body style=”background-color: red”>
2.
You can display css within the <head>
<style></style> </head>
this is called embedded because it is in the same file but embedded in
the head tag. You can see an in the
previous lesson
3.
The third way is place all your css in a
file. You must save the file with a css
extension (e.g. myLayout.css) . you would use a special <link> tag to
connect to the file . we will learn more
about this in later chapters.
CSS: Lesson 3 - Excercise using Inline CSS
Hands-On:
In the following exercise you will be creating paragraph tag
and styling it with css. You will be
giving the text of contained in the paragraph as Blue and you will
increase the current size of the font by 300%. Please do the exercise do not worry about
actual usage for now we just want to kind of introduce you to inline css and
how percentages are used. You will learn
a lot more as the course goes on.
<html>
<head>
<title> My First Inline CSS Project</title>
</head>
<body>
<div>
<h1>My First
Css with Html Project</h1>
<p
style="color:blue;font-size:300%">This domain is established to
be used for illustrative examples in documents. You may use
this
domain in examples
without prior coordination or asking for
permission.</p>
<p><a
href="http://www.google.com">Google
information...</a></p>
</div>
</body>
CSS: Lesson 4 - how to use embedded CSS
Embeded CSS
Here is an exercise that will allow you to see how embedded css works. Embeded CSS is always contained within the <head> tag and actual css must be contained within the <Style> tag.
<html>
<head>
<title>CSS Basics</title>
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>This is the first paragraph – it is green <p>
<p> <p>
<p>The third paragraph is also green - what is going on. This probably why i need use an id or class to identify a specific paragraph tag and not all of them</p>
</body>
</html>
CSS: Lesson 5 - IDs and Classes
In this exercise we will learn what the purpose of ids and
classes are. For now you can think of
both ids and classes as identifiers ( In
the Css world they are known as selectors).
So what you do is you apply an identifier (or selector ) to a tag. Then within the style tag (located within the
<head> tag) you would write a dot (.) if you identified the tag with a
class or a # if you identified the tag
with an id.
For example
IDs
<P id=”blue”> in the style tag you would write #blue to select that id and then apply the Css.
Classes
<P class=”blue”>
in the style tag you would write
.blue to select that class and then apply the Css.
So what is the difference between id and class? Well id are usually used for identifying and
apply the css for one tag, while class is used for identifying many tags.
<html>
<head>
<title>IDs and
Classes for Learning CSS </title>
<style
type="text/css">
.bigfont {
font-size:200%;
}
#blue {
color:blue;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<p class="bigfont">you will notice that the
first paragraph get the big font <p>
<p id=”blue”>
Classes and ID’s are very similar…. They identify the paragraph that you
want to apply the css to.</p>
<p id="blue" class="bigfont">wow I
didn’t know we can combine a class and an id within the same tag.</p>
<p>The third <span class="underline bigfont bold">we can have many classes applied
to a tag… here we are using the span tag… the span tag doesn’t really do much as you can see but we
can use it to just apply css, which is good enough for me J</span>. This
text is after the span tag</p>
</body>
</html>
CSS: Lesson 6 - What are DIVs?
Divs? What are
divs? Think of divs as just generic
tags. We often use divs to create
layouts by DIViding the page, which is how I believe it got its name, which we
will do in one of your projects later.
For now lets just grasp the concept.
Our goal in this exercise is to
<html>
<head>
<title>Divs
Hmmm?</title>
<style
type="text/css">
.bigfont {
font-size:200%;
}
#purple {
color:purple;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.redbox {
background-color:red;
width:200px;
height:200px;
}
.yellowbox {
background-color:yellow;
width:600px;
height:200px;
}
</style>
</head>
<body>
<div
class="redbox">
<p
class="bigfont">This a red box with some big font J <p>
</div>
<div class="yellowbox">
<p
id="green" class="large">This is a yellow box with some
big font.</p>
</div>
<p>the css of
three classes has been applied to this ->
<span class="underline bigfont
bold">I am underlined big and
bold</span> in this
paragraph is underlined.</p>
</body>
</html>
Subscribe to:
Posts (Atom)
Follow Us
Were this world an endless plain, and by sailing eastward we could for ever reach new distances