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.
804,837
questions
6086
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
5097
votes
131
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>
4389
votes
43
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], [...
4177
votes
33
answers
3.5m
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 ...
- 57k
3696
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
3270
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.3k
3177
votes
20
answers
292k
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
2909
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.1k
2887
votes
46
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, ...
- 90.8k
2763
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.8k
2753
votes
43
answers
1.8m
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 ...
- 33.9k
2669
votes
43
answers
2.7m
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
2620
votes
14
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
2537
votes
29
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.4k
2501
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
2474
votes
17
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.4k
2371
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 ...
- 50.9k
2307
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
2283
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
2256
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.1k
2098
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 ...
- 64k
2068
votes
17
answers
1.0m
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 ...
- 21.9k
2039
votes
42
answers
2.4m
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.2k
2029
votes
23
answers
250k
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
1959
votes
41
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.2k
1895
votes
43
answers
2.8m
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.3k
1889
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 ...
1849
votes
6
answers
697k
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.2k
1845
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.4k
1793
votes
11
answers
2.8m
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:
...
- 26k
1787
votes
40
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.5k
1732
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.2k
1726
votes
30
answers
958k
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:...
1663
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
1645
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
1578
votes
35
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.8k
1541
votes
39
answers
1.9m
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 ...
- 28.9k
1504
votes
40
answers
2.5m
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 ...
- 15.8k
1461
votes
28
answers
899k
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
1452
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.4k
1444
votes
34
answers
861k
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
1417
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
1393
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
1387
votes
21
answers
754k
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.7k
1348
votes
24
answers
1.6m
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 ...
- 67.8k
1342
votes
11
answers
464k
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
1340
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"...
- 35k
1324
votes
25
answers
1.6m
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.5k
1308
votes
20
answers
886k
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.3k
1288
votes
41
answers
490k
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>
&...
- 184k