Okay team, by now you should have an idea of the functionality of html. Html is code that allows you to write in a language that web browsers can read. You use the html tags to define certain elements on the page such as:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
But there is a main problem with using html. It is not useful for defining large quantities of elements on a page. A very relevant example is that some designer prefer the font in eCollege to be size 3. In order to do this, you highlight everything and select "3" from the font dropdox in the visual editor. The result is a whole lot of <font> tags throughout the page. But what if you could say once and for all "I want all the font to be size 3 unless I specify otherwise (and quit making my code all cluttery!!!)". Come to think of it, who is it that decided the "default font size anyway??
The font, it turns out, is defined either by 1. the browser default setting, or 2. CSS. CSS stands for Cascading Style Sheets. When you see something like:
<p>This is a paragraph.</p>
CSS would all allow you to define the properties of the <p>. Suppose my .css file explained that <p> means Times, size 3, blue, italic. That code would read:
p <- this is lowercase
{
font:"Times New Roman";
font-size:18pt;
color:blue;
font-style:italic;
}
There are three types of CSS. They are: external, internal, and inline. I am going to breeze over each of these in this post in the hopes that you will take the time to practice writing code in a dummy course. In eCollege, the external .css files are hosted on their servers. We do not have access to these files, but they are responsible for the frames we use and the classes (those little icons that some of use). Also, you'll notice that whenever we use a <h1> tag for the header, there is that line that appears underneath the text. That line is called a horizontal rule and you would normally define that in html as <hr>. The eCollege .css files must automatically define horizontal rules.
Internal CSS is used on each web page and is normally written in the <header> </header> section. If there is ever a conflict between the external and internal codes, the internal CSS will override the external. Suppose one of us is creating a course and defines all font to be size 3. But there is one page where that person wants all text to be size 2. That person would create an external .css file defining text to be size 3 code, and then write internal css on the page where the text is to be size 2. The internal css will override the external. If you are at a family reunion and your grandpa says "it's okay to jump on the trampoline", but then your dad says "it's not okay to jump on the trampoline", you would probably obey your dad and not jump on the trampoline. Even though both figures are authority figures, there is a chain of command that says that your dad gets the last word in such matters. CSS works the same way. CSS trumps any browser default, internal css overrides and external .css file, and inline styles are the last authority.
So that's nice. How do we write CSS?
There are essentially two parts to the CSS syntax. Part 1 is the Selector and part 2 is the Declaration. Using the above example:
| Selector | Declarations |
| p | {font:"Times New Roman";color:blue;} |
The selector is going to be whatever html element you want to style (in this case it is the paragraph, or <p>). The declarations state a property and a value. The two properties in that above example are the font and the color of the font. The two values are Times and blue. The property is whatever style element you want to change, whether that be a color, a font size, alignment, etc. The property always needs a value. The declarations are grouped by the squirrely brackets { }. Each declaration ends in a semicolon, and each property is separated by a semicolon. When you are writing the code as external or internal CSS, you can put each declaration on its own line. That is why I wrote that first example like this:
p
{
font:"Times New Roman";
font-size:18pt;
color:blue;
font-style:italic;
}
There is one selector there, which is the p and defines <p>. There are four declarations:
font
font-size
color
font-style
Each declaration then has a value and ends with a semicolon. You'll want to end the last declaration with a semicolon and then finish it off with a }. If you wanted to include that code on one of your eCollege pages, there are two ways to write that, and both are correct. This code would go above the html code for the eCollege frame templates. The first way is how I have shown you twice already, but with the proper style tags (this tells the browser that everything between <style> and </style> is CSS, not html):
<style type="text/css">
p
{
font:"Times New Roman";
font-size:18pt;
color:blue;
font-style:italic;
}
</style>
or if you would like to have it all on one line, that would also be allowed:
<style type="text/css">
p {font:"Times New Roman"; font-size:18pt; color:blue; font-style:italic;}
</style>
If you want to add more CSS code, just make sure to put it between the <style> and </style> tags. So that's the very basics of what CSS looks like in an external .css file or as internal CSS. Now we will cover what inline css looks like. It's essentially the same code, but nested within an html element. Suppose that the above code is in the header of your page, but you have a paragraph where you want to change the properties. You want to make sure that only that paragraph is altered and none other. You can do this by changing the CSS style. So instead of blue font that is italic and size 18pt, I want this one paragraph to be red, bold, and size 24px. (I recognize that these are very odd properties, but oh well). I can actually insert css right into the html tag using style="property:value;". So what would the above look like?
<p style="color:red; font-style:bold; font-size:24px;">Then this would be the paragraph.</p>
and how would that look in the browser?
Then this would be the paragraph.
Hey great! And if I tinker around with the code a little more...
<p style="color:beige; font-style:bold; font-size:13px; background-color:#6495ed;">Then this would be the paragraph.</p>
Then this would be the paragraph.
Okay, holy cow! Do you realize that CSS styles can done to tables? You don't like the default border? Well then do a CSS style to specify what the border will look like (color, thickness, patterns, etc.). You want a solid background for the top row, and then you want to alternate background fills every other row? CSS styles are how to get that done. Change the color, modify the column width or height, align cell content, add padding to the left and the bottom of the cell, change the font size in a particular cell or row...that can all be styled with CSS. Let's take a look at a very basic table:
|
Astute readers will recognize that table from the former blog post a couple of weeks ago. Now I am going to show you some html code that will really dress this table up.
|
Notice how very simple the actual table is in terms of html. It's very straightforward in fact. Most of the CSS for that table was written as Internal CSS but I included a segment of inline styling as well. Can you spot it? Last thing I would like to explain is my use of id's and classes in that last example. Some of you may be using classes without knowing it already (or using it and wondering what it means). Any of you who use the built-in icon set in eCollege is actually using CSS. Has anyone among you used this or something similar?
<h1 class="assignments">
If so, then what that simple line of code is doing is calling on a bit of CSS that was defined in the external CSS (that's the .css file that is hosted on the ecollege servers). Somewhere on that .css file there is a line of code that probably looks something like this:
.assignments
{
background-image: url(.css_file/images/assignments.gif);
width:40px;
height:40px;
}
The class and id selectors allow you to specify custom elements in addition to the basic html tags (e.g. <h1> <p> <div>). An example of an id selector in play can be found here, and an example of a class selector can be found here. Do not start id's or classes with numbers, as this functionality is not supported by all browsers.
I will leave you with one last resource so that you can go and experiment with some css. This is a reference to the various properties that you can use. Pretty much everything you need to know can be found on this page:
http://www.w3schools.com/css/css_reference.asp
You would probably also benefit from learning some colors:
http://www.w3.org/TR/2010/PR-css3-color-20101028/#svg-color
http://www.w3schools.com/css/css_colors.asp
Comments
Post a Comment