Theory
Theory
Comments

Embedded styles and the style attribute

We already know that it is considered good practice to invoke styles using the <link> tag:

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

But there is another way to invoke styles: by embedding them directly into a document instead of invoking them through links. Styles can be invoked either inside the <style> tag, or they can be written out as the value for in the style attribute of the HTML elements themselves.

The option for invoking styles in the <style> tag is used most frequently to optimize the page load time. After all, in this case the browser will not have to send additional queries to the server. The <style> tag is usually placed 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. To do this through CSS, you would have to create 100 classes and assign them as follows:

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

It is much more convenient to pinpoint the assignment of a style specifying width in the 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 offended at 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 should be taken 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 even was assigned an instructor, Muffin, who does not allow me to slack off and will track 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