CSS internal style sheet

Internal style sheet

An internal style sheet is a set of styles that is part of the web page code that must always be inside the <style> element inside the <head> element:

<head>
  <style>
    hr { color: sienna; }
    p { margin-left: 20px; }
    body { background-image: url("images/back40.gif"); }
  </style>
</head>

The <style> tag tells the browser that the data inside is a CSS code. These stylesheets are not the best way to design a site that consists of a large number of pages. First, such code will have to be copied and pasted into each page, and it will be even more difficult to edit it after any new changes. Second, each of these inserted code multiplies the size of the code on the page as a whole, so that the page will be downloaded for a longer time to view.

Tip: if the web page has an internal stylesheet, and you want to use an external stylesheet, just cut the CSS between the <style> tags (without the tags themselves). Then create a new text document and paste the CSS into it. Save the file with a .css extension, for example my_styles.css, and add it to your web page using the <link> tag or the @import rule.

Inline style

The inline style means using the global style attribute directly on the element that you want to be styled. The attribute value is specified by CSS properties:

<div style="border: 1px solid red; background-color: yellow;">div element</div>

The downside to using inline styles is that they create additional inconveniences: the structure of the document is mixed with its styling, the search and editing of such styles takes quite a long time.

Note: the inline style is used in those rare cases where it is necessary to define a style for only one element, and there is no more convenient way to do this. However, you can almost always avoid using the inline style by adding a unique identifier or class to the desired element.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen