HTML and CSS Reference
In-Depth Information
<h1 style="color: blue; background-color:
#333;">RecipeFinder</h1>
In this case, the CSS is contained inside of an HTML
attribute
called
style
. The attribute
tells the browser that what follows inside the quotation marks is CSS. In this example, the
styles will only apply to the element to which they're attached (the
<h1>
element in this
case). This is a very inefficient way of inserting CSS and should be avoided in almost all cir-
cumstances.
Using the
<style>
Element
You can also include CSS in an HTML page using a
<style>
tag, which also requires a
closing
</style>
tag:
<style>
header {
color: white;
background-color: #333;
font-size: 1.5em;
}
</style>
In this example, the styles will apply only to the element(s) targeted in the selector. So, in
this instance, the styles will apply to all <header> elements on the page where this
<style>
element appears.
Using
@import
inside a
<style>
element
You also have the option to include CSS in a separate file. It's similar to a text file, but has
a file extension of “.css”. So a chunk of CSS inside a separate file can be imported into your
HTML like this:
<style>
@import url(css/style.css);
</style>
