Im sure this is crazy simple so I apologize for the silly question but I can't get a black vertical line to show up on my site. Here is the code I have:
'''html:
<body>
<img src="icon-01.png" class="logo">
<p class="textlogo">Rob Reyes</p>
<div id="vl"></div>
</body>'''
'''css:
.vl {
margin-left: 100px;
width::10px;
height:100px;
background-color: black;
}'''
stylesheet is linked and all other styling seems to be working. Whats going on here?
There are two colons after the width. There has to be one colon. So you have to remove the extra colon to work it properly.
And you are selecting class instead of id. Check your CSS selector.
Change in your CSS.
#vl {
background: black;
height: 100px;
width: 10px;
margin-left: 100px;
}
Or, change the HTML attribute.
<div class="vl"></div>
This question already has answers here:
Text blended over background color
(1 answer)
Dual-Color Text
(2 answers)
black and white text based on background image with css
(2 answers)
Closed 11 months ago.
So, I was practicing in HTML and CSS as usual and yesterday I started working on a PSD template. It seemed easy for me, but in a few seconds, I bunched in the issue that I am talking about right now.
In general, I want to change the exact part of a text based on its background. I've already tried "mix-blend-mode", but unfortunately, the result wasn't satisfying for me.
Here is what I want.
So, as you can see the text before the center is white-colored, but the text after the center has the same color as the background before the center.
Is there any way to do that using CSS or maybe even Javascript.
You could do something like this:
<style>
.container {
display:block;
position:relative;
width:150px;
height:50px;
text-align: center;
}
.black-half div {
background: #000;
color: #fff;
}
.white-half div {
background: #fff;
color: #000;
width:150px;
}
.white-half {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
}
.black-half {
height: 100%;
position: absolute;
}
</style>
<div class="container">
<div class="black-half">
<div>Split background and text color</div>
</div>
<div class="white-half">
<div>Split background and text color</div>
</div>
</div>
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 4 years ago.
I have a class called .box-159 where the number changes every time the screen is refreshed. Is there a way to define this field (say background-color) in the CSS?
Yes it is possible just by using CSS only.
Option #1 - Match by prefix value
Use CSS Class selector ^="class" which select all elements whose class is prefixed by "box-"
[class^="box-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>
Option #2 - Match by contains at least one value
Use another CSS class selector *="class" (equivalent to CSS attribute selector) which select all elements whose class contains at least one substring "box-".
[class*="box-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>
You can add an additional class, like so, then both those elements will have the class' CSS attributes:
.box-class {
background-color: red;
width: 100px;
height: 100px;
margin-bottom: 20px;
}
<div class="box-class box-4"></div>
<div class="box-class box-159"></div>
This question already has answers here:
What does the CSS rule "clear: both" do?
(5 answers)
Closed 7 years ago.
I was trying to understand CSS clear property. I see that it adds a new line and prevents other elements from overlapping. I have concluded it with my personal observations and some readings.
This was something I fiddled with:
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
clear: left;
}
<h2>Using clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - remove
<mark>clear:left</mark> and see the impact</div>
How can you explain this to non-programmers. Say your wife?
Lets say we have two rows, where each row has 3 chairs.
Now imagine you are sitting on the chair in the middle of first row.
If you say clear:left, that means you're not allowing anybody to sit to your left, likewise, if you say clear:right, you are not allowing anybody to sit to your right.
And if you say clear:both you are not allowing anybody to sit on either side and to choose the next row of chairs!
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Just after some beginner advice please on how to properly arrange some CSS.
I have a basic 3 page website. Each page will all display a footer at the bottom.
The footer will keep the main styles the same across each page (things like width, height etc) but I'd like to change other styles dependant on which page I'm on (background color, font color). I know this can be done, but I'm looking for some tips on the correct syntax to use so don't learn using bad habits, unless of course this is already correct?
What I have in the CSS is:
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
#footer_page1
{
background-color: red;
font-color: white;
}
#footer_page2
{
background-color: blue;
font-color: white;
}
#footer_page3
{
background-color: white;
font-color: black;
}
...and to call it in the HTML I have:
<div class="footer" ID="footer_page1">
Some text here
</div>
Is this OK, or should this be done a better way?
Many thanks.
you should use id #footer and class .page1, .page2, .page3 etc. - it is a better attempt because you still got the same footer (so ID should be the same) and you just want to change something (which can be done using different classes)
EDIT: and a quick tip from me: be carefull of setting width: 100% and border: 1px solid black because border isn't computed in item's width unless you set box-sizing: border-box property
what do I mean is that if you have a 1024px wide screen, your footer with css that you have presented will be 1026px wide with 2px cropped on the right side
When you refer to an id or class in css, you must use the full name of the class or id you are selecting. For example, when you want to refer to a div element that has id="someid" you must write #someid { in your stylesheet to reference this div by id.
Anyway, you're thinking about it right but your syntax is a bit off. Here is what you might be looking for:
/* common footer code goes here */
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
/* code specific for each page goes here */
#page1.footer
{
background-color: red;
font-color: white;
}
#page2.footer
{
background-color: blue;
font-color: white;
}
#page3.footer
{
background-color: white;
font-color: black;
}
Using two selectors in the same line is called selector chaining. In this case, you want to chain an id selector with a class selector.
Edit:
Here is a jsfiddle.
Looking at your code, the obvious "bad habit" one could find is that the ids page1, page2, and page3 are all in the footer div of those pages, which is a bit confusing, as "page" doesn't exactly uniquely define a footer.
Make sure you only use one id of the same name on any page, and if you do use an id, it should describe that element uniquely.
As the others have said, it should be noted that recently it has become good practice to avoid using ids (except for javascript functionality). Using only classes whenever possible is now the standard. It's good to know how to preform selector chaining and of course proper syntax is always important.
It's inadvisable to use IDs in CSS at all although it can be useful sometimes. In fact I would advise against using anything except classes and pseudo-classes and occasionally attribute selectors (although I personally use ID and element selectors all the time mostly out of laziness). The reason for this is so that you only have to work with one level in the cascade which simplifies things quite a lot in your stylesheets, especially if they grow very large.
.footer { /* default styles */ }
.page1 { /* this is already after the .footer ruleset, so it overrides
the earlier rules automatically (by the nature of CSS */ }
.page2 { /* and so on */ }
<div class="footer page1">
Some text here
</div>
You could also add the class to the container of the entire page or something, which may make more sense. That way you can manipulate the header and footer rulesets simultaneously:
.footer {}
.header {}
.page1 .footer {}
.page1 .header {}
You need to select <div class="footer" ID="page1"> by .footer#page1.
I would recommend to use class for page#, because ID should be unique in one page, but ID="page1" might be used frequently.
Finally result can be
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
.footer.page1
{
background-color: red;
font-color: white;
}
.footer.page2
{
background-color: blue;
font-color: white;
}
.footer.page3
{
background-color: white;
font-color: black;
}
with
<div class="footer page1">
Some text here
</div>