Welcome to TRiBot Forums

Register now to gain access to all of our features. Once registered and logged in, you will be able to contribute to this site by submitting your own content or replying to existing content. You'll be able to customize your profile, receive reputation points as a reward for submitting content, while also communicating with other members via your own private inbox, plus much more! This message will be removed once you have signed in.

Sign in to follow this  
Followers 0
JWhosting

An Introduction to CSS part 2 [HTML & CSS]

3 posts in this topic

Hello again! & welcome to the second part of my introduction to CSS, today we will be covering the basics of HTML & CSS, and how they work together, please excuse any terms i use incorrectly, as i am mostly self taught.


If you haven't read my first guide, i recommend doing that before proceeding, you can find it HERE
 

 

Alright, lets get started, first of all, here is the bare bones of an HTML page (note, this is not to WD3 standards!)
 

<html>
<head>
</head>
<body>
</body>
</html>

that is the most basic html page you can have, it wont have anything on it, but that's alright. because we'll be putting stuff on it biggrin.png

so, for now, create a new folder called Intro2 in your TUTORIAL folder from last lesson, then copy & paste the above code into a file called "index.html" then save it.

make sure it opens with a web browser by default instead of any text editor, otherwise it will be a pain.


ALRIGHT. now to actually start learning a thing or two.

the proper way to start of an html page is by specifying the Doctype, like so:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

replace your <html> with this now.

next, we should give our page a title, so under <head> type <title>TUTORIAL</title>

now if we load our page, it should display in the tab, the word "TUTORIAL"

alright, now down to some css, lets make a basic navbar using Html5 & CSS

Under <body> add the following:

<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>

this will add the most basic horizontal navbar possible. but it's pretty bland.. so, lets use CSS to make it a little prettier!


Create a new folder in our Intro2 folder and we'll call it "res" as in resources.
we'll call our CSS "CSS1.css"

Now remember to link your css with your html page...
 

<link rel="stylesheet" type="text/css" href="res/CSS1.css">

now open up your new css page and add the following:

body{
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    }
nav{
width:100%;
background-color:#202020;
font-size:25px;
text-align:center;
text-style:none;
}
nav a{
    color:green;
    text-decoration: none;
    font-family:calibri;
    }
nav a:hover{
color:darkgreen;
    }

Now lets explain.

as we learned last time, we can use css to re-style "Tags" the tag "nav" by default is pretty booring, as we saw, but now it's a fancy pants navbar with a dark background, green text & a hover that makes the text darker.

 

nav a{

at this part, we specify that the tag "a" within "nav" is to be affected by the following style,

nav a:hover{

I'm sure you can figure this out yourself

body{

I felt like i should mention this, because you may be confused to why i have values of 0 in here. well.. for whatever reason, by default, webpages have a border around them, and to avoid that, this is necessary. (you can do padding:0px; but i prefer to do top, left, right, and bottom when it matters.)

Now for some fun stuff..

 

under </nav> add the following:

<center>
<div class="sexybox">
    <h1>This is a title!</h1>
    <hr></hr>
    <h2>This is a regular old text area, with a little bit of css, now lets just add
    some filler words to show what how text is actually handled with this particular text area hurp a durp hurp a durp hurp a durp hurp a durp
     hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp
      hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp hurp a durp
    </div>
</center>

Then add alll this to your CSS:
 

.sexybox{
    
display: inline-block;
margin-left:20px;
word-wrap: break-word;
word-break: normal;
vertical-align:top;
color:gray;
background-color: #323232;
height: auto;
width: 500px;
border: 1px solid gray;
border-radius:5px;
box-shadow: 0px 0px 10px #757575;
font-family:calibri;
    }
    
.sexybox h1{
        text-align:center;
        margin-bottom:-10px;
    }
.sexybox h2{
        text-align:center;
        font-size:20px;
        
    }

Now you have a sexy box on your page with a title & text. very snazzy, know what's even cooler?

Copy everything from <div to </div> and paste it before </center> and see what happens.

 

 

Not bad eh?

Congratz. you just learned some fancy pants stuff about CSS & HTML

Stay tuned for my next guide!

Share this post


Link to post
Share on other sites

You might wanna use code tags, so it's a but more organized. Same goes for you other tutorials. 

 

for those who wanna learn + practice, you might wanna start css course @ www.codeacademy.com 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.