[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.
<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;
}
[/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]
Great video
Awesome 😀
awesome video ,really explained css perfectly !
Thanks
The link to the wiki page is dead, it’s actually http://tinkernut.com/wiki/page/Episode_305
The link ”http://www.tinkernut.com/wiki/pages/Episode_305” does not work
Why did someone blank the wiki page??
I fixed it. Also, sorry for double post.
thnks 🙂
I’m totally learning in this website much better than school xD
it should be like that:D
Thank You.
i know a css optimization tool http://tools.niknais.lv/cssopt/
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.
When I remove the table tags it all goes all over the place.
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.