Converting Inline HTML style attributes into Embedded CSS style rules

http://www.csit.parkland.edu/~rwhobrey/webdesign/lectures/lecture-p9imageformatting.html

View the source code and see the associated code for each image format. The CSS properties are provided as INLINE style rules with each image so that the formatting properties are easy to find. The editor used <div> tags and <span> tags with the style attribute to apply most of the CSS inline.

To make the HTML coding cleaner, you should convert the inline styles to embedded style rules. Every time you see the style attribute added to an element, you will need to convert the coding. This will demonstrate your understanding of how HTML coding and CSS coding work together to apply formatting. When you view the code given in the image formatting web page, each image format has a comment to show where the code starts and ends:

Look at the example of inline CSS code below. (I spaced it out and added comments with the div tags so that it is easier to find each piece of coding.) The HTML codes to pay attention to are in red. The CSS properties that are to be converted from inline to embedded are in green:

<!--Format 7 with pink and purple formatting-->

<div style="display: block; width: 331px; margin: 0; padding: 0; font-family: Trebuchet MS,Tahoma,Arial,Helvetica,sans-serif; font-size: 14px; background: #FFB3BC; border-top: 10px solid #905EB7; color: white"> <!--start of first div-->

<div style="padding: 10px"> <!--start of second div-->

<span style="color: #905EB7; font-weight: bold">Parkland College Campus</span><br />

<span style="font-size: 16px; font-weight: bold">Landscaping</span>

Cropping removes portions of an image and will result in a smaller storage size. When an image is resampled, some of the colors are removed, the image is compressed and sharpened. Each time you edit and save a .jpg image, the quality of the image is degraded to some degree. Avoid excessive editing and saving of jpg images to retain the highest quality possible. Cropping and resampling this image reduced the file storage size to ---K.
</div> <!--end of second div-->

<img src="images/parklandcampus.jpg" width="331" height="218" alt="Photograph by Parkland photographer" />
</div> <!--end of first div-->

<!--End of Format 7-->

Details are listed below to help you with the steps to convert the above code (in the pink box) from INLINE style rules to EMBEDDED styles rules
(Embedded style rules are contained in a <style></style> element in the <head></head> section of the web page)

As you complete the steps, it is important to think about the process.

In the above code:

To summarize the steps for converting an INLINE style rule to an EMBEDDED style rule:

Repeat the same process for each element where you find style attributes being used to assign inline CSS in the HTML code.

To summarize what the completed code for the above example would look like after all of the inline style rules are converted...the HTML code will look like this. No style="cssproperties" attributes are left in the HTML:

<div id="outsidebox"> <!--start of first div-->

<div id="insidebox"> <!--start of second div-->

<span id="heading">Parkland College Campus</span><br />

<span id="subheading">Landscaping</span>

Cropping removes portions of an image and will result in a smaller storage size. When an image is resampled, some of the colors are removed, the image is compressed and sharpened. Each time you edit and save a .jpg image, the quality of the image is degraded to some degree. Avoid excessive editing and saving of jpg images to retain the highest quality possible. Cropping and resampling this image reduced the file storage size to ---K.
</div> <!--end of second div-->

<img src="/images/parklandcampus.jpg" width="331" height="218" alt="Photograph by Parkland photographer" />
</div> <!--end of first div-->

The embedded style rules that correspond with the properties copied from the inline style attributes:

#outsidebox {
display: block;
width: 331px;
margin: 0;
padding: 0;
font-family: Trebuchet MS,Tahoma,Arial,Helvetica,sans-serif;
font-size: 14px;
background: #FFB3BC;
border-top: 10px solid #905EB7;
color: #FFF;}

#insidebox {
padding: 10px;
}

#heading {
color: #905EB7;
font-weight: bold;
}

#subheading {
font-size: 16px;
font-weight: bold;
}

When inserting your own images into existing formats, you will need to look at the values used in the style rules and adjust properties like width to fit your image. In the above example, you can see that the <img> tag shows the image that is used has a width of "331". In the ID for #outsidebox, you can see there is a width given that matches the image width. So....if you were using an image that has a width of 400 pixels, you would need to change the width value in the #outsidebox style rule to make it width: 400px; or change the dimension of your picture to fit the width of 331.

An example of an img element with an INLINE style added:

<img src="images/parklandcampus.jpg" style="float: left; margin: 0px 10px 10px 0px;" alt="Parkland Campus landscaping" height="155" width="232">

To convert this INLINE CSS to EMBEDDED CSS:

Create a style rule using an ID selector like: #floatedimage { }

Cut the CSS properties from the style attribute and PASTE them into the { } of the new style rule:

#floatedimage {
float: left;
margin: 0px 10px 10px 0px;

}

In the HTML code, replace the style attribute with an id attribute to match the CSS selector name

<img src="images/parklandcampus.jpg" id="floatedimage" alt="Parkland Campus landscaping" height="155" width="232" />