CSS Tutorials

UPDATED: MAY 06, 2015 – ARTICLE: CSS TUTORIALS

CSS Tutorials, CSS Codes and HTML codes, a brief introduction to CSS Codes. 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.

Introduction

When you make a website you have CSS codes, HTML codes, Java Script codes and lots more. 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, follow our CSS Tutorials to learn more.

By 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.

Our CSS Tutorials will show you position your text, and you will learn how to change the the following: font colour, font size, font family (style of text), font weight the text (bold), you can even justify 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.

How to move text any where on your page.

To move the content up or down – top:210px;
Left or right – margin-left: 200px;
If you want to change the width – width:600px;

CSS Code

div#textcenter
left:20;
position:absolute;
top:210px;
width:600px;
margin-left: 200px;
}

HTML Code

<div id=”textcenter”>
<p>Place text here</p>
</div>

Any text you place in the HTML Code above will be controlled by the CSS Code left.
 

How to have a logo any where on your page.

To move the logo up or down – top:100px;
Left or right – margin-left: 200px;
If you want to change the width – width:200px;

CSS Code

div#logo
left:20;
position:absolute;
top:100px;
width:200px;
margin-left: 200px;
}

HTML Code

<div id=”logo”>
<a href=”http://www.yourdomain.com” title=”image title”>
<img src=”http://www.yourdomain.com/image.png” alt=”your alt text” width=”200″ height=”100″></a>
</div>
 
 

Changing your text colour, font weight, font size, line height and justify. (Justify means that your text will align to the right).

CSS Code

p
{
color:#46370F;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 17px;
text-align: justify;
line-height: 18px;
}

HTML Code

<p>Any text you place in here will be controlled by the CSS Code left</p>
– Change font colour
– Change font style
– Change font weight normal or bold
– Change font size
– Text will goes all way to left
– Change text line height
 

With CSS Codes we can reduce the number of tags used when we create a website

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>CSS Tutorials</h1>

This tells the browsers and the search engines too, that this page is primarily about: CSS Tutorials – this is how you would place the tag in your site using HTML (above), it would look like the above in the code and like this on your webpage below.

CSS Tutorials

Only use the H1 tag once on each webpage. The heading tags are larger than normal text and will stand out on the page.

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, 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.

If you have a lot of content you can also use h3, h4, h5, and h6 tags.

The CSS code that controls the look of your heading tags will look something like this. Below is the CSS code for the H1 heading, the H2, H3, H4, H5, H6 will be the same except they will start with h2, h3 etc.

h1
{
color:#000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 40px;
line-height: 44px;
}

By changing the font colour, font style, and font size you can have complete control of your heading tags.

If you would like all your tags exactly the same delete all previous heading CSS codes and use the one code below.

h1,h2,h3,h4,h5,h6
{
color:#000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 40px;
line-height: 44px;
}

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 paragraph open the paragraph with <p> write your text and close the paragraph with </p> the CSS Code that controls the paragraph allows you to change the font-family, font-weight, font-size, line-height and text-align you can copy the CSS Code Below.

p
{
color:#46370F;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size:17px;
line-height: 18px;
text-align: justify;
}

You might want to have 2 or 3 different paragraphs on the same page with different size text or different colour text then use the below CSS code.

p.dd2
{
color:#c00000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size:17px;
line-height: 18px;
}

<p class=”dd2″>Use this HTML code for the above CSS code, everything you place in this code will only work here. I have changed the text colour to red, you could also make this text larger, instead of red and all other text on your page will remain the same.</p>

To add another paragraph with a different colour copy the code then change dd2 on the CSS and HTML to dd3 next one make dd4 and so on.

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

<ul>
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.
</ul>

The above HTML Code would look like this on your webpage (see below).

    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

<ol>
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 across the page.
</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 across the page.

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>Welcome to our CSS Tutorials</li>
       <li>Hope you are enjoying this CSS Tutorial</li>
       <li>You can also learn to write your own CSS codes</li>
 </ul>

The above HTML Code would look like this on your webpage (see below).

  • Welcome to our CSS Turorials
  • Hope you are enjoying this CSS Tutorial
  • You can also learn to write your own CSS codes

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>Learning how to use CSS codes is going to help me</li>
       <li>Please click the social buttons at the bottom</li>
       <li>Thank you have a nice day</li>
</ol>

 
The above HTML Code would look like this on your webpage (see below).

  1. Learning how to use CSS codes is going to help me
  2. Please click the social buttons at the bottom
  3. Thank you have a nice day

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 Examples:

<div style="background: lightblue">
<p>Using the code we can easily place a colour on our background.</p> 
</div>

 

Using the code we can easily place a colour on our background.

 

<div style="color: #FFFFFF; padding: 5px; background: #000000;">
Using the code we can easily place a colour on our background black by changing the background: #000000; code. Some padding around the text in this case 5px and change the text colour to white here color: #FFFFFF;</div>

 

Using the code we can easily place a colour on our background black by changing the background: #000000; code. Some padding around the text in this case 5px and change the text colour to white here color: #FFFFFF;

 

<div style="color: #FFFFFF; padding: 5px; background: #000000; font-size: 25px; line-height: 25px;">
Using the same code as above we can add font-size: 25px; line-height: 25px; to make the text larger
</div>

 

Using the same code as above we can add font-size: 25px; line-height: 25px; to make the text larger

 

5. Link Tags

<a href=”http://www.yourlink.com/”>Anchor Text</a>

Link Open In New Window Below

<a href=”http://www.yourlink.com/” rel=”target=”_blank”>Anchor Text</a>

No Follow Link Below

<a href=”http://www.yourlink.com/” rel=”nofollow”>Anchor Text</a>

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

css tutorials

What do I replace on the link? Replace the green text with your stuff.

<img src=”http://www.mywebsite.com/image.jpg?“width=”600 “height=” 315 “alt=” your keyword here “>

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.

You might also like these sites

We also recommend the below sites on CSS Tutorials.

CSS Tutorials from w3schools
CSS Beginner Tutorials
CSS Tutorial – Table of contents

Please Share





Create An Online Shop

Build your own website and sell stuff. Add as many products as you want and it won't cost you any extra.

Get super fast hosting
Free domain registration
Outstanding reliability
Free shopping basket
Easy to use site builder

Try creating your website free for 30 days. No credit card required, click the below link.


Build and host your own website on super fast reliable hosting.

Free domain included or add a domain you own - Install WordPress in a few clicks - Great support team.

Get a Website that Works. It's quick and easy. No experience necessary.

Sign up today and get 20 percent off your hosting.