Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a page in which many elements of the same class are to the left, some in the center and some to the right, I also have many elements that sometimes are display:inline and sometimes display:block.
I ran a CSS validator that told me to put it into the stylesheet, but I don't feel like creating class1 left, class1 center, class1 right, class1 inline,...
Can I have something in my stylesheet so that I can do this
<div class="class1 left inline"></div>
Instead of this
<div class="class1" align="left" display="inline"></div>
Keep in mind that I have almost zero experience in CSS
Create your html structure like this u want to use.
<div class="class1 left inline"></div>
And in Css file create classes for the same like following:
left{
float:left;
}
right{
float:right;
}
inline{
display:inline;
}
class1{
/*all your style elements*/
}
Read these for more information:
https://css-tricks.com/all-about-floats/
https://css-tricks.com/centering-css-complete-guide/
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm not sure how to affect only one <p when trying to customize the color or font. For example if I write
p {
Color: red;
}
It'll affect every <p in the code. What if I only want to affect one set of <p and not the rest. How do I specify to the code that I only want that one certain pair to be affected.
You can define an ID or class in your HTML code.
#test {
color: red;
}
.example {
color: green;
}
<p id="test">Hello World</p>
<p class="example">Hello World</p>
You can use selectors: https://www.w3schools.com/cssref/css_selectors.asp
Small example: https://codesandbox.io/s/vibrant-keldysh-o5wek?file=/index.html
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Was getting into CSS and web development and I have seen some sites that have example a submit button or just an input where when the mouse/ cursor goes over the top of the element it would change the element,
To explain a bit better, the submit button might be red and black text, and if you hover over the submit button it would go black and change to red text,
I just wanted to know how that was done cause I would like to put that on my sites, thanks!
I have searched google alot for information on how to do this but I have come up with nothing, best regards,
Jack.
Use the :hover selector. See the following examples, how to do that:
button,
input[type="submit"] {
background-color:#000;
color:#f00;
}
button:hover,
input[type="submit"]:hover {
background-color:#f00;
color:#000;
}
<button>Test</button>
<input type="submit" value="Test"/>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
hello i have two codes to understand the first question is how does the * get rid of my LI list styling when i not told css to do so this is the code that getting rid of the bullet points
*{
margin:0;
padding:0;
box-sizing:border-box;
}
and my second question is about div classes i was clawing though facebook's html makeup looking for ideas and i want to know why facebook use a lot of div classes for css when most the code i looked at could easy have been put in one css class i understand css and code being reusable but most of it was just for one div and not use any where else so why would you use multi css statements for one div is this because of readability or optimization or and i missing something and sorry about my english and punctuation
To get the margin and padding back to the <ul><li> just set it after you used the * see here: http://jsfiddle.net/8mbrn3ra/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul, li {
margin: 10px;
padding: 10px;
}
The other part of your question: I don't know why facebook does the things it does. But one reason could be that you have a div as a wrapper of things. If this div has a class with given styles and you want to use them somewhere else you just need to set the class to the wrapper. Understand what I mean?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm thinking about css refacto in my job, and i'm wondering if it's a good idea (considering best practices) to create css class with only one property.
A simple example, is it usefull to create many classes this way
.center-text {
text-align: center;
}
What's the best between doing this or using small libs like Knacss (if you know it) for example.
BIGGEST PROBLEM WITH CSS CLASSES: THEIR LOCATION INSIDE YOUR FILE / CODE MATTERS!!
lets assume we have this html element:
<div class="test altr">some text</div>
this css file:
.test
{
color: red;
}
.altr
{
color: blue;
}
will result in a blue text (the div has those 2 classes). BUT this file will result with a red color:
.altr
{
color: blue;
}
.test
{
color: red;
}
the order of command in css is determine by the css file (and not the order inside the html class attribute)
not to mention that the physical order between and tags inside your html alo affects the order of commands in css (last command override all previous commands)
so.. whatever you do - please be careful with that
One minor drawback I see is the amount of text in your HTML will increase slightly due to pile up of classes. Not best SEO practices, but it's minor.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to take out text in a div, and replace it.
h2{content:none;}
h2:after{content:'CONTENT';}
I tried using text-indent, display:none, etc. Nothing is working. And no, I don't want to replace it with a picture. Please help, thanks.
You can try something like this:
HTML
<div id="bla">Hello world</div>
CSS
#bla:before {
content: "Goodbye planet";
position:absolute;
background-color:white;
}
Demo: http://jsfiddle.net/FHnks/1/
Note that content added via CSS is not a part of the DOM and will not be accessible via scripts.