HTML and CSS Reference
In-Depth Information
h1 {font-size: xx-large;
font-family: Sans-Serif;
color: black;
text-align: center;
border-bottom: solid 4px orange;}
p {text-indent: 1em;
text-align: justify;
line-height: 150%;}
a:link {color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:active {color: red; text-decoration: none;}
Don't worry, we haven't covered all these properties yet, but we will certainly do so as the
topic progresses. Fortunately, most of the selectors are simple element and
id
selectors that
have already been introduced, save the pseudo-classes,
a:link
,
a:visited
,
a:hover
, and
a:active
, which are selectors that are associated with the various states of a link.
An (X)HTML file could use the style sheet by referencing it by using a
<link>
tag
within the
head
element of the document. To indicate the relationship between the
documents, set the
rel
attribute to a value of "
stylesheet
." The
href
attribute is used
to specify the URL of the style sheet to fetch. The URL may be relative or even remote,
pointing to a style sheet on some other server, though you should be cautious about
linking to remote files, given download delays and the possibility that the file could be
changed without your knowledge. The
type
attribute is set to indicate the type of style
sheet technology in use, as defined by the MIME type
text/css
. The
media
attribute can
be used to set how the style sheet should be applied. When omitted, the default is "
all
".
Later in the chapter, we will discuss how it is possible to define different styles for screen,
print, and other potential output environments. The general syntax for associating a style
using a
<link>
tag is shown here:
<link rel="stylesheet"
href="stylesheet URL"
type="
MIME type of stylesheet
"
media="
media-type
">
This syntax is illustrated here with a few examples:
<link rel="stylesheet" href="global.css" type="text/css">
<link rel="stylesheet" href="../styles/mainscreen.css"
type="text/css" media="screen">
<link rel="stylesheet" href="http://htmlref.com/ch4/print.css"
type="text/css" media="print">
T
IP
Like other dependent files, it is advisable to put all your style sheets in a special styles directory,
usually named “styles” or “css,” available at a site root.
