How do I get rid of the gap under my image?
Images are inline elements, which means they are treated
in the same way as text. Most people kind of know this -
they know that if you use 'text-align:center' on an
image it will be centred. What many people don't realise
is that this means you will have a gap underneath an
image. This gap is for the descenders of letters like
j,q,p,y and g. To get rid of this gap you need to make
the image block-level - like this :
CSS
img {display:block;}
One problem that this can cause is when you want to have
a few images next to each other - if they are
block-level, they won't be next to each other. To get
around that, you can use float:left. Of course, this
might present another problem - maybe you don't want the
image to float left. In this case, you can use an
unordered list like this :
CSS
ul, li {
list-style-type:none;
padding:0;
margin:0 auto;
}
ul {
width:150px;
}
li {
float:left;
}
HTML
<ul>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
<li><img src="wine.jpg" height="50" width="50"
alt="wine" /></li>
</ul>
Why use Style Sheets?
Style sheets allow a much greater degree of layout and
display control than has ever been possible thus far in
HTML. The amount of format coding necessary to control
display characteristics can be greatly reduced through
the use of external style sheets which can be used by a
group of documents. Also, multiple style sheets can be
integrated from different sources to form a cohesive
tapestry of styles for a document. Style sheets are also
backward compatible - They can be mixed with HTML
styling elements and attributes so that older browsers
can view content as intended.
What does the "Cascading" in "Cascading Style Sheets"
mean?
Style Sheets allow style information to be specified
from many locations. Multiple (partial) external style
sheets can be referenced to reduce redundancy, and both
authors as well as readers can specify style
preferences. In addition, three main methods can be
employed by an author to add style information to HTML
documents, and multiple approaches for style control are
available in each of these methods. In the end, style
can be specified for a single element using any, or all,
of these methods. What style is to be used when there is
a direct conflict between style specifications for an
element?
Cascading comes to the rescue. A document can have
styles specified using all of these methods, but all the
information will be reduced to a single, cohesive
"virtual" Style Sheet. Conflict resolution is based on
each style rule having an assigned weight according to
its importance in the scheme of things. A rule with a
higher overall importance will carry a higher weight.
This will be used in place of a competing style rule
with a lower weight/importance. A hierarchy of competing
styles is thus formed creating a "cascade" of styles
according to their assigned weights. The algorithm used
to determine this cascading weight scale is fairly
complex.
What is CSS rule 'at-rule'?
There are two types of CSS rules: ruleset and at-rule.
At-rule is a rule that applies to the whole style sheet
and not to a specific selector only (like in ruleset).
They all begin with the @ symbol followed by a keyword
made up of letters a-z, A-Z, digits 0-9, dashes and
escaped characters, e.g. @import or @font-face.
What is selector?
CSS selector is equivalent of HTML element(s). It is a
string identifying to which element(s) the corresponding
declaration(s) will apply and as such the link between
the HTML document and the style sheet.
For example in P {text-indent: 10pt} the selector is P
and is called type selector as it matches all instances
of this element type in the document.
in P, UL {text-indent: 10pt} the selector is P and UL
(see grouping); in .class {text-indent: 10pt} the
selector is .class (see class selector).
What is CLASS selector?
Class selector is a "stand alone" class to which a
specific style is declared. Using the CLASS attribute
the declared style can then be associated with any HTML
element. The class selectors are created by a period
followed by the class's name. The name can contain
characters a-z, A-Z, digits 0-9, period, hyphen, escaped
characters, Unicode characters 161-255, as well as any
Unicode character as a numeric code, however, they
cannot start with a dash or a digit. (Note: in HTML the
value of the CLASS attribute can contain more
characters).It is a good practice to name classes
according to their function than their appearance.
.footnote {font: 70%} /* class as selector */
<ADDRESS CLASS=footnote/>This element is associated with
the CLASS footnote</ADDRESS>
<P CLASS=footnote>And so is this</P>
What is CSS declaration?
CSS declaration is style attached to a specific
selector. It consists of two parts; property which is
equivalent of HTML attribute, e.g. text-indent: and
value which is equivalent of HTML value, e.g. 10pt.
NOTE: properties are always ended with a colon.
What is 'important' declaration?
Important declaration is a declaration with increased
weight. Declaration with increased weight will override
declarations with normal weight. If both reader's and
author's style sheet contain statements with important
declarations the author's declaration will override the
reader's.
BODY {background: white ! important; color: black}
In the example above the background property has
increased weight while the color property has normal.
What is cascade?
Cascade is a method of defining the weight (importance)
of individual styling rules thus allowing conflicting
rules to be sorted out should such rules apply to the
same selector.
Declarations with increased weight take precedence over
declaration with normal weight:
P {color: white ! important} /* increased weight */
P (color: black} /* normal weight */
Are Style Sheets case sensitive?
No. Style sheets are case insensitive. Whatever is case
insensitive in HTML is also case insensitive in CSS.
However, parts that are not under control of CSS like
font family names and URLs can be case sensitive -
IMAGE.gif and image.gif is not the same file.
Page Numbers :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
