CSS (Cascading Style Sheets) are very powerful tools when it comes to web programming and making a website look nice. CSS allows the programmer to make many pages of a website look the same simply by making a single file
contain all of the attributes the programmer wants the specified tag to have. This page will explain in depth how to use CSS. On this page I will be working with CSS inside of a external file since that is how CSS is mostly used.
|
<style type="text/css"> </style>
and
<link> </link>
This tells the the browser that whatever is contained inside of these style tags, is how the tags inside of a HTML document should appear. This may be contained inside of the
head of the file of which the programmer is designing or the programmer may put the CSS inside of another file so that it can be accessed by every page on the website. This is what makes CSS so powerful. The
programmer is literally able to write one file to edit the format of all the tags on each webpage. *Just REMEMBER when you place CSS inside of a file of its own, you DO NOT include the
<style></style> tags.
|
HTML with CSS with in the code:
HTML with CSS inside of a external file:
 |
|
Applying the Same Rules to Different Tags
Say the programmer wants to assign the same rules and styles to more than one tag. This would be a huge headache trying to copy and paste the work more than 3 or 4 times, but CSS has
a built in function that allows the programmer to assign the same styles to different tags, this is called making classes. All the programmer has to do is place commas between different tags names as pictured right. This allows the programmer to place
any number of tags together and give everyone of them the same style. This is yet another reason why CSS is so powerful. It does not just stop there though. Say The programmer wants the H1 and H2 tags to look pretty much
the same but he/she wants the H1 to have a line under it. Thanks to CSS this is very simple. All the programmer has to do is add another rule for the h1 tag. Then when the tag is called on in the HTML, both rules will be used.
Here is more in-depth information on Applying the same rules to different tags.
|
HTML Code:
CSS Code:
|
|
Using Classes in CSS and Inheritance
Not only will CSS allow the programmer to assign a class to the tags that determine their styles such as background color and font, but it will also allow the programmer to set alternate classes for the same
tag. This way the programmer can have different styles for the same tag. The next issue is inheritance. Let's say that the programmer sets the body tag (class) for the body that sets all font to the color of blue. Then he/she also
sets a paragraph tag to have a font color of black. What tag would get what color? This may seem complicated but it is actually pretty simple, any tag that has not been assigned a class such as h2, blockquote, etc, would get the font color of
the body. The paragraph tag and any tags that would be inside of it would get the font color of the paragraph tag, and any tag that is within the paragaph tag would get the same font. This in-depth page
will go into detail.
|
HTML Code:
CSS Code:
|
|
Font, Font size, weight, color, and tex-decoration
Now that you know a little about CSS lets get into things a little deeper. The
next page will explain everything listed above in detail.
|
HTML Code:
CSS Code:
|
