I am building a asp.net application which has a bunch of forms.
I don't want to use table for designing Form, as it doesn't seem to be flexible to me.
Instead, I am using CSS styles. But, each css class for each web control is too much.
Can I use inline style for each control ?
I believe use css classes for your website.its take too much time to use your inline css on all pages.and its very time consuming process
You can use inline formatting. However there is no many difference in amount of inline or external styles where placing styles in a CSS file will make it more standard for further edits.
Related
I'm new to web design and I'm realizing that it's possible to use the html just for the page structure and the css for the page design. Is it ok to use inline commands like style="display: block" or style="background-image: url(image.com), in the html file? Or is it considered a bad practice?
Using CSS within a <style> tag or importing in from a .css file provides all of your selectors with a specificity range that will be overridden by any CSS provided through the style attribute.
As a general rule you want to try to keep as much CSS as possible within your .css files or <style> tags.
I try to keep over 90% of all CSS in files and I only put css into the style attribute when I am changing specific values that are difficult to code in a CSS file. Like rotation angle, top and left positions of things that are drug around the screen, etc.
It's best to insert css in the css file, because as a developer, you'll have a lot of code in your html file and if you add inline css then it could get messy. Adding css in the css file is easier to read and easier to edit.
Keeping all your css inside a .css file will give you much cleaner html file and enable you to make changes to your styling much easier as everything is in one place.
There will be times where it is much easier to add an inline style attribute to an element but even this can be avoided with couple extra lines of code on the css side to make your html look as clean as possible.
I think that anyway that helps you achieve your style goal is ok to use as long as it works for you.
That said, I usually try to keep all the styles that affect the site in general in a .css file and link it in globally to the site pages.
In some cases, there may be a page or two that need styles that are not needed by the rest of the site, therefore I add the <style> tag with the style rules in those few pages.
When an inline element in the html needs a special distinction using a style not defined in the locations mentioned above, I added it there inline with the style attribute. In these cases I have to make a note that, those elements will not change when the other css changes throughout the site.
Of course there are other things like the !important directive, etc, that can affect or override the inline style.
As mention by others in this post, there are other considerations to take into account, on where to place your css for individual reasons deemed by the designer.
Been trying to find a good inline tool and http://premailer.dialect.ca/ is the best I’ve found, but I believe it may not support styling (not certain). It could also be an issue with the pseudo classes “first-child”, “nth-child”, etc.
It may also have something to do with the table style “table-layout” however I do not know how to get around this. I’ve tried all the values found on MDN, but my styles are still not showing up when converted.
Been working at this for a while with little progress. I could always go back and change my CSS to not use pseudo classes, but hoping there’s another option. Let me know if there are any better tools out there for converting to inline CSS.
Using SCSS and importing all scss files into a single all.scss file.
References:
What tools to automatically inline CSS style to create email HTML code?
styling tr or td in emails?
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Closing off this question as it seems it is not the appropriate area to discuss email inlining tools.
I have a bunch of css classes with respective css properties which I am using for my web page. My question is, can I change the css properties of those classes as those classes are being used in other web forms as well?Does it affect all the other forms if I change any css proeprty in any of the css class?
Thanks!
Changing the css in an external css file will most likely change the forms on the other pages, too, provided they are linked to that css file and are using that same class to get their stylings.
That’s sort of the idea behind it, where normally people want to make changes “across the board” by changing the CSS sheet only. I wasn’t sure from your comment if this was desirable or not in your case.
Did you want to change just one form, without affecting the others?
What would be some good reasons to have to use inline style as oppose to an external css file or css code in the header?
One good reason to use inline styles is if you're using it for HTML emails. For every other opportunity, I think it would be best to use external styles with meaningful classes/ids and inheritance.
Not all styles can be reused; some will be used by a single element in the HTML, so having a class for that may be an overkill and even increase the overall size of the file.
Using inline style can actually make HTML more readable and maintainable when the style can't be reused for other elements (tags).
You should always try to find a way to avoid inline styles. They are often indicative of poor planning or lazy programming. That being said, they are available. Don't beat yourself up for using the tools that are available to you if a specific need arises.
The only reason I can think of is to make the HTML less readable and the CSS less maintainable. Not all styles can be reused; some will be used by a single element in the HTML, and having a class for that may seem like overkill and can slightly increase the overall size of the file - but having two different places where you have to edit the CSS makes things as a whole harder to maintain. This difficulty increases exponentially as you add more and more inline styles.
Moreover, while making changes, finding and navigating to the right HTML file to modify the inline CSS when you make a change to something else in your stylesheet can be a hassle and increases the effort of applying those changes. That's the definition of poor maintainability.
I have been tasked with making some updates to an existing web control and placing it on an existing web page. The web control uses a lot of hard coded formatting to make it look "pretty", and the web page uses CSS to override just about every visual element you could imaging. So when the control is placed on the page it looks REALLY bad. Its basically unusable and I'm not sure what the best approach is to fix it.
Is there a way to clear CSS from, for example, all elements which are part of a specified DIV, or some way to prevent the main css from being applied to these components?
You could try a CSS reset stylesheet (just add the class yui3-cssreset to your element).
The only problem, though, is that it only normalizes little nuances between browsers, and isn't made for completely killing all stylesheets.
You could, however, edit in code to reset the background, font, border, etc.
You can use the not pseudo selector like:
:not(#idname) {
Properties... }
But that won't work everywhere without a JS shim.