How to Remove All CSS Styles for a Single DIV

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Remove All CSS Styles for a Single DIV
Websites use both HTML and CSS to determine appearance and style. (Comstock/Comstock/Getty Images)

Making changes to the CSS (Cascading Style Sheet) declarations applying to an HTML element can seem a complex task. However, as long as you approach it systematically, you should be able to make the changes you need without too much stress. A single Web page can use style properties from multiple sources, so your initial task will be to find out where the declarations for your "div" are coming from. Once located, you can stop the declarations from having an effect on the element by altering either the HTML or CSS code.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Find out where the Web page CSS code is stored. CSS code can appear in-line, which means style declarations are listed as part of an element's markup as in the following example syntax:

    <div style="colour:#FF0000;">Content</div>

    If this code appears within your "div" you can remove the entire "style" attribute along with its value. CSS code may appear within the head section of the page as follows:

    <style type="text/css">

    body {background-colour:#000000;}

    </style>

    CSS code may also appear in one or more separate CSS files with links in the page head section as follows:

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

    If your page has CSS code in the head or in separate files, you will need to look at all of this CSS code to alter the styling for your "div" element.

  2. 2

    Check for CSS code referring to "div" elements. CSS can apply to an element type, as in the following example:

    div {

    padding:5px;

    }

    If the CSS in your page head or separate files has the "div" identifier used in this way, the code within the CSS block will be affecting your element. To change the effect on your "div" but leave the code to apply to other "div" elements in the site, you can change the "div" to a different element type. Alternatively, you can alter the CSS code to apply only to "div" elements with a particular class attribute, adding this attribute to those "div" elements you want the CSS to apply to.

  3. 3

    Check for CSS code referring to your element class. HTML elements can have class attributes as follows:

    <div class="top">Top content</div>

    If your "div" has a class attribute, look for the attribute value in your CSS code. The attribute value can appear on its own as follows:

    .top {

    /CSS declarations/

    }

    Alternatively it may appear along with the element type as follows:

    div.top {

    /CSS declarations/

    }

    If either of these appear, you can prevent the declarations from applying to your element by changing or removing its class attribute. Removing the CSS code may affect other elements with the class, not just the element you're working with.

  4. 4

    Check for CSS code referring to your element ID. Your element may have a unique ID attribute as follows:

    <div id="heading">Top content</div>

    If your element has an ID attribute, check for it within the CSS by looking for the following syntax:

    heading {

    /CSS declarations/

    }

    Within each page, an ID attribute value should only appear once, as the ID is meant to be unique. Changing the ID attribute value should prevent the CSS code from affecting the "div" element. You can optionally change or remove the CSS code, but this may affect elements with the same ID on other pages in your site if they use the same CSS code.

  5. 5

    Check for CSS code affecting the parent or child elements of your "div." CSS code for parent elements will have a knock on effect on your "div" so you may need to make alterations to that code, although these changes may affect the rest of your site. Elements inside your "div" may also have tailored CSS code, so check for this using the same method you used for the "div" itself, working through the child elements in turn.

Tips and warnings

  • Browser tools such as Firebug can be helpful when altering HTML and CSS code.
  • Changes to an existing website can have unintended consequences. For this reason you may wish to save copies of any files you plan on changing.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.