css Question posted in
Some basic documentation can be found here.

How to make a variation of a CSS style

I still new to CSS, and I was wondering if anyone here could point me in the right direction in regard to variations of styles.

If, for instance, I wanted to make a variation of the following style with a letter-spacing of 0.2em, how should I do that, and what should I put in the html tag?

p.text {
    font-size: 0.75em;
    text-align: left;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    font-family: sans-serif;
}

What I’ve done so far is make a new style based on the existing style, but I assume there’s a way of just varying the existing style.

Tags:

2

Answers


  1. 0

    Your HTML elements can have multiple classes, which can override styles. For example:

    p.text {
  font-size: 0.75em;
  text-align: left;
  line-height: 1.8em;
  letter-spacing: 0.1em;
  font-family: sans-serif;
}

p.text2 {
  letter-spacing: 0.2em;
}
    <p>This paragraph has no style rules applied.</p>
<p class="text">This paragraph has the "text" style rules applied.</p>
<p class="text text2">This paragraph has the "text" and "text2" style rules applied.</p>

    It’s common to make use of different classes, different specificity, or even just the order of rules applied to over-ride styles. In your browser’s development tools, take a look at the DOM Explorer and select an element (at least in Chrome), and you can see the multiple "layers" of CSS rules applied and which ones override others.

    Login or Signup to reply.
  2. 0

    You can define a new class with only the properties you wish to change. Apply this new class alongside the original class directly in your HTML element.

    CSS:

    p.text {
    font-size: 0.75em;
    text-align: left;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    font-family: sans-serif;
}

.text-spacing {
    letter-spacing: 0.2em;
}

    HTML with no spacing:

    <p class="text">This is some paragraph text with no letter-spacing.</p>

    HTML with spacing:

    <p class="text text-spacing">This is some paragraph text with increased letter-spacing.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search