1) How to use CSS?
You can use CSS in 3 ways:
- Using inline CSS means that you use your styling elements within the tags in the HTML. You will use the <style> tag to do so.
e.g.<body style="background-color:blue; font-weight:bold">
- Using internal CSS means that you define all your styling elements for each tag you are using in the <head> section.
e.g.
<style type="text/css">
<!--
h1 { font-family:Times serif; color: #f00000; }
-->
</style> - External Style Sheets: using a file with extension .CSS that will contain all the styling elements that you would normally put in the head section. This improves readability of your code and helps achieving separation of content from form/design.
2) How to use external CSS?
<head>3) How to use Classes?
<link type=”text/css” rel=”stylesheet” href=”mystyle.css”>
</head>
Say for example, you want all your paragraphs <p> to be black, except for one paragraph that would be red.
The solution is to use a class, that will be applied for only this particular paragraph.
e.g.
p.warning {color: red;}
…
<p class="warning">This is red. </p>
Note: You can also create classes that will apply to any tag (generic classes).
e.g.
.mycolor{color: red;}
<p class=”mycolor”>A red body text.</p>
<h1 class=”mycolor”>A red headline.</h1>
4) What are IDs? What is the difference between IDs and Classes?
The ID selectors and generic classes are very similar, except for the fact the an ID is supposed to be used only once.
e.g.
#myID{color:green;font-size:10px}5) What if I want one paragraph to be in red, and one sentence of that paragraph in bold?
<p id="myID">my green paragraph</p>
Well, we could use the <bold> tag which will contain the sentence, but it is not XHTML compliant and the bold tag is deprecated.
The solution is to use the <span> tag.
e.g.
.myBold{font-weight:bold}
<p>This paragraph has the browser default formatting, but <span class="myBold"> this sentence is bold, without making any change to the paragraph selector.</span> This sentence is back to browser default formatting for a paragraph tag. </p>
No comments:
Post a Comment