Hi all, I have a css style I would like to add to my css style page, however I am unsure how to please in correctly with the sheet itself. It is for making rounded corners. .blue { border:1px solid #4399FC; padding:10px; background:#fff; border-radius:10px; box-shadow: 9px 7px #E9E2E2; } I assume for calling it, it would be <div id="blue"> ??? Many thanks Jason
You may want to spend some time learning some basic HTML and CSS. One place to do so is w3schools.com. For something like this, you would NEVER use it as an id (#). You would always use it as a class (.) as you have it defined. You call it as class="blue". Something else that you need to be aware of is that not all browsers support this or the box-shadow. You need to use the proprietary website rendering engine declarations to support these older browsers. -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 9px 7px #E9E2E2; -moz-box-shadow: 9px 7px #E9E2E2; box-shadow: 9px 7px #E9E2E2;
Thanks for the info Mike. Can I ask though, for placing it in my css style sheet. Do I just add it at the bottom of she sheet. Because I have tried but when calling it, it does not appear.
Placement in the style sheet doesn't make any difference...Keep in mind you mind, you may need to refresh your screen after every update. I personally like to keep my style sheets well organized, especially on the more complex sites...it makes editing so much easier. As an example...my header CSS would be at the top, moving on to navigation, content, footer etc.
Not to start an argument, but actually placement DOES matter in CSS. The acronym itself is Cascading Style Sheet. The reason this is important is because a lower placed style declaration overides a previous one, just as an inline style overrides one on a separate sheet, thus the name cascading. Although there are exceptions such as an !important declaration. This only comes into play, however if there is more than one declaration for a given selector. So if you have .blue { color: blue; } at line 1 and then on line 500 you also have .blue { color: white; }, the <div class="blue">this text is white!</div> (Select the text to see it )
The above post becomes especially important in "Responsive Design" as it is the override placement of declarations that allow it to work. The @media declarations based on screen size are always at the bottom to overide the defaults.
Thanks Mike and Freeze for your help, all now works fab. the only other issue I now have is when I create a second rounded border in my css stlye sheet, one without any shadow and name it .noshadow when I call it to use it <div class"noshadow"> I do not get anything any ideas please ? Thanks Jason
Hi Freeze, Sorry typo I did add it like that <div class="noshadow"> but still nothing any further thoughts ?
It would be pretty hard to assist any further without additional information or at least a link to what you are referring to.
Hi Mike, In my css sheet I would like to add the following style .noshadow { border:1px solid #4399FC; padding:10px; background:#fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } Which I have added below my .blue style above, but when I call it nothing happens I am using the following to call it <div class="noshadow"> ??? Hope that helps Mike. Regards Jason
