THE BEST UI KITS MONEY CAN BUY

Click Here!

Beginners Ultimate Guide to HTML and CSS

Beginners Ultimate Guide to HTML and CSS

2019-09-23 |

A look at some of the most important basic tools for you to begin your coding hobby or career.

What is CSS

CSS or Cascading Style Sheets, is sometimes confused with HTML. The CSS is a markup language like the HTML, but the basic difference between these two is that whereas HTML decides what you see, CSS is responsible for how you see it. The design, colour, font, presentation, etc. comes under the territory of CSS. Before CSS, the developers had to use HTML to design the layout of the website.

This would often become a tedious job. CSS has a style sheet which is very efficient to use and does not require typing the same information over and over again. This has resulted in a faster and visually more appealing work. It is important to have uniformaity in your HTML document, which is not the case otherwise and hence it is important to take help of the CSS. There are so many option avaialbe and you should make use of CSS along with you HTML tags to make the result as per what you desire and that also very easily. Once you understand how it is done then things are very simple.

The Use of CSS

CSS is considered one of the most important tools that engages users to a web page. It makes the interface not just attractive, but more accessible, user friendly and flexible. The advent of CSS has enabled the same web pages to be available in different styles as well as different platform like a computer, tablet or mobile screen as well as Braille based device for visually impaired users. This has made CSS one of the most important languages for web development.

CSS is a great tool to design a website which aims to attract a large number of users. If you learn the basics well then there is no problem and you can get the desired results.

Using HTML Tables

HTML is the markup language which is used to create web pages. It is very easy to learn HTML and once you have a knack of it, the sky is the limit. But first, you must be fully aware of the basics. It is very important for a webpage as some point of time to have a table. For a table the border can be visible or hidden, depending on the setting you do in that tags. These tags are very important and you should understand each element of the tag with its attributes well. Once you do that then things will be much easier for you.

This tutorial throws light upon creating tables in HTML.

1. To create a table, put the markup tag <table>.
2. Now, to create a row, use the markup <tr> and </tr> this creates one row. You can use the markup to create as many rows as you wish.
<td> and </td> </table> to finish.
5. So, the instruction for a table with two rows and two columns would look like this:

<table>
<tr> <td> text body </td> <td> text body </td> </tr>
<tr> <td> text body </td> <td> text body </td> </tr>

6. You can also add heading through the <th> markup tag. This creates a cell with bold text in the centre. You can also create a border for your table, but that would be way simpler if you use CSS. Note: While creating tables make sure that you close all the elements before starting the new ones, otherwise your table would be complete mess. This is how you create a basic table in HTML, which is not very difficult also you have option to change color of a row of columns.

CSS - Styling a Navigation

A navigation menu on a website is one of the most efficient way to browse its pages. CSS has converted the boring HTML lists into flexible, beautiful and efficient navigation bars. It is always important that you make the webpage look attractive as that will help improve the user expriece when they visit your website, which is very important for you.

This tutorial helps you to learn how to create a horizontal navigation menu using HTML and CSS.

Make a navigation bar with lists, using HTML:

<div id = “menu”>
<ul>
<li> <a href= “index.html”> Home</a> </li>
<ul><li><a href = “aboutus.html”>About Us</a></li>
<li><a href= “services.html”> Services</a></li>
<li><a href= “contactus.html”> Contact Us</a></li>
</ul>
</div>

Now, since the navigation bar does not need any bullets or padding, let us remove these but using CSS

ul {
list style type:none
margin : 0;
padding : 0;
}

This command erases the bullets as well as the padding, so that the default setting of the browser is removed.

Designing a vertical bar

To design a vertical bar add the following command along with the above mentioned one:

a {
display: block;
width: 50 px;
}

This command converts the whole block (and not just the links) to appear vertically in the web page. We can also manage the width of the elements since the elements take up the full width of the block by default.

Designing a Horizontal Bar

To design a horizontal bar, there are two methods: inline and floating. The difference between these two is that in floating method, the links are of the same size.

For inline method, use the command:

li {
display: inline;
}

For floating method:
li {
float: left;
}
a {
display : block;
width : 50 px
}

HTML Styling Links

With CSS a developer can style the links in many different ways. This creates a fresh and more appreciate to the older underlined ones. This tutorial helps you learn about various links: It is very important that you are able to identify between, links which are visited and the ones which are not. For this reason the color of the link needs to change. It is very important that designers make use of the tags in the right way , so that they can give some more options to the users which is very important.

There are two ways a link can be styled:

1. Using the CSS properties like colour, background, etc.

2. Creating styles depending on the states they are in. There are four states for a link to be in: normal or unvisited links, visited (which the user has clicked before), hover (a link when a user places the cursor over it) and active (the moment the link is clicked).

This can be stylised by using text decoration as well as background colours for hover and active links.

Example:
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Assigning Colours

Another way to change the colour of the clicked and unclicked links to provide a better user experience. To do this, here is an example:

a:link {
    background-color: black;
}

a:visited {
    background-color: Blue;
}

a:hover {
    background-color: Yellow;
}

a:active {
    background-color: Red;
}

This way, you can add many styles to your links to create a unique and a more satisfying user experience for the visitors of your website. Once you really learn this well, you can start using them and things will be very good and you can make your website more attractive.

HTML – How to include a Stylesheet

Stylesheet or CSS is a really wonderful way to change the whole display of your web page. The advent of CSS has made the websites more beautiful, flexible and efficient. Any developer who wants to attract a large traffic to his/her website cannot do without CSS. There are three ways to include a Stylesheet and this tutorial will teach you how.

1. External Stylesheet: When a style needs to be applied to a complete website and not to some pages, external style sheet is the best. The changes in one file, applies to the complete website, which works quite efficiently.

Each page of the website must have a link to the style sheet with <link> tag, this tag is included in the <head>. An example:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2. Internal Style Sheet: If you are planning to create unique pages, then you should include the internal styles in the <head>. An example:

<head>
<style>
body {
    background-color: black;
}
h1 {
    color: white;
    margin-left: 90px;

</style>
</head>

3. Inline Styles: The inline style is used when you want to make changes to a limited content and not the complete element. However, with limited usage comes limited advantages. There are many tools which cannot be used with inline styles. An example:

<h1 style="color:blue;margin-left:30px;">Heading number 1 . </h1>

CSS Absolute and Relative Positioning

The positioning of an element decides where the element will be displayed in the display. The elements can overlap as well (one over the other). In some case you will want your element to be in the right place. Once they are in right place irrespective of what the resolution is. There are lots of people and designers who want things to be in exact location.

There are four positions to choose from:

1. Static: This is the default position which is set according to the normal flow of the page. If you do not select any other position, the default position is set automatically. It is very important that you take care of this option and understand and make use of it for getting the desired results, which is very important.

2. Fixed: The fixed position element stays in the same place even if the page is scrolled. In this the top, right, left and bottom positions are set. An example:

p.pos_fixed {
    position: fixed;
    top: 30px;
    right: 15px;
}

3. Relative Positioning: The relative positioning is somewhat like the fixed position. The difference being, these elements can be moved and overlap other elements, but the reserved space for these elements will be kept.

h2.pos_left {
    position: relative;
    left: -20px;
}
h2.pos_right {
    position: relative;
    left: 20px;
}

4. Absolute Positioning:

The absolute position of an element is positioned relative to its nearest positioned element (a positioned element is everything except static). In the absence of any ‘parent’ element, the absolute position is set from the document. This is used by lots of people as they want things in a specific place all the time and used to set advertisement. The absolute positioned element is not included in the normal flow.

An example:
h1 {
    position: absolute;
    left: 150px;
    top: 80px;
}

Using HTML and CSS together

To create your first page using HTML and CSS together, all you need to do is remember all the basics that we have covered so far. It is very important not to forget things which you have done before. If you want to make things look good then this is the best combination. It can really improve your website and make it look very good.

The software that you will need can be a notepad (for Microsoft Users), TextEdit (for Mac Users), etc. The reason why we are opting for a simple tool because we want plain text files which the browser can read (the browser cannot read a Microsoft word file). It is very important to know, which tool to make use of. If youa re not sure, then there could be a problem.

When you are well versed in creating websites using HTML and CSS, you can switch to more advanced and commercially available tools like GoLive, Style Master and Dreamweaver. There are also lots of other HTML editors in the market. But for now, stick to the simple ones.

Here are the instructions to create a web page using HTML and CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title> A sample web page using skill we have learnt so far</title>
</head>

<body>

<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="musings.html">How to’s</a>
<li><a href="town.html">Help</a>
<li><a href="links.html">Contact</a>
</ul>

<h1>Constructing a web page for the first time</h1>
<p> This is the first paragraph of your page
<p>This can contain anything you wish to add about your web page
<p> You can keep on adding information and other cool stuff.


</body>
</html>

To add colour, navigation bar and styling the text, refer to the previous tutorials.

CSS - Creating Hover Effects

The CSS tool allows to create some really different hover effects, which enhance the user experience as well as ease of navigating the website. It is important for any website to look good, if it is looking good people will spend much more time of the website and things, will be much easier. There are lots of people who love their website to look good and CSS along with HTML can help you achive that.

The hover is the ability to click on an element when you mouse over them. The hover selector can be used on a variety of elements like links, images, videos, etc. You can also create different hover styles for visited, not visited and active pages. This is very important so you can identify different links, which are very important.

This tutorial covers the basics of creating hover effects:

The basic instruction guide for hover is –

p:hover, h1:hover, a:hover {
background-color: yellow;
}
Select and style a <p>, <h1> and <a> element when you mouse over it:
p:hover, h1:hover, a:hover {
background-colour: yellow;
}

To select different hover styles for visited, not visited and active pages, use the following instructions:

/* unvisited link */
a:link {
    colour: blue;
}

/* visited link */
a:visited {
    colour: green;
}

/* mouse over link */
a:hover {
    colour: red;
}

/* selected link */
a:active {
    colour: yellow;
}

There are plenty of other effects that can be added using CSS. The most common include, a link that grows in size, fades, pulses, flickers, blurs, etc. Once you master the basics, you are on your way to create hover effects that make your website stand out from the rest. If you really want to make things look very good go in for this particular example and implement it in your website.

CSS Styling Text

The CSS styling text is much more efficient and powerful than the plain HTML, which requires a lot of tedious typing of commands. CSS lets you change the style of your font, its size, colour and add many other properties with shorter and easier commands. It is a very good way of adding uniformaity to your website. It gives you power to change all your webpages into a particular stype at one go and hence make things very simple to manage, which is not possible only with the knowledge of html.

This tutorial is aimed at teaching the basic changes one can do using CSS.

Changing the font of your text

You can choose the font family (Arial, Helvetica), font style, font weight (bold), font size, etc. using this tool.

A basic command would look somewhat like this:

{font -family:Helvetica; font- size 14 px, font -weight: bold }

Changing the colour of your text

A colour is specified by 3 properties in CSS: its HEX value,RGB value or its name For e.g. for a heading which is red in colour you will give the following command:

h1 {font-family:Arial, font-size 12px, font-colour: red}

Changing the size of your text

With CSS, you are free to choose the size of your fonts like never before. This tool has given freedom to developers to select the exact font size to suit their requirements. The font sizes can be chosen in different units, including: Ems, points and pixels, predefined keywords and percentages. A font size command can be:

{font-size: 3 px}, {font-size: 1.5 Ems} or {font-size: 200 %}

Once you master these basic examples, then things will be very simple and you can start using CSS in your own website and see the power. CSS has an option of external and internal CSS.

CSS Creating Unordered and Ordered Lists

This tutorial is about creating unordered and ordered lists using CSS tool. A CSS tool helps to change the kind of marker used in a list, the shape of the marker like round, square or an image and if the list should be displayed vertically or horizontally. It is important that the article is read well before you proceed working on it. All the tags must be understood clearly, so that there are no errors, while typing them practically and you will get the desired output without any problems. Unordered list

An unordered list, as the name suggests, is a list in which the order of its contents does not matter. To create an unordered list, follow the steps: <li>.

For e.g. if you want to create the list of your favourite things it would be:

<ul>
<li> raindrops on roses</li>
<li> whiskers on kittens</li>
<li>>girls in white dresses</li>
<li>warm woollen mittens</li>
<ul>

Ordered list

Ordered list is a list of sequence, ie. the contents of the list follow a definite order.

<ol>
<li> switch on the stove </li>
<li> heat the oil </li>
<li> fry the onions </li>
</ol>

There are two attributes available in the list, namely, start and reverse attributes.

Styling with CSS

With CSS you can make many styling changes to your lists, like:

Changing style type property
ul { list- style – type : circle}
Changing position property
ul {list- style- position : inside}
Horizontal display
li {
display: inline block
margin: 0 10 px ;
}

There are many other changes that you can make to create a unique list of your own. It is simple and you can do it in next 5 minutes.

Basic HTML Layout of a website (Creating header, body and footer)

Although CSS and Javascript are helping developers create dynamic web pages for their websites, a large group is still using HTML to create simple but useful web pages. You need to have something with proper layout for the visibility to improve. There are lots of people from all over the world making use of these technologies.

This tutorial teaches you the basic steps required to create a web page with a header, body and footer, in other words a content block. Please pay attention to the text below to understand how this particular thing works and you will not have a problem.

Why should you use a content block?

The content block in a web page stays the same all through the website, making it easy to navigate and understand. Also, if you intend to make changes, the changes made on one page will be automatically applied on all the others. Therefore, there is no need to separately type in commands in all these pages. Once you understand how this is working then things will be much easier and you will be able to go through things easily. For more details look at the code below.

To create a simple layout with a header, body and footer, type in these instructions:

<body>

<div id="header">
<h1>A Basic Web Page Layout</h1>
</div>
<h2> The main body of your text lies here </h2>
<p>
Write whatever comes to your mind and see a page created instantly
</p>
<p>
<h3> The footer </h3>
<div id="footer">
Here is the footer where you can put your contact information or anything you like </div>

</body>

This is a basic page layout which has a heading, body and a footer. Feel free to add tables, links, pictures or images, etc.