Needing help for some homework. I hope someone can help me out as I have tried all combinations with not much success. I've been asked to simplify the following:
border-top: 1px solid #8B8BA2;
border-left: 1px solid #8B8BA2;
border-bottom: 1px solid #8B8BA2;
Anyone have any great ideas. I did try the following but it didn't seem to work:
border: 1px solid none solid solid #8B8BA2;
Hope someone out there can help.
Mari
Specifying the border attribute let's you specify all borders at once. Since three out of four are the same, specify the border for all sides, and then remove the border for the one it doesn't apply to:
border: 1px solid #8B8BA2;
border-right: 0;
As an addition to SeanA's answer (+1), - if this is for homework you might be being asked if you actually know the shorthand border order.. so while the above works too, this might be the answer they're after.
border: 1px solid #8B8BA2;
border-width: 1px 0 1px 1px;
the first declares all borders, the second zero's the "right" border, using the four sided notation.. border (and margins and padding) are written Top - Right - Bottom - Left - TRBL and the word used to remember this is "TRouBLe" or you can just think clockwise :)
Related
I am new to web development and coding. I might need a little help with something I am trying to get a border around each data cell using CSS below is my code.Please help me. For some reason this is not working.
.table-box table td{
background-color: #ccc
border: 2px soild #000
}
.table-box table td{
background-color: #ccc;
border: 2px soild #000
}
You have to end the statement with semicolon for the last one it is optional
property in CSS is a good way to have shadows for dynamic text in HTML. However the browsers (especially safari, firefox) render a quite strong shadow with quite low settings:
text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:0.01em 0.01em 0.01em #000; // some browsers do not even display this
How can I achieve cross browsers-compatible text shadows which are still not as strong as the first two given text shadows, but still displayed? Is there a solution for this problem?
Try using a "weaker" colour:
text-shadow: 1px 1px 2px rgba(0,0,0, 0.25);
Adjust that 0.25 as needed - a value of 0 will be invisible, and 1 will be the same as the #000 you're currently using.
You could try semi-transparent text-shadow:
text-shadow:1px 1px 2px rgba(0,0,0,0.25);
Demo
What is the best CSS practice to achieve a border on all sides of a container, apart from, for example, the bottom?
The border property cannot specify different values for each side.
Option 1: Overwriting Rules
border: 1px solid red;
border-bottom: none;
Seems that an extra computation is needed — similar drawbacks as CSS resets (at least philosophically).
Option 2: Setting Specific Rules
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
Might be more correct (in terms of CSS "semantics")
But if you want to change the border specifics, then it'll require
multiple changes (harder to manage).
Actually it totally depends on you, what is more convenient to you, it also depends on some state like if I want the color of all borders to be same I'll go for 1st but If I think I need to change the colors of each side of the border in near future I'll go with the second 1, but for now, I'll stick to first option
Reasons:
Less CSS to be stated
Specifically it shows that I want border-bottom as none
As you said I don't need to change each and every property: value if I need any changes
If you say proper semantics, proper semantics define very specifically like
border-color: /*Whatever*/;
border-width: /*Whatever*/;
border-style: /*Whatever*/;
Now am sure you don't want to be this specific
If you only want to specify the values once, you can specify the color and width for all, then the style specifically for the sides:
border-color: red;
border-width: 1px;
border-style: solid solid none solid;
Is there a way to set multiple CSS properties to one value?
border-left, border-right: 1px solid #E2E2E2;
The way that you can do with selectors?
.wrapper, .maindiv { ... }
Nope. But for your example, you can do this:
border: solid #E2E2E2;
border-width: 0 1px;
The attributes where there can be separate values for top, right, bottom, and left (eg, border-*, margin, padding) can usually be combined in a single attribute.
Not possible, unless you do:
border: 1px solid #E2E2E2;
..which sets the same border on all sides. If you want to control them individually, you have to write them as separate statements.
Note that in some cases, you can set multiple values for one attribute, but you can not have multiple attributes with one value in one statement.
Not possible with plain css, but you may have a look at scss or less who might have solutions for your problem.
A solution with plain css is the following:
border: 1px solid #E2E2E2;
border-width: 0px 1px;
If you're using sass, try this:
#mixin border($properties , $value){
#each $property in $properties{
border-#{$property}: $value;
}
}
selector{
#include border(left right, 1px solid #E2E2E2);
}
CSS does not allow such control. A workaround is to use larger rule, then restrict it:
border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;
But you end up with more code. Another solution is to use CSS "compiler", like SASS or Less
If the attributes are related, as is the case with border-left and border-right, there usually is a common attribute that allows you to set them:
border: 1px solid #e2e2e2;
On the other side, there are some libraries like Less CSS out there that extend CSS so that you can easily group related properties and attributes.
i used:
border: 1px 1px 1px 1px;
border-style:solid;
but the border line seems to be so thick. i can almost be sure that i have seen thinner border line somewhere. could you make it thinner or did they use images for it?
** Copied from my comment on the question itself **
Actually, I just noticed that you have the border short-hand declaration, which expects several parameters in a precise order. (ie. border: 1px solid black) What you have specified above is invalid. Could that be your problem?
Instead of
border: 1px 1px 1px 1px
try
border-width: 1px
Perhaps a lighter color was used on the border, (silver instead of black) which often gives the illusion of being thinner.
If you mean the borders around the table cells then they will appear thicker because they aren't "collapsable" - you have to write this:
table {
border-collapse: collapse;
}
and it should make the borders on every side of a cell one pixel thick (or thin as you want to call it!) within a table.
You may try consolidating your rules into a single short-hand declaration:
border: 1px solid black;