Make A Complete Website From Scratch – Part 2: CSS

https://www.youtube.com/watch?v=L8R2x7bEJUo

Many people on the internet aren’t familiar with how to make a decent website on the internet. In an effort to remedy that, this episode kicks off the first of a five part series explaining the different aspects of building a good looking, database driven website from scratch.

In this video we will be looking at CSS bascis and how to apply it to the HTML website we created in Part 1

Here’s a list of the other tutorials in the series:

Download Code Sample

CSS Syntax

The basic syntax of CSS begins with the style name, followed by an equals sign(=), then they style property and the style value. In it’s simplest form, a CSS style script can be added into the tag itself like this:

<a style=text-decoration:none href="http://www.google.com">Google</a>

The “text-decoration”, in this example, is known as the style property. There are lots of different sytle properties that go with different types of tags. The “none” in this example is the value given for the style property. In this case, we are saying that we don’t want any text-decoration. Overall, the inline syntax of CSS is very similar to HTML tag attributes.

 

CSS Boxes

When it comes to structure, CSS uses boxes to accomplish a pages layout. This has come to replace basic HTML tables.

Final Code

After completeing the tutorial, you should have something similar to the code below. Please use this code for reference and correction. There are three files, the first one is index.html, which is the HTML code for the main page in your website. The second one is style.css, which is the CSS code referenced in the index.html webpage.

INDEX.HTML

<html>
	<head>
		<title>My Data</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>		
		<div class="main">
			<div class="row1">
				<img src="logo.jpg"/>
			</div>
			<div class="row2">
				<div class="row2col1">
					Navigation
					<hr align="left" width=75%>						
						<ul>
							<li><a href="about.html">About Me</a></li>
							<li><a href="http://www.google.com">Google</a></li>
						</ul>
				</div>
				<div class="row2col2"><p class="welcome" >Welcome to my data page!</p><p class="content" >This page is a work in progress that will eventually show places for data input, as well as data recall. Check back here for updates and more information! Thanks for visiting!</p>
				</div>
			</div>

		</div>
		
	</body>
</html>

STYLE.CSS

b{
	color:#000000;
}
a{
text-decoration:none;
color:grey;
}
img{
display:block;
margin:auto;
}
p.welcome {
	text-align:center;
	font-family: “verdana”;
	font-size:1.875em;
	color:white;
	font-style:bold;				
}
p.content {
	font-family: “verdana”;
	font-size:1em;
	color:white;
	font-style:italic;				
}
div.main{
	width:50%;
	margin:auto;
	background:#251111;
}
div.row1{
width:100%;
}
div.row2{
width:100%;
}
div.row2col1{
	float:left;
	margin:0;
	padding:1em;
	color:white;
}
div.row2col2{
	margin-left:25%;
	background-color:#0A1616;
	padding:1em;
	border:15px solid #251111;
}
body{
	background-color:#393635;
	color:white;
}

 

Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter

23 thoughts on “Make A Complete Website From Scratch – Part 2: CSS

  1. Thanks for such great tutorials. I am in the process of building my blog/website and used the wordpress business lite theme. I want to sell some things on this site but not sure what the best process would be. Should I just use a store plug in for wordpress? Any advice would help.

  2. Pingback: Make A Complete Website From Scratch - Part 1: HTML | Tinkernut Labs

  3. Pingback: Make A Complete Website From Scratch - Part 3:Javascript | Tinkernut Labs

  4. Pingback: Make A Complete Website From Scratch - Part 4:Server | Tinkernut Labs

  5. Pingback: Website Basics 5 - PHP | Tinkernut Labs

  6. Pingback: Website Basics 6 - MySQL | Tinkernut Labs

  7. Pingback: Make A Simple Responsive Website | Tinkernut Labs

  8. Pingback: Google

Leave a Reply