Questions tagged [css]

CSS (Cascading Style Sheets) is a representation style sheet language used for describing the look and formatting of HTML (HyperText Markup Language), XML (Extensible Markup Language) documents and SVG elements including (but not limited to) colors, layout, fonts, and animations. It also describes how elements should be rendered on screen, on paper, in speech, or on other media.

Filter by
Sorted by
Tagged with
6050 votes
45 answers

How to disable text selection highlighting

For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled Questions, Tags, and Users) or tabs, is there a CSS standard way to disable the ...
user avatar
5046 votes
131 answers

How can I horizontally center an element?

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>
4353 votes
42 answers

Change an HTML input's placeholder color with CSS

Chrome v4 supports the placeholder attribute on input[type=text] elements (others probably do too). However, the following CSS doesn't do anything to the placeholder's value: input[placeholder], [...
4089 votes
33 answers

Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < { property: value; } Obviously there are ...
jcuenod's user avatar
  • 56k
3675 votes
19 answers

Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?
kokos's user avatar
  • 43.1k
3239 votes
22 answers

How do I disable the resizable property of a textarea?

I want to disable the resizable property of a textarea. Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?
user549757's user avatar
3157 votes
20 answers

Is it possible to apply CSS to half of a character?

What I am looking for: A way to style one HALF of a character. (In this case, half the letter being transparent) What I have currently searched for and tried (With no luck): Methods for styling ...
SimplyAzuma's user avatar
  • 25.3k
2885 votes
16 answers

I need an unordered list without any bullets

I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them. Is it possible to have a list without bullets?
praveenjayapal's user avatar
2835 votes
46 answers

How can I transition height: 0; to height: auto; using CSS?

I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, ...
Hailwood's user avatar
  • 89.8k
2734 votes
37 answers

How do I vertically center text with CSS? [duplicate]

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; ...
Irakli Lekishvili's user avatar
2705 votes
42 answers

Make a div fill the height of the remaining screen space

I am working on a web application where I want the content to fill the height of the entire screen. The page has a header, which contains a logo, and account information. This could be an arbitrary ...
Vincent McNabb's user avatar
2654 votes
42 answers

How to make a div 100% height of the browser window

I have a layout with two columns - a left div and a right div. The right div has a grey background-color, and I need it to expand vertically depending on the height of the user's browser window. Right ...
mike's user avatar
  • 26.6k
2602 votes
16 answers

What is the difference between `margin` and `padding` in CSS?

What is the difference between margin and padding in CSS? In what kind of situations: both work. only margin is appropriate. only padding is appropriate.
Alex Angas's user avatar
  • 59.3k
2521 votes
29 answers

How do I reduce the opacity of an element's background using CSS?

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque? I'd like to accomplish this without having the ...
Stijn Sanders's user avatar
2487 votes
44 answers

How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.
user avatar
2445 votes
17 answers

What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? ...
bbonamin's user avatar
  • 30.1k
2334 votes
28 answers

How to change the cursor into a hand when a user hovers over a list item?

I've got a list, and I have a click handler for its items: <ul> <li>foo</li> <li>goo</li> </ul> How can I change the mouse pointer into a hand pointer (like ...
user246114's user avatar
  • 50.3k
2273 votes
14 answers

How can I select an element with multiple classes in jQuery?

I want to select all the elements that have the two classes a and b. <element class="a b"> So, only the elements that have both classes. When I use $(".a, .b") it gives me the union, but I ...
Mladen's user avatar
  • 25.6k
2256 votes
32 answers

Retrieve the position (X,Y) of an HTML element

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript.
user avatar
2239 votes
26 answers

Vertically align text next to an image?

Why won't vertical-align: middle work? And yet, vertical-align: top does work. span{ vertical-align: middle; } <div> <img src="" alt="small img" /> ...
sam's user avatar
  • 23k
2066 votes
33 answers

How to auto-resize an image while maintaining aspect ratio

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: - when an image is inserted onto the ...
001's user avatar
  • 62.9k
2032 votes
17 answers

Click through div to underlying elements

I have a div that has background:transparent, along with border. Underneath this div, I have more elements. Currently, I'm able to click the underlying elements when I click outside of the overlay ...
Ryan's user avatar
  • 21.5k
2017 votes
23 answers

How do CSS triangles work?

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle: #triangle-up { width: 0; height: 0; border-left: 50px solid ...
Stanislav Shabalin's user avatar
1996 votes
42 answers

How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option ...
Thomas's user avatar
  • 20.8k
1926 votes
39 answers

Transitions on the CSS display property

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content. At the moment, it appears that CSS 3 ...
RichardTape's user avatar
  • 20.9k
1878 votes
40 answers

How to align checkboxes and their labels consistently cross-browsers

This is one of the minor CSS problems that plague me constantly. How do folks around Stack Overflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them ...
1844 votes
42 answers

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet ...
Oussama el Bachiri's user avatar
1840 votes
6 answers

Sass Variable in CSS calc() function

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) ...
GJK's user avatar
  • 37k
1798 votes
33 answers

Is there a "previous sibling" selector?

The plus sign selector (+) is for selecting the next adjacent sibling. Is there an equivalent for the previous sibling?
Jourkey's user avatar
  • 33.8k
1754 votes
11 answers

How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: ...
Joey Morani's user avatar
  • 25.5k
1738 votes
41 answers

Font scaling based on size of container

I'm having a hard time getting my head around font scaling. I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels. I was under the ...
Francesca's user avatar
  • 26.9k
1723 votes
37 answers

How to vertically align an image inside a div

How can you align an image inside of a containing div? Example In my example, I need to vertically center the <img> in the <div> with class ="frame": <div class="frame&...
Arnaud Le Blanc's user avatar
1721 votes
30 answers

How Can I add HTML And CSS Into PDF [closed]

I have an HTML (not XHTML) document that renders fine in Firefox 3 and IE 7. It uses fairly basic CSS to style it and renders fine in HTML. I'm now after a way of converting it to PDF. I have tried:...
1647 votes
49 answers

How can I vertically center a div element for all browsers using CSS?

I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support. <body> <...
Burak Erdem's user avatar
  • 19.6k
1629 votes
25 answers

How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in ...
Jitendra Vyas's user avatar
1556 votes
34 answers

How do I vertically align text in a div?

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work. .testimonialText { position: absolute; left: 15px; top: 15px; ...
shinjuo's user avatar
  • 20.5k
1515 votes
37 answers

How can I center an absolutely positioned element in a div?

I want to place a div (with position:absolute;) element in the center of the window. But I'm having problems doing so, because the width is unknown. I tried the following CSS code, but it needs to be ...
Ish's user avatar
  • 28.6k
1443 votes
28 answers

offsetting an html anchor to adjust for fixed header [duplicate]

I am trying to clean up the way my anchors work. I have a header that is fixed to the top of the page, so when you link to an anchor elsewhere in the page, the page jumps so the anchor is at the top ...
Matt Dryden's user avatar
  • 14.5k
1440 votes
40 answers

How do I set distance between flexbox items?

To set the minimal distance between flexbox items I'm using margin: 0 5px on .item and margin: 0 -5px on container. This seems like a hack. Is there another property or method intended to accomplish ...
Sasha Koss's user avatar
  • 15.2k
1429 votes
29 answers

How to align content of a div to the bottom

Say I have the following CSS and HTML code: #header { height: 150px; } <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </div> ...
kristof's user avatar
  • 53k
1425 votes
33 answers

Maintain the aspect ratio of a div with CSS

I want to create a responsive div that can change its width/height as the window's width changes. Are there any CSS rules that would allow the height to change according to the width, while ...
jackb's user avatar
  • 14.3k
1399 votes
20 answers

How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?
Ronald 's user avatar
  • 16.1k
1379 votes
20 answers

What characters can be used for up/down triangle (arrow without stem) for display in HTML?

I'm looking for a HTML or ASCII character which is a triangle pointing up or down so that I can use it as a toggle switch. I found ↑ (&uarr;), and ↓ (&darr;) - but those have a ...
Timj's user avatar
  • 13.9k
1378 votes
21 answers

What is the difference between visibility:hidden and display:none?

The CSS rules visibility:hidden and display:none both result in the element not being visible. Are these synonyms?
Chris Noe's user avatar
  • 36.4k
1333 votes
11 answers

Which characters are valid in CSS class names/selectors?

What characters/symbols are allowed within the CSS class selectors? I know that the following characters are invalid, but what characters are valid? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? &...
Darryl Hein's user avatar
1322 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 ...
Amr Elgarhy's user avatar
  • 66.8k
1313 votes
9 answers

How to overlay one div over another div

I need assistance with overlaying one individual div over another individual div. My code looks like this: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png"...
tonyf's user avatar
  • 34.5k
1298 votes
24 answers

CSS selector for first element with class

I have a bunch of elements with a class name red, but I can't seem to select the first element with the class="red" using the following CSS rule: .home .red:first-child { border: 1px ...
Rajat's user avatar
  • 33k
1275 votes
20 answers

Can I hide the HTML5 number input’s spin box?

Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or JavaScript method to prevent ...
Alan's user avatar
  • 13k
1274 votes
41 answers

How to remove the space between inline/inline-block elements?

There will be a 4 pixel wide space between these span elements: span { display: inline-block; width: 100px; background-color: palevioletred; } <p> <span> Foo </span> &...
Šime Vidas's user avatar

2 3 4 5