Q & A:
1]
What does CSS Stand for? CSS Stands for Cascading Style Sheets
2]
What does it do? You can quickly change font, font size, background color/image, text layout, page margin and much more. (I will explain how to change some of those below!)
3]
Why should I use CSS (Cascading Style Sheets)? You can carefully control every aspect of your page(s). Apply changes globally, with a consistent design throughout your web pages.
4]
Why does my page look different in different web browsers? Different browsers will display the CSS Markup differently, which is why you are noticing a difference in the different browsers. Some older browsers can’t display it correctly, or older browsers can’t display it at all.
5]
How do I use CSS, or where do I put the code? You can do it two different ways; you can have it inside your web page (will explain below), or link to a external styles.css.
CSS Markup Example(s):*You can use this as you need to and alter it to your likings (Hope it helps!)
body {background: black;
color: black;
font size: 16px;
font –family: Garamond;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px; }
Explanation of what each part does:
-- Background: This is the background of your web page, so with that code, our background is black.
*Note you can change that using any hex code. For a list of web-safe colors visit:
http://www.web-source.net/216_color_chart.htm.
-- Color: This is your font color. You can’t change it to font-color, it needs to stay as “color”. Again, you can change this just like above.
-- Font-Size: Pretty self explanatory, this is the size of your font.
-- Font-Family: This is the look of the font, you can change this to another family:
*Note, it’s important to use one of the most common fonts, and they are usually installed on all computers. If you use one that others don’t have it won’t display correctly.
-- Margin-Left/Right/Top: This is the margin of your website (the width of your page [where the text begins and ends]).
So that’s the body of your page, which is the main part, but you can also edit other parts of your page, or edit different spots of your page, such as the header, body, footer, copyright, headings etc…Almost unlimited.
--
How do I edit different areas of my web-page? Well, I’ll first start of how to change your headings (h1, h2 , h3 etc…)
So you would put this code underneath the body part:
h1, h2, h3 {color=orange;
font-family: Arial;
font-size: 20px; }
That will change all the headings to the color orange, the font Arial, and the font size 20. Again edit that your needs.
--
How to edit the “footer” area (Change the footer to different name if you like, or edit it to your needs [be sure to edit everything]).
Inside your <body></body> tags, you would put this:
<p class=”footer”> (your text/info here)</p>
That will separate it from the normal body markup we did earlier, so you can edit this area differently (Note: If you do not add any new markup for the Footer area, it will be the same as the body markup)
To change the Footer area, you would put this under the h1, h2, h3 markup, or the body markup if you are not using the h1, h2 etc…code.
p.footer {font family: Arial;
font-size: 16px;
background: yellow;
color: purple;}
The same meanings that were for the body, also apply for this, and any other time you are using these tags.
Note: You can use that piece of code for many different areas of your web-page. Just edit it to your needs.
--
How to put this into your web-page?If you remember, I stated above that there are two ways you can use this: External and Internal.
To put this markup into your webpage with no extra files, or any other things except of your webpage (example.html).
Put this code underneath your <title></title>
<style type=”text/css”>
Your markup here
</style>
How to import a cascading style sheet into your web-page?Note: You have to put the markup you want into notepad, or another text editor that you have then save it as styles.css , then upload into the same directory with your web-page.
So, after you have your styles.css saved, you can now put this code into your page underneath the <title></title> tags.
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
That will give the same effect as if you had the markup inside your document.
So that’s it. A tutorial on how to use simple CSS.
Any questions please post below, and I will answer them ASAP.
All written by theone759, with reference to the book HTML, XHTML & CSS For Dummies
Article Source: http://www.TechnicalTalk.netYou can find more information here :-
*** Please do not forget to leave your comments about this article ***
