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.
806,821
questions
6104
votes
45
answers
2.7m
views
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 ...
anon
5105
votes
128
answers
4.9m
views
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>
4395
votes
42
answers
2.0m
views
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], [...
4227
votes
33
answers
3.6m
views
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 < a.active {
property: value;
}
Obviously there are ...
- 57.7k
3700
votes
19
answers
2.7m
views
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?
- 43.4k
3296
votes
22
answers
1.8m
views
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?
- 33.6k
3182
votes
20
answers
293k
views
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 half ...
- 25.5k
2917
votes
45
answers
1.8m
views
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, ...
- 91.5k
2917
votes
16
answers
2.4m
views
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?
- 38.3k
2776
votes
43
answers
1.9m
views
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 ...
- 34.1k
2770
votes
37
answers
4.3m
views
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;
...
- 33.9k
2674
votes
43
answers
2.8m
views
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 ...
- 26.8k
2624
votes
15
answers
1.0m
views
What is the difference between margin and padding in CSS?
What is the difference between margin and padding in CSS? When should one or the other be used?
- 59.7k
2538
votes
30
answers
1.6m
views
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 ...
- 36.5k
2503
votes
44
answers
1.9m
views
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.
George Snider
2487
votes
16
answers
1.1m
views
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? ...
- 30.5k
2383
votes
28
answers
2.7m
views
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 ...
- 51k
2319
votes
31
answers
2.4m
views
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.
monaung
2284
votes
14
answers
1.1m
views
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 ...
- 25.7k
2259
votes
26
answers
1.6m
views
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="https://via.placeholder.com/30" alt="small img" />
...
- 23.2k
2105
votes
33
answers
3.7m
views
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: stackoverflow.com - when an image is inserted onto the ...
- 64.4k
2084
votes
16
answers
1.1m
views
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 ...
- 22k
2047
votes
43
answers
2.5m
views
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 ...
- 21.3k
2030
votes
23
answers
252k
views
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 ...
- 19.2k
1974
votes
43
answers
2.5m
views
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 ...
- 21.4k
1917
votes
44
answers
2.9m
views
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 ...
- 19.5k
1886
votes
40
answers
1.2m
views
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 ...
1858
votes
33
answers
1.1m
views
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?
- 34.6k
1853
votes
6
answers
702k
views
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)
...
- 37.3k
1814
votes
11
answers
2.9m
views
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:
...
- 26.2k
1803
votes
42
answers
2.2m
views
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 ...
- 27.7k
1737
votes
37
answers
2.1m
views
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&...
- 99.4k
1725
votes
30
answers
959k
views
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:...
1667
votes
50
answers
1.9m
views
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>
<...
- 19.8k
1646
votes
26
answers
2.2m
views
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 ...
- 151k
1585
votes
36
answers
2.4m
views
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;
...
- 20.9k
1566
votes
39
answers
2.0m
views
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 ...
- 29.2k
1522
votes
40
answers
2.6m
views
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 ...
- 16k
1465
votes
28
answers
912k
views
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 ...
- 14.7k
1456
votes
29
answers
2.8m
views
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>
...
- 53.5k
1447
votes
34
answers
874k
views
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 ...
- 14.5k
1420
votes
21
answers
1.1m
views
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?
- 16.3k
1396
votes
20
answers
1.4m
views
What characters can be used for up/down triangle (arrow without stem) for display in HTML? [duplicate]
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 ↑ (↑), and ↓ (↓) - but those have a ...
- 14.1k
1394
votes
21
answers
759k
views
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?
- 36.9k
1359
votes
24
answers
1.7m
views
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 ...
- 68.3k
1350
votes
9
answers
2.7m
views
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"...
- 35.2k
1342
votes
11
answers
469k
views
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?
~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? &...
- 144k
1335
votes
25
answers
1.7m
views
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 ...
- 33.7k
1316
votes
20
answers
901k
views
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 ...
- 13.4k
1291
votes
41
answers
497k
views
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>
&...
- 185k