How to use CSS
If you know anything about the internet, you probably know that for the most part, CSS is one of the key languages for making a really cool website. Every good web dev out there uses CSS.
If you are looking for CSS3, you can either wait for me to make a tutorial like this one or you can go to this site.
I'm not going to go over the syntax of the language too much because for the most part, its very simple. I'm sure you can catch on very fast !
I'm going to begin with this tutorial with simple customization of a webpage.
But first, you need to know how CSS works. Here is a example of changing the background color. Pay close attention to the syntax of the code:
I know what your are thinking: "No No. Wheres the real code". Yes. This is the real code. Simple isn't it?Code:body { background-color:#b0c4de; }
The text in the beginning that says, 'body', means the background color applies to the body tag in your HTML page. Make sense?
Here is another example for you to look at again:
Note the 'p' character. In HTML, the <p> tag means paragraph. According to the CSS code, everything between the opening and closing tags of tag <p> will have the font 'Arial'. You can also but the background-color property inside the braces to make the background color of everything inside the <p> tags of any color you desire.Code:p { font: Arial; }
I'm sure you are wondering how to make the css work. Well you can start by saving your file with any name. As long as the file extension is .css.
Thats not all. You need to import the file in your HTML file. Like this:
This is the organized way in css. Another way to do it is to code CSS inside your HTML file. Like This:Code:<link rel="stylesheet" type="text/css" href="mystyle.css">
I don't recommend this. It isn't as organized as the method above.Code:<style type="text/css"> /* CSS CODE GOES HERE */ </style>
Like CSS yet?
There are many properties of CSS. So many, I can't name them all in the thread .
Here are some examples:
You can also use custom tags. Like this:Code:color:red; text-align:right; font-size:20pt; color:rgb(255,0,0); text-decoration:blink;
Then in CSS you can do this:Code:<CustomTag>
Pulled from How to use CSS - webdevRefinery Forum as a good tutorial for beginners wanting to use CSSCode:CustomTag { color:red; }
There are currently 6 users browsing this thread. (0 members and 6 guests)
Bookmarks