Questions tagged [inline-styles]

An inline style is one that is defined within an element that the style applies to. This is not specific to HTML so please include the appropriate language tag as well.

389 questions
1320
votes
24 answers

How can I write 'a:hover' in inline CSS?

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor. How can I use a:hover in inline CSS inside the HTML style attribute? E.g., you can't reliably use CSS classes in HTML emails.
Amr Elgarhy
  • 66,568
  • 69
  • 184
  • 301
634
votes
20 answers

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return
Have a good and…
eye_mew
  • 8,855
  • 7
  • 30
  • 50
215
votes
20 answers

What's so bad about in-line CSS?

When I see website starter code and examples, the CSS is always in a separate file, named something like "main.css", "default.css", or "Site.css". However, when I'm coding up a page, I'm often tempted to throw the CSS in-line with a DOM element,…
ChessWhiz
  • 4,656
  • 3
  • 26
  • 40
196
votes
10 answers

Using CSS ::before and ::after pseudo-elements with inline CSS?

I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements. If so, how would I implement something like this with inline CSS? td { …
Bah-Bee
  • 1,995
  • 2
  • 13
  • 8
170
votes
4 answers

CSS Pseudo-classes with inline styles

Is it possible to have pseudo-classes using inline styles? Example: Google I know the above HTML won't work but is there something similar that will? P.S. I know I should use…
Web_Designer
  • 72,308
  • 93
  • 206
  • 262
158
votes
4 answers

CSS selector by inline style attribute

Is there a CSS selector to select this element by its inline style attribute value?
...
something like div[cssAttribute=cssValue]
AgelessEssence
  • 6,395
  • 5
  • 33
  • 37
108
votes
9 answers

External CSS vs inline style performance difference?

A friend of mine said that using
instead of compressed css file put as link href at the head section gives some performance boost. Is that true?
George
  • 2,050
  • 6
  • 26
  • 36
45
votes
3 answers

Generating inline font-size style using ReactJS

I am trying to do something like this in ReactJS: var MyReactClass = React.createClass({ render: function() { var myDivText = "Hello!"; var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the…
kat
  • 5,645
  • 4
  • 19
  • 35
43
votes
10 answers

What's the difference between inline styles vs classes?

In my head, I've always known to use classes over inline styles for any project. But are there any effective differences between the two?
Corey Hart
  • 10,316
  • 9
  • 41
  • 47
32
votes
5 answers

jQuery check if element has a specific style property defined inline

I need to check whether an element has a defined css property given to it, but I'm having some trouble using the jQuery.css() function. The property I'm looking for is width. If the element does not have a defined width and I try…
Matthew Grima
  • 1,513
  • 5
  • 25
  • 40
30
votes
3 answers

Manipulating inline style with angular does not work in IE

I wanted to set the position of a div based on the return value of a function in an angular controller The following works fine in FireFox and in chrome but in Internet explorer {{position($index)}}% is interpreted as a literal string value and…
andrew
  • 9,313
  • 7
  • 30
  • 61
30
votes
4 answers

CSS selector for element within element with inline style?

Is there a CSS selector to target elements with inline styles? So can I target the first span but not the 2nd with CSS only? If not, can this be done with jQuery? http://jsfiddle.net/TYCNE/

Evanss
  • 23,390
  • 94
  • 282
  • 505
24
votes
8 answers

How to customise react-bootstrap components?

What is the best way to override css classes/customise react-bootstrap components? - (I have read the docs, and unless I am missing something, this isn't covered). From what I have read, it seems like it's a choice between inline styles (radium) and…
23
votes
3 answers

How to add nth-child() style in inline styling?

How can I add a nth-child(n) declaration while applying inline styles to an element (which, obviously, contains multiple elements). For example, suppose I have a div that contains three p elements. The general stylesheet rules would go like…
Abhimanyu
  • 441
  • 1
  • 4
  • 11
22
votes
4 answers

css pseudo code "li::before" in react inline style

I have a React component called "ExplanationLists", I would like to add dynamic inline style into li html element with css pseudo code li::after, the way I can style the bullet-point with graphic better. For example, li::before { content:…
Chun Pin Chen
  • 433
  • 1
  • 3
  • 11
1
2 3
25 26