Introduction to CSS
Welcome to our CSS Tutorials here I will give you a brief introduction to CSS, 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.
CSS code is simply written instructions that tells Web browsers like FireFox and Internet Explorer how to display
things on a web page, each CSS Code is
named,
and on the CSS Code you can adjust the
position left,
position top,
width,
and lots more, adjusting the width you can design your text on a page to stop at a certain width, the text will then move down to
the next line when the text reaches the width you have set the CSS Code to. Now that you know how to position your text you will want
to know how to change the the following
font colour,
font size,
font family
(style of text),
font weight
the text (bold), you can even
justfy
the text so it goes all the way to the right like this page and the line height (line height brings the text closer or
further apart up and down) if you increase text size then you will have to increase
line height
as well to stop text overlap. Copy the CSS Code below.
Why does each CSS Code have to be named? The CSS Code works with the HTML Code
so you name your HTML Code with the
same name
With CSS Codes we can reduce the number of tags used
The power of CSS, will help us to reduce the number of HTML tags we use on a web page big time, all the while still being able
to layout great looking web pages using only 6 types of HTML tags.
The tags we will use to layout the content:
1. The Heading Tags
<h1></h1> Most Important
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> Least Important
Heading Tag Example:
<h1>Introduction to CSS</h1>
This tells the browsers and the search engines too, that this page is primarily about: ‘Introduction to CSS’ this is how
you would place the tag in your site using HTML (above), it would look like this on your webpage (below) only use the <h1>
tag once on each webpage.
Introduction to CSS
All browsers have a default size heading tags as to how it renders text when placed between these tags. Many of these defaults
can be unusable especially <h1> tags because they come out too big. Now you don't have to worry, CSS is here, and you
are learning it, so we will use CSS to make the text sizes more to our liking.
In Brief:
Use the <h1> tag for your main webpage heading also try to have your main keyword in it only use the <h1> tag once on
each webpage.
Use the <h2> tags for other headings on your webpage you can use it more than once also try and put keywords in it.
Try use <h3>, <h4>, <h5>, <h6> tags some where on your webpage.
Copy the CSS Code below you can change the text size, colour and font yourself, to have the code for the other tags copy
the code and replace <h1> with the <h2> tag etc, so you will have 6 codes all the same except for the tags they will
be <h1> to <h6> then you can change any of the 6 tags to what you want
see sample.
Remember the HTML Tag also must have the same
no as the CSS Code it controls, have fun.
h1 Heading Tag CSS Code
YOU MIGHT HAVE TO INCLUDE THE CSS STYLE CODE BELOW.
<style type="text/css">
CSS CODE HERE
</style>
H Tag And Alt Tag Checker Check your h1 Tags Below
2. Paragraphs
<p></p>
Paragraphs Tag Example:
<p>This is a new paragraph as you can see when I want to start a new paragraph it will leave a line on my web page</p>
<p>This is a new paragraph as you can see when I want to start a new paragraph it will leave a line on my web page</p>
Above sample is how you would use the code in HTML, and below is how the same code will look like on your webpage.
This is a new paragraph as you can see when I want to start a new paragraph it will leave a line on my web page
This is a new paragraph as you can see when I want to start a new paragraph it will leave a line on my web page
The Paragraph Tag <p> 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 space is automatically
inserted before and after each <p> tag pair.
When you make a new paragragh open the paragragh with <p> write your text and close the paragragh with </p>
the CSS Code that controls the paragragh allows you to change the font-family, font-weight, font-size, line-height and text-align
you can copy the CSS Code Below.
<p> Paragraph Tag CSS Code
Have You tried our HTML Editor?
3. List tags
<ul> and <ol> and <li>
List tags Tag Example: <ul>
This is how you would place the code on your site using HTML
<p>When you use the list tag you can move your text or anything to the right of the page, the more you use the more it moves
accross the page.</p>
<ul><p>This line has moved any text here will always start from this point as you can see. When you have
finished you must put the same amount of closing tags as opening tags. </p></ul>
The above HTML Code would look like this on your webpage (see below).
When you use the list tag you can move your text or anything to the right of the page, the more you use the more it moves
accross the page.
This line has moved any text here will always start from this point as you can see.
When you have finished you must put the same amount of closing tags as opening
tags.
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’.
List tags Tag Example: <ol>
This is how you would place the code on your site using HTML
<p>When you use the list tag you can move your text or anything to the right of the page, the more you use the more it moves
accross the page.</p>
<ol><p>This line has moved any text here will always start from this point as you can see. When you have
finished you must put the same amount of closing tags as opening tags. </p></ol>
The above HTML Code would look like this on your webpage (see below).
When you use the list tag you can move your text or anything to the right of the page, the more you use the more it moves
accross the page.
This line has moved any text here will always start from this point as you can see.
When you have finished you must put the same amount of closing tags as opening
tags.
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
List tags Tag Example: <li>
Unordered Lists
The <ul> tag is used to define unordered lists and the <ol> tag is used to define ordered lists. Inside the lists, the
<li> tag is used to define each list item.
This is how you would place the code on your site using HTML
<ul>
<li>Create a Website</li>
<li>Create a Website</li>
<li>Create a Website</li>
</ul>
The above HTML Code would look like this on your webpage (see below).
- Create a Website
- Create a Website
- Create a Website
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
Ordered Lists
Change the <ul> tag to <ol> and the elements are marked in numbers
This is how you would place the code on your site using HTML
<ol>
<li>Create a Website</li>
<li>Create a Website</li>
<li>Create a Website</li>
</ol>
The above HTML Code would look like this on your webpage (see below).
- Create a Website
- Create a Website
- Create a Website
4. Div Tags
<divstyle="?????????"> </div>
If you use the <div> tag combined with CSS, you will create a page that is easy to manage and manipulate later. Using the
<div> tag allows you to define the page in terms of the logical divisions of the page, not just the locations in the
layout. Most Web pages have fairly standard content chunks, and if you use the
<div> tag to divide them, you'll be ready to style them however you'd like.
Div tags Tag Example:
This is how you would place the code on your site using HTML
<div style="background: lightblue">
<p>Using the code we can easly place a colour on our background.</p>
</div>
The above HTML Code would look like this on your webpage (see below).
Using the code we can easly place a colour on our background.
5. Link Tag
<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.
6. Image Tag
<img>
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.
|
Yola Website Design
