Kryptos
prjRev.com
- Jul 21, 2010
- 2,205
- 1,252
This tutorial is for people who want to get into web designing and who are confused on how to start.
This will not be a fancy tutorial, but it will indeed be helpful. Let's start.
First, we will make the index file, it will be called index.html
in this file we will be using an external style sheet, which means all the CSS code will come from another file, named style.css
After you've made the file add this into it:
Now, in this code it all looks familiar, the HTML, head and body tags are in pretty much all web pages, but what is this?
That is an external style sheet, this calls the CSS code from a file called style.css, note that you can also use an internal style sheet, but I will be using an external style sheet in this tutorial.
Now, let's create the style.css, which will send the CSS code to index.html.
After you have created style.css it's time to code some stuff!
Let's start by adding some color.
That would give you a light gray background!
Ok, but what if we want to add boxes and stuff?
Well, to create content boxes we will use divs, there are 2 'types' of divs, the divs with an id and the divs with a class.
Divs with id:
HTML code:
CSS code:
Divs with class:
HTML code:
CSS code:
This are the basics on how to make a website design, I'd suggest you go to
Hope this was helpful!
This will not be a fancy tutorial, but it will indeed be helpful. Let's start.
First, we will make the index file, it will be called index.html
in this file we will be using an external style sheet, which means all the CSS code will come from another file, named style.css
After you've made the file add this into it:
Code:
<html>
<head>
<title>Inspiration</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
</body>
</html>
Code:
<link rel="stylesheet" type="text/css" href="style.css" />Now, let's create the style.css, which will send the CSS code to index.html.
After you have created style.css it's time to code some stuff!
Let's start by adding some color.
Code:
body /* Name of the tag [I] Note: This does not have a '.' or a '#' like divs, this is the <body> tag in our index.html [/I] */
{ /* We start the code with a curly bracket */
background-color:#dedede; /*We add some color to the background */
} /* We end the code with a curly bracket */Ok, but what if we want to add boxes and stuff?
Well, to create content boxes we will use divs, there are 2 'types' of divs, the divs with an id and the divs with a class.
Divs with id:
HTML code:
Code:
<div id='box'> /* Start the div named box */
zOMG this a box
</div> /* Close div */CSS code:
Code:
#box {
background-color:#000000; /* This box will have a black background */
color:#FFFFFF; /* The color of the letters will be white */
height:50px; /* This box will be 50px tall */
width:100px; /* This box will have 100px of width */
border-color:#FFFFFF; /* This box will have a white border */
border-style:solid; /* The border will be solid (Type of border) */
border-width:1px; /* The border will have 1px of width */Divs with class:
HTML code:
Code:
<div class='box'> /* Start the div named box */
zOMG this a box
</div> /* Close div */CSS code:
Code:
.box {
background-color:#000000; /* This box will have a black background */
color:#FFFFFF; /* The color of the letters will be white */
height:50px; /* This box will be 50px tall */
width:100px; /* This box will have 100px of width */
border-color:#FFFFFF; /* This box will have a white border */
border-style:solid; /* The border will be solid (Type of border) */
border-width:1px; /* The border will have 1px of width */This are the basics on how to make a website design, I'd suggest you go to
You must be registered for see links
and learn margin, padding, etc.Hope this was helpful!
