CSS Tutorial – 03 – Using CSS

There are three way to add CSS to an HTML
document. We can either embed the style sheet in the head of the document using the style
element, or specify the style directly in a start tag using the style attribute, or
link to an external style sheet. Let’s create a basic HTML document. The style element is a container for style
sheet rules and should have it’s type attribute set to text CSS. Inside the element we can
type any CSS we want. For example we can add a rule to color all paragraphs in the document
using the color property. We’ll give it a red color using hexadecimal notation. Now,
if we refresh, we’ll see that the text inside of the paragraph becommes red. If we look
at the page in a browser we can see exactly how the page will look. For cases where we want to assign styling
to one individual element, we can use the “style” attribute to set an inline style.
This attribute can be used on all HTML tags. It uses double quotation marks instead of
curly brackets around the declaration and we don’t have to specify a selector since
it automatically applies to the current element. Next we have external style sheets. To use
one, we first need to create a new text document and save it with a .CSS extension. We’ll add
a rule to it and then we just need link it to out HTML document. This can be done in
CSS using the @import function. It must be placed before the other rules for it to work. A more common way of including style sheets
is using the link element. We set it’s relationship attribute to style sheet, the meta type to
text CSS, and finally specify the location of the style sheet. Using external style sheets is the often the
most useful approach since it completely separates CSS from the HTML document. It allows us to
quickly create a consistent look for an entire website, and to change its appearance just
by editing a single CSS document. Lastly, we can create comments in CSS using
the C-style notation. Comments will be ignored by browsers and it can be several lines long.

Leave a Reply

Your email address will not be published. Required fields are marked *