changing the color of a part of text in stylus css?

css stylus
unknown picture unknown · Jul 11, 2012 · Viewed 17.7k times · Source

i want to change the color of only one word in string of text using stylus i.e.

#copy
   h1 Our new site will be ready soon..

the stylus code is

  h1
   font-weight bold
   color white

i just want to change the color of the first letter in the h1 phrase "Our" into yellow how could i achieve that in stylus, thanks :)

Answer

Nik picture Nik · Jul 11, 2012

The css selector "first-letter" selector is a good option.

If you want to change other letters or parts of text as per your example, use a span with its own style, e.g.

<h1><span style="color:yellow">O</span>ur <span style="color:blue">new</span> website</h1>

Related questions

How to use a Stylus variable in calc?

In Stylus, how do I use a variable in a calc expression? For example, the following doesn't work (arrow-size being a variable): arrow-size = 5px left calc(50% - arrow-size)

Read More
Setting up auto compile for Stylus

I have installed node.js/stylus/nib on my mac and I can manually compile .styl file to .css on the command line. I also know there is this stylus.middleware() things that keeps coming up when I search for …

Read More
Vuetify icon size

recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this: https://github.com/vuetifyjs/vuetify/issues/299 Which as its says, I added the following code: <…

Read More