Theory
Theory
Comments

Embedded styles and the style attribute

We already know that linking an external stylesheet with <link> is good practice:

<link rel="stylesheet" href="style.css">

You can also write styles directly in the HTML document instead of linking a separate stylesheet. Put CSS rules inside a <style> element, or write declarations in an HTML element’s style attribute.

Embedding styles in a <style> element can reduce the requests needed to load a page, because the browser does not need to fetch a separate CSS file. The <style> element usually goes inside <head>. For example:

<head>
  <style>
    CSS code
  </style>
</head>

The second option for embedding styles is through the contents of the style attribute. The properties and values that are assigned in this way will be applied to just a single element:

<div style="width: 50%;"></div>

Usually, using this method is considered to be bad practice because it’s harder to maintain when some styles are in a stylesheet and others are mixed in with the HTML. However, in exceptional cases it is sometimes more convenient to embed styles in a style attribute than to write out separate CSS rules. For example, when you need to manage styles from the markup itself, it is not necessary to create separate classes. This happens when some style parameters are assigned using third-party programs or by other people, such as, for example, through a Content Management System.

Let’s take a closer look at the example with style="width: 50%;". Let’s suppose that you need to be able to control the width using the property width within a range of 0% to 100% in the markup. Using a separate class for each whole percentage from 0 to 100 would require 101 classes, like these:

.width-0 { width: 0% }
.width-1 { width: 1% }
.width-2 { width: 2% }
/* etc… */

It is much more convenient to set the required width directly in the element’s style attribute.

Let’s use this method to apply styles to our visual indicator of the progress that we made in learning new skills.

You can access the intermediate version of our website at this link.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav class="blog-navigation"> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is upset with me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or, more precisely, night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I was even assigned an instructor, Muffin, who won’t let me slack off and will keep track of my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> <h2>Skills</h2> <dl class="skills"> <dt>HTML</dt>  <dd><div class="skills-level skills-level-ok">60%</div></dd> <dt>CSS</dt> <dd><div class="skills-level">20%</div></dd> <dt>JS</dt> <dd><div class="skills-level">10%</div></dd> </dl> </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { list-style: none; padding-left: 0; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Goalscompleted

Assign a style attribute with the value width: 60%; to the first div tag with the class skills-level,
assign another style attribute with the value width: 20%; to the second div tag,
and assign yet another style attribute with the value width: 10%; to the third div tag.

Embedded styles and the style attribute

Comments

Log in

Sign up

Restore access