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

3 posts in this topic

This guide is directed at people who are interested in learning CSS & have NO experience with it, if you have experience, this is not for you. tongue.png

So, let's start off with the basics.

 

What is CSS?

 

CSS stands for Cascade Style Sheet. & that is exactly what it is, it's meant for styling a web page.

 

But what does styling a webpage do?

 

well, that's simple, it gives it a structure & makes it look attractive, and easy to use.

 

Lets dive into some code now;

body{
}

This is what is known as a "Tag"

In css, the main types of styling are done through Tags, Classes, & IDs

Explanation:

Tag: Tags are for editing existing HTML tags, (body, p, h1, h2, etc)

Class: Classes are for creating elements that will be used multiple times within a page

ID:  IDs are for creating elements that will only be used once within a page

so, back to our code,
 

body{
}

Between the { } is where we do our styling.

 

So, for example, if you want the background of your entire page to be black, we would simply do this:
 

body{
background:#000;
}

Now let's examine that
 

background:#000;

background is what i call the "function"

 

#000 is the HEX value for Black, you can also simply do "background:black;"

Every function needs a value and has to be closed with ; and every { needs a } otherwise it doesn't have an end

Now we'll look at making a class & and ID
 

.Class1{
}

Classes require a "." before them

#ID1{
}

and IDs require a "#" before them


Now, in your HTML to call a class or an id, you need to do the following,

 

<div class="Class1">
</div>

Or

<div id="ID1">
</div>

if you want anything inside your element, you simply add it before you close your div with </div> for example
 

<div class="Class1">
HELLO WORLD
</div>

So, give it a try! now that you've learned the basic syntax, check out  http://www.w3schools.com/ to learn way more, & for a reference of every single function, what they do, and how to use them.


Oh, PS. to import a CSS file into a webpage you'll need to put this in you <head> section

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

--------------------------------------------------------------------------------------------------

Part 2:

It was suggested that i explain how to start & save a new html or css file, so here goes:

Step 1, create a Project folder on your desktop, or really wherever you want it to be.

6RPPQ.jpg


now, name that folder something distictive "Websites" or something.

now create a sub-folder, and call it "CSS Tutorial" or something.

Now, create a new Text Document

 

By default, it will say "New Text Document.txt"

Change that to index.html

now create another text document & call it something like "default.css"

(Follow this if it doesn't say ".txt" at the end of the file)

 

6RPZm.jpg

Click Organise, then folder and search options

then uncheck this:

6RQ1h.png

Alright, so that is the very beginning stage of starting to write in HTML or CSS

Now you can either open each of these in Notepad,

 

or you can download http://notepad-plus-plus.org/ STRONGLY SUGGESTED

You're now ready to follow Part 1. :I


------------------------------------------------------------------------------------------------------------------------------

Hope this helped you in some small way. smile.png

~Jaiden

 

 

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.