HTML and CSS Reference
In-Depth Information
CSS uses a box model to control how
elements are displayed.
Use the line-height property to add space
between lines of text.
Boxes consist of the content area and
optional padding, border, and margin.
You can place an image in the background
of an element with the background-image
property.
The content area contains the content of the
element.
Use the background-position and
background-repeat properties to set the
position and tiling behavior of the background
image.
The padding is used to create visual space
around the content area.
The border surrounds the padding and
content and provides a way to visually
separate the content.
Use the class attribute for elements that you
want to style together, as a group.
Use the id attribute to give an element
a unique name. You can also use the id
attribute to provide a unique style for an
element.
The margin surrounds the border, padding,
and content, and allows space to be added
between the element and other elements.
Padding, border, and margin are all optional.
An element's background will show under the
content and the padding, but not under the
margin.
There should only be one element in a page
with a given id.
You can select elements by their id using the
id selector; for example, #myfavoriteid.
Padding and margin size can be set in pixels
or percentages.
An element can have only one id, but it can
belong to many classes.
Border width can be set in pixels or by using
the keywords thin, medium, and thick.
You can use more than one stylesheet in your
HTML.
There are eight different styles for borders,
including solid, dashed, dotted, and ridge.
If two stylesheets have conflicting property
definitions, the stylesheet that is last in the
HTML file will receive preference.
For margins, padding, or the border, CSS
provides properties for setting all the sides
(top, right, bottom, left) at once, or it allows
them to be set independently.
You can target devices by using media
queries in your <link> element or the @media
rule in your CSS.
Use the border-radius property to create
rounded corners on an element with a border.
