Linking CSS to HTML - Linking style sheets to Web pages

There are three ways to declare CSS instructions to HTML code: inside the tag ( inline), in head (embedded) and with a separate document (extern).

Linking CSS to HTML - Linking style sheets to Web pages | Learn CSS | There are three ways to declare CSS instructions to HTML code: inside the tag ( inline), in head (embedded) and with a separate document (extern)

Style instructions can be linked in various ways to the HTML code. One of them is to write them directly in the HTML (inline) tag, a series of instructions in the header area of the document (embedded) or place them externally in a separate file (extern).

Regarding the separation between structure and representation that we indicated at the beginning, it is best to do it to the external variant. Since inline styles are written directly into the source code, they are only appropriate, at best, for the development phase or for checking certain values. In addition, its syntax varies very little from the syntax proper to style instructions. The embedded styles can not be used with effect in the whole file, but they have to be written one sheet at a time, which considerably complicates their maintenance. The flexibility gained by using external styles is very limited.

Style instructions directly on the HTML (inline) tag

The instruction written directly on the HTML tag would look like this:

<h1 style=”color:#000033;”>Blue title</h1>

Notice that the statement is not written between curly braces , but in a typical attribute of the HTML language: style = "...". Also, the instruction only works for this instance of <h1>. In all other instances it is necessary to write the instruction again.

Style instructions in the header of the document (embedded)

To incorporate style instructions in the <head> header area of the HTML document you first need the <style> element with the type = "text / css" attribute. In this element all the instructions are written in the syntax that we have already described.

<head>
<!-- other elements -->
<style type=”text/css”>
h1 {color:#000033;}
h2 {color:#003300:}
<style>
</head>

In addition to the blue title <h1>, here it is also specified that the titles <h2> have to go green. Note that these instructions are valid for all instances of <h1> and <h2> that appear in the document. Do not forget to close the block with the final tag </style>.

The <style>…</style> block must be entered completely in the <head> header area of each file.

Linked Style Sheets (extern) ultimate

Let's now look at the solution of style linking. All the necessary instructions are defined once in an external file (the style sheet) and the file is then referenced in each HTML document in which we want to apply the instructions. If we modify one or more of these instructions, they are automatically outdated in all the linked documents.

The file with the style sheet definitions must be a pure ASCII file without any other "markup". Our advice is to always save the file with the extension .css, for example mystyle.css

Write in it all the CSS instructions you want, using only the syntax described in the previous section, for example:

h1 {
background-color: #c0c0c0;
color: #000033;
}

The reference of the CSS file in an HTML document would be written like this:

<head>
<!-- other elements -->
<link rel=”stylesheet” type=”text/css” href=”css/miestilo.css”>
</head>

Has been worth writing the CSS file (s) in a separate subdirectory. Your path can be indicated relative or absolute.

Did you like it or was it useful?

Help us share it in Social Networks

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Sponsored content:
 

Leave your Comment

SPONSOR

Your business can also appear here. More information