HTML and CSS Reference
In-Depth Information
let's connect the dots between our HTML and CSS, and get these two languages working
together.
Referencing CSS
In order to get our CSS talking to our HTML, we need to reference our CSS file within our
HTML. The best practice for referencing our CSS is to include all of our styles in a single
external style sheet, which is referenced from within the
<head>
element of our HTML
document. Using a single external style sheet allows us to use the same styles across an
entire website and quickly make changes sitewide.
Other Options for Adding CSS
Other options for referencing CSS include using internal and inline styles. You
may come across these options in the wild, but they are generally frowned upon,
as they make updating websites cumbersome and unwieldy.
To create our external CSS style sheet, we'll want to use our text editor of choice again to
create a new plain text file with a
.css
file extension. Our CSS file should be saved within
the same folder, or a subfolder, where our HTML file is located.
Within the
<head>
element of the HTML document, the
<link>
element is used to
define the relationship between the HTML file and the CSS file. Because we are linking to
CSS, we use the
rel
attribute with a value of
stylesheet
to specify their relationship.
Furthermore, the
href
(or hyperlink reference) attribute is used to identify the location, or
path, of the CSS file.
Consider the following example of an HTML document
<head>
element that references
a single external style sheet.
1.
<head>
2.
<link rel="stylesheet" href="main.css">
3.
</head>
In order for the CSS to render correctly, the path of the
href
attribute value must directly
correlate to where our CSS file is saved. In the preceding example, the
main.css
file is
stored within the same location as the HTML file, also known as the root directory.
If our CSS file is within a subdirectory or subfolder, the
href
attribute value needs to cor-
relate to this path accordingly. For example, if our
main.css
file were stored within a
Search WWH ::
Custom Search