What is The Role of CSS
CSS is a language for describing the appearance of a document written using a markup language. The name comes from the English. Cascading Style Sheets – cascading style sheets.
In simple words, CSS is designed to give HTML documents the appearance they need.
Giving the appearance of HTML documents is, although the most popular, but only a special case of using the CSS language. it can be used to give appearance to other types of documents: XHTML, SVG and XUL. We will not talk about them separately, because this is outside the scope of the issue at hand.
So, the goal of creating CSS was to separate the description of the logical structure of a web page from its appearance. As you already know, HTML is used to describe the structure, but CSS is responsible for describing how this logical structure will look.
The separate description of the logical structure and presentation of the document allows more flexible control over the appearance of the document and minimizes the amount of repetitive code that would inevitably arise when using HTML to describe the appearance of the document.
Of course, in order to use CSS to give the appearance of an HTML document, you need to somehow link the document with styles, i.e. “Tell” the HTML document that it will be styled with CSS.
Style sheets can be located either directly inside the document to which they will be applied, or in a separate file with the.css extension.
It’s important to understand that a CSS file is just a plain text file. It contains special instructions describing the appearance of the element and its positioning on the page, as well as comments (arbitrary explanations regarding the written instructions).
Web design agency Los Angeles shows you how CSS styles can be embedded in a page in the following four ways:
- If the stylesheet is in a separate file, then it is connected to the document using a special link tag, which must be located in this document inside the head tag.
The href attribute specifies the path to the included stylesheet.
- The second connection method is also used if the styles are in a separate file. In this case, the @import directive is used, which must be in this document inside the style tags (which, in turn, must be inside the head tags ):
<style type=”text/css” media=”all”>
@import url (style.css);
Here, as you can see, the path to the included file is indicated in parentheses after the word url.
- The third method is used when CSS styles are located inside the document to which they should be applied. In this case, the styles should be in this document inside the style tags (which, in turn, should be inside the head tags ):
<style type = “text/css”>
In the example above, inside the style tags is a style that sets the text color to red for the body element of the web page.
- The fourth method is also used in cases where the style sheet is described in the document itself. In this case, the styling is set for a specific element of the web page (tag) by using its style attribute.
In this case, all CSS rules set in this way will apply only to the current tag (web page element).
<p style = “font-size: 21px; color: green;”> Using inline style sheets. </p>
In the example above, we set the font size and color for one specific paragraph of text within the document.
Summing up the ways of connecting styles, we can say that in the first two cases external style sheets were applied to the document, while in methods 3 and 4 we are dealing with inline (or internal) styles.