Inline Styles | Inside JavaScript

One way of using styles is to use inline styles, where you apply styles to one HTML element only. To create an inline style, you use the STYLE attribute that most HTML elements have. Here's an example we saw in Chapter 6, "Using Core HTML Methods and Events," (Listing 06-15.html) for the Internet Explorer, where we used inline styles to color and size a <DIV> element that we used as a drop target:

 <HTML>      <HEAD>          <TITLE>              Dragging and Dropping Data          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function startDrag()              {                  event.dataTransfer.setData("Text",                      "The data was passed to the target!");                  event.dataTransfer.effectAllowed = "copy"              }              function endDrag()              {                  event.returnValue = false                  event.dataTransfer.dropEffect = "copy"                  droptarget.innerHTML =                      event.dataTransfer.getData("Text")              }              function dragOver()              {                  event.returnValue = false                  event.dataTransfer.dropEffect = "copy"              }              // -->           </SCRIPT>      </HEAD>      <BODY>          <H1>Dragging and Dropping Data</H1>          <IMG SRC="dragger.jpg" ondragstart="startDrag()">  <DIV ID="droptarget"   STYLE="background:pink; width:300; height:100;"   ONDRAGENTER="dragOver()" ondrop="endDrag()"   ONDRAGOVER="dragOver()">   Drop the data here...  </DIV>      </BODY>  </HTML>

That's how you set style attributes using inline styles, with the HTML STYLE attribute like this: STYLE="style-attribute: value; style-attribute: value; ..." . This text, made up of style-attribute: value pairs, is called a style rule . You can assign a style rule to the STYLE attribute of individual elements like this, or you can group all style rules for a document together into a <STYLE> element, as we'll see next .