HTML and CSS Reference
In-Depth Information
#footer {
font-size: 80%;
font-weight: 700;
font-style: italic, underline;
If you just want to render some text in bold, you can simply set the font-weight property to bold .
If you need more control over the weight of the text, you can choose a value between 400 (normal)
and 700 (bold). Higher or lower values are still allowed, and they just decrease or increase the
“weight” of the font.
HTML display modes
An HTML page results from the composition of multiple elements. How are these elements actually
composed by the browser? Will they just be stacked up horizontally or vertically? Is there blank
space that can be configured between them? In this section, you'll learn about the first point before
addressing the second point in the next section.
HTML allows two basic display modes: inline and block . All HTML elements render in one of these
ways by default. For example, the DIV element is always rendered as a block, whereas the SPAN
element is rendered inline. You can change display modes via CSS, however. The property to use is
named display .
Block elements
Block elements are stacked up vertically. Each block element takes up the entire width available and
is rendered as if there were a line break before and after. This means that whenever the browser
encounters a block element it begins rendering on a new line. When done, it moves to the next line
before attacking a new element. Here's how to ensure that a custom CSS class renders out as a block:
.headline {
display: block;
Common HTML elements that are displayed as blocks by default are H1 (and other heading
elements), DIV , P , UL , LI , TABLE, and FORM .
Inline elements
Conversely, inline elements don't force the browser to break the flow of HTML when rendering.
An inline element just renders side by side with existing content, and strictly takes up necessary
space. Here's how to ensure that a custom CSS class renders out content inline:
.headline {
display: inline;
Search WWH ::

Custom Search