Lesson 1
Text Transformations, Pseudoclasses, Pseudoelements and More
Hard to know what we are covering in this class until I get all the homework
published. Then I can probably tell you what I did.
Line Height
Let's try adjusting the line height. This is adjusting the vertical spacing
between lines, also knows as "leading" to some, and line-height within the
CSS world. I am not sure if this applys to a continuous paragraph, or to sequention
paragraphs. I will try the extended paragraph first and see what happens. Let's
try it on this paragraph. I will define a class called .textexpand and imbed
a line heigtht of 140% to that class.
I will try two line height adjustments. For this paragraph,
I will make a different class, .textexpand2 and use a line height of 115%,
with a different color. This should be interesting to see if the adjustment
is immediately viewable on the screen. This paragraph may have to be longer,
so I will just type a few more words and then bring the whole thing to a close.
That should be enough. I first tried this using a different font, but the font
style made a bigger difference than the line-height. So I kept the font the
same.
Ok, the line height works as advertised. Now for the next trickery.
First Letter
This one should be great. I can see using this in a web page. First-letter
is considered a pseudoelement by the classnotes. I won't add a background image,
but I will try adding a color for the background. Should be fun. I am just
not sure how to use Dreamweaver to create it, other than typing directly in
the code. I am not going to get any tricker than applying a first letter adjustment
to the H3 tab. It looks like it is working ok. You may also have noticed that
if you move your mouse over this paragraph, you get a surprise.
Pseudoclass ~ :Hover
Ok, now to try the hover. Let's try this on a image. I will first make a
class that adds some extras to an image, like a margin, padding, border, and
background color. Call the class .imagetreat. So here is the image without
the .imagetreat.
Now
here is the same image with .imagetreat applied. I also added a hover pseudo
class by copying the code in the CSS sheet and adding :hover. Then I changed
a couple of colors. I wish I knew how to use the graphical interface in Dreamweaver
to create a pseudoclass directly, instead of having to copy, paste and augment
the code directly.
For more hover fun, go back to the paragraph immediately above
this section, and hover over it. Surprise. Ugly, but you can see the change
due to hover. I was trying to type in the :hover effect on an ID. I got the
ID set up, but could not figure out how to attach the ID to the paragraph. I finally gave up and typed in the code to surround the paragraph with a div style mark-up and an imbedder hover thingy. lol
Print Stylesheet
I don't think I like the use of the Print Stylesheet for the lesson material.
I always print out a version of the lesson material and keep it in a notebook
for reference. I want all the color and images printed for the lesson material.
But I am not allowed that here. The Print Stylesheet robs the viewer of that
capability. I am sure that sometimes that is good, like when you don't need
all the additional side boxes on a page that are filled with advertising. Then
it makes sense. It also makes sense to link to a relatively style-free page
so the viewer can print a limited page if he/she chooses. But that would be
the viewers choice. I get that a lot in online maps. There is it good.
Our instructor helped me understand that the Print Style Sheet should take
away nearly everything that you added that can effect the look
of the displayed pages. So, for example, in this page I introduced two classes,
.textexpand and .textexpand2, where I changed the style and color of the font.
In the Print Style Sheet, I needed to name these two classes and reduce the
color to black (#000000). Same kind of effort was required for the leading
first-letter pseudoelement effect on H3. Now the print will be all black and
white. I redid the Print Style Sheet.
