Make A Complete Website From Scratch – Part 2: CSS

davisde
[vc_row][vc_column width=”2/3″][vc_separator][venera_framed_image content_type=”video” css_animation=”appear” frame_type=”browser” slider_engine=”flexslider” video_link=”https://www.youtube.com/watch?v=L8R2x7bEJUo” browser_url=”https://www.youtube.com/watch?v=L8R2x7bEJUo”][vc_separator][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_tabs][vc_tab title=”About This Project” tab_id=”1402713028-1-39e9a4-2f88123b-7794ad8b-6a1d”][vc_column_text]

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:

[/vc_column_text][/vc_tab][vc_tab title=”Code” tab_id=”1402753910272-3-8123b-7794ad8b-6a1d”][vc_button title=”Download Code Sample” target=”_blank” icon=”none” size=”btn-huge” href=”http://www.tinkernut.com/demos/305_css/305_css.zip”][vc_column_text]

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;
}

[/vc_column_text][/vc_tab][vc_tab title=”Important Links” tab_id=”1402753981900-3-10123b-7794ad8b-6a1d”][vc_column_text] Help support my channel: http://www.patreon.com/tinkernut Follow Tinkernut! Google + Facebook Twitter [/vc_column_text][/vc_tab][/vc_tabs][/vc_column][vc_column width=”1/3″][/vc_column][/vc_row]

23 Comments

  1. Alan Lyne
    January 21, 2012 at 8:37 am

    Great video

  2. Alexys
    January 21, 2012 at 12:54 pm

    Awesome :D

  3. Joseph W
    Joseph W
    January 21, 2012 at 8:42 pm

    awesome video ,really explained css perfectly !

  4. Rumbis
    January 21, 2012 at 11:41 pm

    Thanks

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

  6. Mylife
    January 23, 2012 at 2:38 pm

    The link ”http://www.tinkernut.com/wiki/pages/Episode_305” does not work

  7. Bavo Luysterborg
    Bavo Luysterborg
    January 25, 2012 at 4:27 pm

    Why did someone blank the wiki page??

    • Bavo Luysterborg
      Bavo Luysterborg
      January 25, 2012 at 4:28 pm

      I fixed it. Also, sorry for double post.

  8. hossin
    January 28, 2012 at 11:36 am

    thnks :)

  9. jerome
    March 3, 2012 at 10:31 am

    I’m totally learning in this website much better than school xD

  10. Obed Abraham
    Obed Abraham
    April 4, 2012 at 1:22 pm

    Thank You.

  11. Valdis
    April 9, 2012 at 1:28 pm

    i know a css optimization tool http://tools.niknais.lv/cssopt/

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

  13. Pawl
    August 8, 2012 at 10:58 am

    When I remove the table tags it all goes all over the place.

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

  15. June 15, 2014 at 8:19 pm

    […] Part 2 – CSS […]

  16. June 15, 2014 at 8:28 pm

    […] Part 2 – CSS […]

  17. June 16, 2014 at 12:29 am

    […] Part 2 – CSS […]

  18. October 10, 2014 at 1:02 pm

    Google

    Please stop by the web pages we stick to, including this one particular, because it represents our picks through the web.

Leave a Reply