How to Convert HTML to CSS in a Drupal Theme

Inline CSS lets you create CSS styles in your HTML code. When you first create your Drupal theme, you use inline CSS to quickly create the layout, but before distributing your theme, you create a separate CSS file and move the inline CSS in the HTML tags to a standard external CSS file you use to include your theme's layout.

Instructions

1. Right-click the theme HTML file and click "Open With." Click your preferred HTML editor to open the theme code in your editor. Click the Windows "Start" button and type "notepad" in the search text box and press "Enter." Now you have your HTML theme and a separate Notepad window in which you create the CSS file.

2. Locate the "body" tag. This tag contains the styles for the main content in the page. The inline styles are located in the "style" property of the tag. You want to copy this style and place it in the CSS file you create.

3. Copy the body style tag to the Notepad window. Format the style for the CSS file. The following code is an example of a body CSS style formatted for an external stylesheet:

   body
   {
   background-color: gray;
   }

4. Continue adding each of your inline styles from the HTML file to the CSS file. After you complete the conversion, save the Notepad file with a CSS extension. Typically, developers save a CSS file as "styles.css."

5. Link the new stylesheet inside the HTML file for the theme. Add the following code in the head section of the HTML file to apply the CSS to the HTML file:

   <link rel="stylesheet" type="text/css" href="styles.css" />

6. Save the HTML file and open it in your Web browser to test the new CSS styles for the them layout.

References

• Tizag: External CSS