This question already has answers here:
What's so bad about in-line CSS?
(20 answers)
Closed 6 years ago.
I see this happening more and more often.
I was always taught to keep html, css and javascript separate (with html linking to the sources/scripts of course).
I understand sometimes if you're sending an email then using the style attribute in html is sometimes ok and preferred.
However when constructing a website, or application is it considered bad practice to use the style attribute?
<div style="margin: 0 auto; width: 114px; height: 32px; text-align: center; font-family: arial; padding: 25px; border-radius: 50px; line-height: 32px; background: rgb(46, 154, 255);">Hello world</div>
Yes, it is bad practice. Here are a few reasons:
You cannot reuse css code if it is inline (it only applies to the element it is on) so you land up writing extra code that does the same thing (e.g. you have two paragraphs of text that need to be styled the same - if you use the style attritibute you now have to copy and paste the style for each paragraph.)
Your code will be harder/impossible to maintain - imagine if you had to change the font on your page. If it is declared inline like this it means going to each place to find and change the code.
You cannot easily override the CSS styles. Properties that are declared inline have the second highest priority. The only way to override a property declared inline in a CSS stylesheet is by using the !important keyword.
Related
This question already has answers here:
What's the difference between CSS3's :root pseudo class and html?
(4 answers)
Closed last year.
I often see people use this line in CSS at the beginning of the .css code. Can someone explain what is it used for? I know that is used for defining the style of the highest parent, but i dont know what that means.
As you're already aware:
From this page: CSS-Tricks :root selector
The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree.
This page provides syntax as well: developer.mozilla :root{}
Here's an example you can run:
:root {
background-color: cornflowerblue;
padding: 3em;
}
body {
background-color: white;
padding: 1.5em;
}
<p>We can take advantage of being able to apply CSS to the <code><html></code> element to skip the wrapper <code>div</code> and keep our markup clean!</p>
Hello i'm creating a webpage from scratch and I'm running into a problem
I know using the style tag is not very good, but would it be in this case okay to use? or maybe is there a better way of doing it?
let's say I have this CSS
.group-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: rgba(30,30,30);
padding: 15px;
height: 100px;
border: 1px solid rgba(10,136,0, 0.2);
}
and I have
<div class="groupbox"></div>
but now let's say I wanted to make my groupbox bigger for one-time use, is it okay to do?
<div class="groupbox" style="height: 300px;"></div>
or should I just make a whole separate class like a small-groupbox and a big-groupbox with all the same properties, just different heights values? I'm leaning more towards the style attribute. But maybe there is a better way?
I am wondering what the CSS "coding" standard would say about this question. my question is subjective, but I want to know what most others who are more experienced at CSS would do in my situation.
Thanks
It totally depends on ‘your situation’. In particular considering maintainability/readability for future developers. There can be no one right answer. Both methods are allowed by the standard.
The thing to watch if using classes is cascading/specificity which you can be confident are dealt with if using style.
But set against that is the ability in a stylesheet to use class names which have meaning. And there is true separation between styling and semantics, the styling not being ‘buried’ amongst HTML. You can also group settings so the maintainer isn’t hunting through many lines of code to find changes.
You can use both, however, it's always best practice to use external CSS, and class than inline-CSS, however if it's very few line, then it'll not affect the performance much.
As I'm going through a CSS tutorial I noticed the following CSS duplicate selectors:
body {
text-align: center;
}
body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
Is there any benefit to putting some CSS properties in a separate CSS selector? What's the author trying to achieve?
No benefit, aside from personal preference. For example, grouping things together that go together so it's easier to read or update/remove. You may have your default body styles, then some unique styles for body that you added to support a plugin or something, so you might have a separate entry for body for the unique plugin styles that you group with other styles defined for the plugin so it's easier to read/find the styles that pertain to the plugin.
It's also bad practice to write CSS like that. It uses extra space (making your files bigger) and makes cleanup and tracking down style changes more difficult.
The class properties should be consolidated for better maintenance and consistency.
There are no advantages to having multiple CSS blocks like that. It may cause heartache later on if they are in different files because the last property listed will "win".
So if the second body also has text-align property, the second one will "overwrite" the first one.
In any case, if it is the same selector, they should be in the same CSS block.
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 6 years ago.
So i am trying to customize a full dropbox (Country Selector) instead of the regular look, I want to add a diferent design to it.
Regular design
[
The Design I want
The first image is the default version with color adjustments, its the version that is working on the website, I want to make the design look like the 2nd picture i've uploaded.
The second version is what I got on photoshop, how i do customize my <select> to the 2nd picture? here is the code i got on css, I tried to use ::webkit and it didn't work.
CSS
.paistofill option {
background-color:#a5e4c9;
font-weight: normal;
white-space: pre;
min-height: 0.0em;
padding: 0px 0px 0px;
border-radius: 50px;
}
.paistofill select{
background-color: white;
color:#a5e4c9;
border-radius: 50px;
}
The select customization has no effect on the element, what do I need to do?
For this you need to use a plugin (or make it yourself) like https://select2.github.io/. You can't really customise the dropdown of the select reliably in every browser. These plugins usually replace and make div elements of the select (and the dropdown) which acts like the normal select. Then you can easily modify these elements with css.
I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?
I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?
If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:
.content div, .content span, /* ...and so on */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then write all your styles prefixed with that class too, e.g.
.content h1 {
font-size: 3em;
}
If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).
Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)
You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.
Is there any possibility to load your custom css classes? You should load your CSS classes after CMS's CSS classes and override them.