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).
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.
ChatGPT Free
Ask questions on any topic
CITE ARTICLE
For homework, research, thesis, books, magazines, blogs or academic articles
APA Format Reference:
Delgado, Hugo. (2019).
Linking CSS to HTML - Linking style sheets to Web pages.
Retrieved Nov 05, 2024, from
https://disenowebakus.net/en/link-css-to-html
Participates!
Share it with your friends in Social Networks!CONTINUE LEARNING
IT ALSO DESERVES TO PAY TO VISIT:
Style sheets consist of a series of instructions that define how certain page elements with HTML...
The usability is a feature that measures how intuitive and easy to use is a web page for the common...
Specificity is one of the criteria used by the browser (or other user agents) in case of conflict to...
Web accessibility means that people with some type of disability will be able to use the Web...
