CODEWITHSUNDEEP
jqueryhtmlcss
Lapson Wong
Lapson Wong

Reputation: 107

How to avoid HTML element being matched by CSS and reset it?

I am newbie in HTML and CSS. Below is the code for testing. Assume the html link to external CSS as shown below:

ul {
    overflow: hidden; color: #fff; padding: 0;
}

li{ margin-left: -10px; }

My HTML file is shown as below:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<ul>
   <li>abc</li>
   <li>ref</li>
   <li>cde</li>
</ul>

<ul>
   <li>I want to reset this style</li>
   <li>I want to reset this style</li>
   <li>I want to reset this style</li>
</ul>

</body>
</html>

Assume that I don't have access to to the CSS file, I want to reset the style of the second unorder list in HTML. I don't know the content of CSS. How can I do it inline HTML, CSS or by jquery? Any code example would be highly appreciated. Thank you.

Upvotes: 3

Views: 64

Answers (3)

Bradley Ross
Bradley Ross

Reputation: 455

I thought it over a little more and you can use all:initial to reset all of the properties in a CSS definition back to their initial values before CSS. You can use class names to indicate which tags won't use the normal CSS style. Look at the following example. The ul tag with a class of changed uses the style element in the header.

However, depending on what you are doing, this can be complicated. You might want to define a div class that will use your formatting as opposed to the original document's CSS definition. You can then then create CSS rules that will only work within divs of that class.

<!DOCTYPE html>
<html>
<head>
  <title>Reverting CSS</title>
  <meta encoding="UTF=8">
  <style>
    ul {
      color: blue;
      font-style: italic;
    }
    ul.changed {
      font-size: 200%;
    }
    ul.revert {
      color: revert;
      font-size: revert;
    }
    ul.initial {
      color: initial;
      font-size: initial;
    }
    ul.all {
      all: revert;
    }
    ul.unset {
      color: unset;
      font-size: unset;
    }
  </style>
</head>

<body>
  <p>I found the differences between revert, initial, and unset a little confusing.</p>
  <p>No class but CSS for ul has been changed</p>
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <p>CSS for class changed applied on top of CSS for ul without class.</p>
  <ul class="changed">
    <li>First</li>
    <li>Second</li>
  </ul>
  <p>Use of revert for font-size and color properties</p>
  <ul class="revert">
    <li>First</li>
    <li>Second</li>
  </ul>
  <p>Use of initial for font-size and color properties</p>
  <ul class="initial">
    <li>First</li>
    <li>Second</li>
  </ul>
  <p>Use of all:initial. This resets all properties to initial values.</p>
  <ul class="all">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
  <p>Use of unset for font-size and color properties</p>
  <ul class="unset">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
  </ul>
</body>
</html>

Upvotes: 0

Klaus
Klaus

Reputation: 1

There are several ways to acheave your goal to give the two unorderd lists different styles

1) Overwrite the general style definition with a specific definition

To identify the second list you can use either a class tag or an id tag

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      color=blue;
    }
    ul.myclass {
      color = green;
    }
    #secondList {
      color = red;
    }
  </style>
</head>

<body>
  <ul>
    <li>List in the general style</li>
  </ul>

  <ul id=secondList>
    <li>List in the idividual style by identifying by ID</li>
  </ul>

  <ul class=myclass>
    <li>List in the class style of myclass</li>
  </ul>
</body>
<html>

2) Overwriting a defined style

HTML pages are prossed sequentially - like one reads a page and always the last definition of a style will be displayed

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      color=blue;
    }
  </style>
</head>

<body>
  <ul>
    <li>List in the general style</li>
  </ul>

  <style>
    ul {
      color = green;
    }
  </style>

  <ul>
    <li>List with a changed general style</li>
  </ul>
</body>
<html>

3) Inline styling

One can use inline styling to change the styling of a particular element

<!DOCTYPE html>
<html>
<head>
  <style>
    ul {
      color=blue;
    }
  </style>
</head>

<body>
  <ul>
    <li>List in the general style</li>
  </ul>

  <ul style="color: green;">
    <li>List with an inline styling</li>
  </ul>
</body>
<html>

Upvotes: 0

willoller
willoller

Reputation: 7330

If you have zero access to the css, then you won't (necessarily) know which properties to reset.

That said, you can always use inline styles like this:

<ul>
  <li>...</li>
  <li style="color: green; background: #eee;">Green one</li>
  <li>...</li>
</ul>

Basically any HTML element can have a style attribute, and regular CSS goes in there.

UPDATE: If you can add your own tags to the source, you could add resets in there as well.

<style>
  ul + ul li {
    /* resets in here */
  }
</style>

Upvotes: 3

Related Questions