[venera_framed_image content_type="video" css_animation="appear" frame_type="browser" slider_engine="flexslider" video_link="" browser_url="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:
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.
When it comes to structure, CSS uses boxes to accomplish a pages layout. This has come to replace basic HTML tables.
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.
<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>
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
Alan Lyne
January 21, 2012 at 8:37 am
Great video
Alexys
January 21, 2012 at 12:54 pm
Awesome 😀
Joseph W
January 21, 2012 at 8:42 pm
awesome video ,really explained css perfectly !
Rumbis
January 21, 2012 at 11:41 pm
Thanks
Weasel
January 23, 2012 at 12:51 am
The link to the wiki page is dead, it’s actually http://tinkernut.com/wiki/page/Episode_305
Mylife
January 23, 2012 at 2:38 pm
The link ”http://www.tinkernut.com/wiki/pages/Episode_305” does not work
Bavo Luysterborg
January 25, 2012 at 4:27 pm
Why did someone blank the wiki page??
Bavo Luysterborg
January 25, 2012 at 4:28 pm
I fixed it. Also, sorry for double post.
hossin
January 28, 2012 at 11:36 am
thnks 🙂
jerome
March 3, 2012 at 10:31 am
I’m totally learning in this website much better than school xD
Valdis
April 9, 2012 at 1:29 pm
it should be like that:D
Obed Abraham
April 4, 2012 at 1:22 pm
Thank You.
Valdis
April 9, 2012 at 1:28 pm
i know a css optimization tool http://tools.niknais.lv/cssopt/
website design
June 18, 2012 at 10:27 am
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.
Pawl
August 8, 2012 at 10:58 am
When I remove the table tags it all goes all over the place.
12 cup coffee maker with removable water tank
May 26, 2013 at 11:18 am
I’ve learn a few good stuff here. Definitely worth bookmarking for revisiting. I surprise how so much effort you place to make one of these great informative site.