`<style>`

Sets styles directly in the HTML code of the page.

Time to read: less than 5 min

Briefly

Inside the <style> tag, you can set parameters for CSS styles that are applied on the page. In general, here you describe how headings, links, regular text, and other page elements will look.

Example

        
          
          <!DOCTYPE html><html>  <head>    <style>      p {        color: red;      }    </style>  </head>  <body>    <p>This is my paragraph.</p>  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>

How to write

The <style> tag is placed in the <head>, where information that the user does not see is located.

        
          
          <head>  <style>    /* Styles */  </style></head>
          <head>
  <style>
    /* Styles */
  </style>
</head>

Attributes

media — specify this attribute so that the same element on the page is displayed differently on different devices: for example, on a phone or a projector. For instance, if you want the main text to appear larger on the projector than when viewed on a computer screen. To do this, add the media attribute with the value "projection" and specify the font size, such as font-size: 120%;. Here are some device options, you can specify several separated by commas:
- all — all devices;
- braille — devices based on the Braille system created for blind people;
- handheld — smartphones and other devices with narrow screens;
- print — printer;
- screen — standard computer screen — this is the default value;
- speech — speech synthesizers, as well as programs for reading text aloud and speech browsers;
- projection — projector;
- tty — teletypewriters, terminals, portable devices with limited screen capabilities;
- tv — television.

More examples

Let's try to make the main heading on the page even larger, set the fonts without serifs and the black color:

        
          
          <!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Marfa's Culinary Blog</title>    <style>      h1 {        font-size: 30px;        font-family: "Roboto", sans-serif;        color: #000000;      }    </style>  </head>  <body>    <h1>How to bake real croissants?</h1>  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marfa's Culinary Blog</title>
    <style>
      h1 {
        font-size: 30px;
        font-family: "Roboto", sans-serif;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <h1>How to bake real croissants?</h1>
  </body>
</html>

Open demo in the new window

In this example, the text color and background in the paragraph will change depending on the screen width:

        
          
          <!DOCTYPE html><html>  <head>    <style>      p {        background-color: white;        color: #663613;      }    </style>    <!-- Will work on screens up to 500px wide -->    <style media="all and (max-width: 500px)">      p {        background-color: #FF8630;        color: black;      }    </style>  </head>  <body>    <p>To bake real croissants...</p>  </body></html>
          <!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        background-color: white;
        color: #663613;
      }
    </style>
    <!-- Will work on screens up to 500px wide -->
    <style media="all and (max-width: 500px)">
      p {
        background-color: #FF8630;
        color: black;
      }
    </style>
  </head>
  <body>
    <p>To bake real croissants...</p>
  </body>
</html>

Open demo in the new window

In practice

Advice 1

🛠 Lifehack: to make the website load faster, especially on phones or with slow internet, you need to insert the code that is responsible for displaying the top part of the site into <head> in the format <style>/* Our CSS code */</style>.

That is, you can embed the site header, top banners, headings - what is displayed immediately upon opening. Everything below can then be loaded via JavaScript after the entire page has loaded. This way, we immediately show the user content, they start reading it, and in the meantime, the lower part of the site is loading.

More information about this approach can be found by searching for "critical CSS".

Advice 2

🛠 Many novice developers tend to err by writing styles directly within the HTML markup using the <style> tag. This should not be done.

One of the principles of layout: separation of content and design. Content is the markup of the page, while design corresponds to CSS styles.

Why is that? 🤔

It is not uncommon for websites to be pulled into a content management system — CMS after layout. Templates are created from HTML markup, and PHP is used to pull data from the admin panel.

As a result, after such manipulations, it will be quite problematic to change the HTML and will require additional knowledge. However, access to styles will remain if they are placed in a separate file. This way, the site can be completely transformed without changing the markup.

If the styles are embedded in HTML, changing the appearance of the site will be as difficult as changing the markup.

🛠 The <style> tag can be used for quick hypothesis testing. For example, you have a guess about how to solve a problem, but you're not sure. Jot down possible solutions directly in HTML and check in the browser.

Although it is more convenient to do the same in the developer tools of the browser itself 🤗

🛠 In fact, the <style> tag can be placed anywhere on the page, not necessarily in <head>, and it will work! But it shouldn't be done this way 🌚

Briefly

Example

How to write

Attributes

More examples

In practice

Advice 1

Advice 2

Read also

<link>

.style

<head>

`<link>`

`.style`

`<head>`