You are viewing our Forum Archives. To view or take place in current topics click here.
Web site creation part 2 of 3 learning CSS
Posted:
Web site creation part 2 of 3 learning CSSPosted:
Status: Offline
Joined: Mar 24, 201113Year Member
Posts: 8
Reputation Power: 0
Hello everyone, decided to go ahead and make part 2 of the 3 part tutorial over web site creation, part 1 is located here. In this part We will be talking about Cascading Style Sheets, or better know as CSS. CSS is what is used to style this web site and every other professional web site on the internet.
So lets get the basic questions out of the way first.
1. What is CSS?
A. CSS is coding language used in conjunction with XHTML and HTML (from this point on I'm referring to XHTML and HTML as X/HTML) to give more control of the elements of a page.
2.Do I have to use CSS to style a page?
A. No, if you went to the finished page created with the tutorial of part one, located here, you would have noticed that you can use tables inside of table to structure and style pages. Again I want to point out that using tables inside of table is considered archaic and not a good coding practice.
3. Are there differnt types of CSS?
A. yes, there is in-line, internal, and external. in-line takes the MOST presdence over all of types because it is directly modifying the tag in the X/HTML. Internal is next in the presdence levels as it is still writen in the X/HTML document(inside the <head></head> section) Both in-line and internal increase the size of the X/HTML size which made increase the time it takes to load a page. External is written in a separate file and is linked to in the X/HTML and is considered to be the best practice because it decrease the size of a page making it load quicker.
4. Is it hard to learn?
A. Only as hard as you make it!
Now that we got those questions out of the way, let us begin with the fun part.
Syntax of CSS:
Selector:
The selector is the part that "links" to a corresponding part in your XHTML/HTML. In this example I used a <p> tag.
Modifiers:
Modifiers are the text in-between the { } the will all ways end in with a : . Modifiers tell the CSS that you want to modify the tag in the X/HTML. In the example it is telling the X/HTML that it is modifying the <p> tag and more specifically it is modifying the font-family to be displayed when the page is accessed.
Value:
Values come directly after the : of the modifier and end with a ; . Values are the amount of change you want the modifier to modify the tag it is corresponding with in the X/HTML. For the example I'm still using the <p> tag and the font-family for earlier but now we add the value of Arial, Helvetica, sans-serif; to it. What this is telling the browser is that for EVERY instance of the <p> tag use the Arial font, if Arial is not there use Helvetica, and if Helvetica is not there use a native sans-serif font.
Now that we got the syntax down let's talk about some guidelines that will make our lives easier or a living heck.
1. IF YOU DO NOT SELECT IT, THE BROWSER WILL RENDER IT WITH WHAT IT THINKS IS RIGHT!!!!!
Example: If you do not select a font-family:Arial, Helvetica, sans-serif; a Sarif font will be used.
2. The LOWEST selector in a sheet get the most emphasis
Example:
What that piece is say for ALL instances of the <p> tag use a sans-serif font, then it says that anytime the class p is used with <p> tag make the color of the font white instead of black. since the class is below the p selector the style of p selector cascades in to it making the text be a sans-serif font but it overrides the color set from black to white because it was specified in a lower selector.
3. Understand the difference between an ID and a class
Example:
IDs are like a teacher, there is only 1 in a classroom. You would use this only to do something specific, like your main content area or a navigation area or a footer.
A Class is like the students there can be many in a classroom. You would use this to make all paragraphs about dogs use pink text instead of white by using a <p> tag using class attribute of .dogs .
Part 3: will be combing part 1 with the basic understanding of CSS to make a fully styled and funcational web page.
So lets get the basic questions out of the way first.
1. What is CSS?
A. CSS is coding language used in conjunction with XHTML and HTML (from this point on I'm referring to XHTML and HTML as X/HTML) to give more control of the elements of a page.
2.Do I have to use CSS to style a page?
A. No, if you went to the finished page created with the tutorial of part one, located here, you would have noticed that you can use tables inside of table to structure and style pages. Again I want to point out that using tables inside of table is considered archaic and not a good coding practice.
3. Are there differnt types of CSS?
A. yes, there is in-line, internal, and external. in-line takes the MOST presdence over all of types because it is directly modifying the tag in the X/HTML. Internal is next in the presdence levels as it is still writen in the X/HTML document(inside the <head></head> section) Both in-line and internal increase the size of the X/HTML size which made increase the time it takes to load a page. External is written in a separate file and is linked to in the X/HTML and is considered to be the best practice because it decrease the size of a page making it load quicker.
4. Is it hard to learn?
A. Only as hard as you make it!
Now that we got those questions out of the way, let us begin with the fun part.
Syntax of CSS:
Selector:
p {
} The selector is the part that "links" to a corresponding part in your XHTML/HTML. In this example I used a <p> tag.
Modifiers:
p{
font-family:
} Modifiers are the text in-between the { } the will all ways end in with a : . Modifiers tell the CSS that you want to modify the tag in the X/HTML. In the example it is telling the X/HTML that it is modifying the <p> tag and more specifically it is modifying the font-family to be displayed when the page is accessed.
Value:
p{
font-family:font-family:Arial, Helvetica, sans-serif;
} Values come directly after the : of the modifier and end with a ; . Values are the amount of change you want the modifier to modify the tag it is corresponding with in the X/HTML. For the example I'm still using the <p> tag and the font-family for earlier but now we add the value of Arial, Helvetica, sans-serif; to it. What this is telling the browser is that for EVERY instance of the <p> tag use the Arial font, if Arial is not there use Helvetica, and if Helvetica is not there use a native sans-serif font.
Now that we got the syntax down let's talk about some guidelines that will make our lives easier or a living heck.
1. IF YOU DO NOT SELECT IT, THE BROWSER WILL RENDER IT WITH WHAT IT THINKS IS RIGHT!!!!!
Example: If you do not select a font-family:Arial, Helvetica, sans-serif; a Sarif font will be used.
2. The LOWEST selector in a sheet get the most emphasis
Example:
p {
font-family:Arial, Helvetica, sans-serif;
color:}#000000
}
.p p {
color:#FFFFFF
} What that piece is say for ALL instances of the <p> tag use a sans-serif font, then it says that anytime the class p is used with <p> tag make the color of the font white instead of black. since the class is below the p selector the style of p selector cascades in to it making the text be a sans-serif font but it overrides the color set from black to white because it was specified in a lower selector.
3. Understand the difference between an ID and a class
Example:
#ID {
}
.Class {
} IDs are like a teacher, there is only 1 in a classroom. You would use this only to do something specific, like your main content area or a navigation area or a footer.
A Class is like the students there can be many in a classroom. You would use this to make all paragraphs about dogs use pink text instead of white by using a <p> tag using class attribute of .dogs .
Part 3: will be combing part 1 with the basic understanding of CSS to make a fully styled and funcational web page.
You are viewing our Forum Archives. To view or take place in current topics click here.