Meeting 4
More Control over Style
4.1 Homework Discussion
Professor: I’m anxiou s to see what you have produced for your homework . Please,
I’m all ears.
Maria: The homework wasn’t very difficult, in fact. What occupied us most was
studying the CSS reference to find th e appropr ia te properties to use. First, we focused
on the article and we cam e up with this solution:
article {
width: 500px;
padding: 30px;
border: 1px solid;
font-family: sans-serif;
}
There’s only one thing we are not certain about. We wanted to inclu de some spacing
around the article text and padd ing d id the trick. But we ar e confused about the exact
differences between margin, border, and padding.
Professor: You used the padding and bo rder properties correctly. Namely, the
padding specifies the spa ce between the element’s border a nd its content. T he border
can be made visible, but that is not necessary. The margin is the space outside of the
element’s border. We’ll discuss these three measures in detail in connection with one
very important concept, the so-called CSS box model, which is on our next meeting’s
agenda.
Maria: I see. Next, we attacked the two headings. We weren’t quite sure h ow to
produce the parentheses around the main heading. Then it occurred to us that we
could probably use borders with rounded corners. Again, we added some padding to
move the heading text away fro m the parentheses:
51
h1 {
border-left: 2px solid;
border-right: 2px solid;
padding-left: 10px;
padding-right: 10px;
border-radius: 10px;
font-size: 32px;
}
h2 {
background-color: black;
color: white;
font-size: 22px;
}
The styling of the footer is quite straightforward:
footer {
border-top: 1px solid;
font-size: 12px;
}
We also rem oved the underlining from the link:
a {
text-decoration: none;
}
What we haven’t solved is how to right align the text of the link. Applying the
text-align property to the < a> element didn’t work. So we applied the text-align
property to paragraphs. Like this:
p {
text-align: right;
}
Of course, with this we right alig ned the other two paragraphs as well. Still, that’s the
closest we could come. Why doesn’t aligning work on the <a> elem ent?
Professor: Because the text-align property aligns text (as well a s other inlin e con-
tent) relative to the bord ers of the ele ment that contains that text. It does not align the
element. Hence, if you apply text-align to <a>, the text insid e <a> will b e aligned
along the borders of <a>. Since < a> is not a block element, it does not extend over
the w hole width of the article but rather squeezes tightly around its content ( i.e., th e
text “Continue...”). That’s why the text cannot move any more to the right of the <a>
element than it already is. Just for fun , you try to add the declaration
52 Meeting 4. More Contr ol over Style
border-style: solid;
to <a> and <p> elements to be able to o bserve the position of the borders of ele ments.
By the way, there’s a very handy tool for observing element borders already integrated
inside Google Chrome. It is very useful and I will demonstrate how to use it in our
next meeting.
Actually, without changing the HTML code that I gave you, there’s no way yo u could
right align the link without right aligning the two paragraphs as well. Although you
can try the following stunt:
a {
display: block;
text-align: right;
}
One of the problems with that is tha t now every <a> element becomes a block ele-
ment. It’s true that there aren’t any other <a> elements in our example , but you should
generally avoid solutions like that.
Maria: If it’s working, why?
Professor: It is consid ered a bad style to change something as basic as is the ele-
ment’s display on well-defined HTML elements in order to get some results that can
be ach ieved more elegantly by other means.
Mike: A nother reason is that block elements are not permitted inside p aragraph s, ar e
they?
Professor: Right, block elements. <a> is not a block eleme nt even if you change its
display. Remember that the block-inline HTML categorization refers to the default
display value of an element. If you change it using CSS, that doesn’t change the
element’s categorizatio n as viewed by HT ML. Yet you don’t usually want to change
an eleme nt’s display if you have other options.
Mike: I see. And what would be the r ight solution then?
Professor: You can solve the problem by using the right selector. Today, you will
learn how to use different selectors, which is one of the most impor ta nt skills for
efficient CSS coding.
Before we continue, I would like to ask yo u one la st thing about your homework.
I’ve noticed tha t you’ve defined font sizes for the headings and footer but you didn’t
specify the font size for the article. Was that on purpose?
Mike: Yes, we wanted to use the default font size fo r the ordinary text. You said the
other day it was 16 px, d idn’t you?
Professor: If you use pixels for fo nt sizes, it is not a good idea to rely on default sizes.
That is yet another topic that awaits us today.
4.1. Homework Discussion 53
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.