CSS Tutorial - Basic CSS
By springz
In this article I'm going to introduce you to css. This is for absolute beginners, so if you consider yourself completely in the dark about css then read on.
CSS is an acronym of Cascading Style Sheets. The end. Haha just kidding, there's more to it than that - stay right there!
CSS is used for 1 thing and that is styling your html. It's used to style your paragraphs, headings, tables, body - it'll even style your wardrobe for you so you look good in every browser....hmmm I seem to be mixing metaphors. Basically it makes your web page look from this:
To this:
To target a specific html element you just have to type the html element without cheverons(<>) in your stylesheet like so:
p
Then add some curly brackets like so:
p{}And voila, you have targeted your html element. Obviously there are no properties for this element yet! But don't fret we'll get there. The html element 'p' in css is called a selector, other selectors include h1, h2, input, a:link, ul, span etc... Inside the curly brackets we are going to put in what's called declarations. A declaration consists of a Property and a Value. Lets look at what that means:
p{font-size: 10pt;}So the declaration is 'font-size: 10pt;' This is made up of the property (font-size) and the Value (10pt) this property and value are split up with a colon ':' and closed of with a semi colon ';'. The semi colon is there so that we can differentiate it from the next declaration such as:
p{font-size: 10pt; color: blue;}There you have it. Easy as 1-2-3 no?
All you need to do now is apply you style to your html page, you do this by including your style sheet in the html document. So first save your document that contains 'p{font-size: 10pt; color: blue;}' as something.css - make sure the file extension is css.
The in you html document between <head></head> add this line <link rel="stylesheet" type="text/css" href="something.css" />
All of your html paragraph tags will now be font size 10pt and blue.
You can also insert css into your page directly in two ways. The first way to do it is to add you css code between the html style tag like so:
<style type="text/css">
p{font-size: 10pt; color: blue;}
</style>
The <style type="text/css"> is inserted between the <head></head> of your html document.
The second way to do this is to add the css inline. What this means is you add the css directly into the html element like so:
<p style="font-size: 10pt; color: blue;">Some text that will be blue</p>
The good thing about cascading style sheets is that you only have to write the code once and it will change all the p tags on your pages that have the stylesheet included in. With the <style> tag in your head, you need to put it on every page and then if you decide to change you paragraph text to red, you'll have to change your style on every page. Same goes for the inline way of doing it. cascading stylesheets save a lot of time in the long run, so it's time for you to start using them if you're not already.
There are many properties you can use to alter the look of your paragraph text. Each property has many different values which you will find a long the way. For a full list check out http://www.w3schools.com/css
Once you master the basics of css there are many things you can do with it to style the look of your websites. Hope you have found this article informative.
- Ebook reader vs paper books
Today ebook readers are becoming more and more popular but it remains to be seen as to whether they are the preferred medium for reading. Below I will argue for both....Let the debate begin! The... - 11 months ago
- CSS Tutorial - Learn CSS - CSS3 Drop Shadow
With CSS3 now in it's 4th year, it's becoming more and more common and compatible with upgrades to the major browsers. In this article i'm going to give you a tutorial on how to implement drop... - 12 months ago
- Honeymoon - Phuket
The next best thing after getting married is going away to a world that's perfect in every way! This is what my partner and I did. We went to Thailand for our honeymoon in Phuket, somewhere we had... - 13 months ago
- Mobile Websites
These days, it's becoming more and more popular for people to browse the internet from their phone and as soon as a site takes to long to load they give up. This is why businesses are creating mobile... - 13 months ago
 | Amazon Price: $18.00 List Price: $34.99 |
 | Amazon Price: $9.49 List Price: $29.99 |
 | Amazon Price: $15.08 List Price: $29.99 |
 | Amazon Price: $18.00 List Price: $34.99 |
 | Amazon Price: $9.00 |
Comments
No comments yet.
