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.
I am using Twitter Bootstrap via cdn and I need to change a little bit the column height of a table but I am not sure how to do it. I am using cdn so I don't have the downloaded bootstrap.css file. I tried to overwrite the class table-striped and change it's default styling but no luck.
Is it possible to do it with cdn?
Thanks.
You, obviously, can't change the existing CSS file.
You need to load another CSS file and write a new rule-set to replace the rules in the existing one.
The trickiest part of this will be making sure that the selector you use is specific enough so that it overwrites the earlier rules.
You can file the exact selector used to apply the rules you want to change using the Inspector built into the developer tools in your browser. Inspect the element and look at the styles.
You can copy/paste the selector directly. That way your selector will be equally specific and, because your stylesheet is loaded after the Bootstrap one, will replace any rules that set the same property.
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.
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.
As someone who is beginning to make a transition from table based design to full CSS I'm wondering if using the style attribute to make adjustments to elements is considered "cheating" and if absolutely ALL presentation should be strictly in the style sheet?
See also:
A question of style - approaches to styling and stylesheets
There are cases where you know for sure that all you want to do is tweak the style of this one specific element, and nothing else.
In those cases you can happily use an inline style attribute. But then, at some point in the future, you'll realise that in fact you need to apply the same style to something else, and you'll realise you were wrong.
Been there, done that. 8-)
I feel there's an aspect that has not been touched upon here: the distinction between hand-edited HTML snippets and generated HTML snippets.
For human editing, it's probably better and easier to maintain to have the styles in a file.
However
As soon as you start generating HTML elements, with server-side scripts or with some kind of JavaScript, be sure to make all styles required for basic functionality inline!
For example, you wrote some kind of JavaScript library that generates tooltips. Now, you will inject DIVs into your page, that will need some styles. For example, position: absolute and, initially, display:none. You may be tempted to give these elements the class .popup and require that this class has the correct definitions in some CSS file. After all, styles should be specified in the CSS file, right?
You will make your JavaScript library very annoying to reuse, because you can no longer simply copy and invoke one .js file and be done with it. Instead, you will have to copy the .js file, but also have to make sure that all styles required by the script are defined in your CSS file, and you have to go hunting for those, and make sure their names don't conflict with classes you already have.
For maximum ease of use, just go ahead and set the required styles directly on the element as you create it. For styles that are purely for aesthetical purposes, such as background-color, font-size and such, you can still attach a class, to give the consumer of your script an easy way to change the appearance of your script elements, but don't require it!
You can use the style attribute, but the point of using CSS is that you make a change in a single file, and it affects the entire site. Try to avoid it as much as possible (old habits die hard)
It's not maintainable. All of us have done it. What you're best to do is put every adjustment into a style. Let me teach you something most developers do not know about CSS ... you can use N styles at a time.
For example, imagine you have a great style for colorized divs called someDIVStyle:
.someDIVStlye
{
background-color: yellow;
...
}
You want to use it, but just want to adjust the background-color to blue. Many people would copy/paste it and then make a new style with the change. However, simple create a style like this:
.blueBackground
{
background-color: blue;
}
Apply it as such:
<div class="someDIVStyle blueBackground">...
The style furthest to the right always overrides the properties of the styles preceding it. You can use a number of styles at once to meet your needs.
I agree with some other posters that it is best to keep the style information in the stylesheet. CSS tends to get complicated quickly, and it is nice to have that information in one place (rather than having to jump back and forth from HTML to stylesheet to see what styles are being used).
A little off-topic tip: Pressing F12 in IE8 brings up a great tool that lets you inspect the styles of elements in web pages you're browsing. In Firefox, FireBug does the same thing. Those kinds of tools are lifesavers if you want to know how a style change will affect an element.
It's a very "personal" question, to me the word "ALL" is a very strong word. You should do your best to have most of the styling in your css. but you can use style occetionally if it makes your life easier.
Generally it is best to have styles on the style sheet especially if it will be used multiple times, but using the style attribute is definitely not "cheating". A quick look through the stackoverflow source shows many examples of this.
Yes, it's kind of cheating, but it's up to you if you want to cheat a little. :)
The fundamental idea of having the styles in a style sheet is to separate the content from the layout. If you use the style attribute you are still mixing layout within the content.
However It's not that terrible, as you can quite easily move the style into a class. It's quite handy during development to be able to set a style on a specific element so easily without having to make up a class name and worry how the style will cascade.
I sometimes let the style attribute go through in the production code, if it's something that is specific for just one page, and if it's doubtful that it will be there for long. Occationally just because I am pressed for time, and it can be cleaned up later on...
So, even if you use a style attribute sometimes, you should still have the ambition that all the styles should be in a style sheet. In the long run it makes the code easier to maintain.
As others have said, in general, no.
However, there are cases where it makes perfect sense. For example, today I had to load an random background image into a div, from a directory with an unknown # of files. Basically, the client can drop files into that folder and they'll show up in the random background image rotation.
To me, this was a clear reason to dynamically build up the style tag on the div.
In addition, if you're using, for example, the .net framework with webforms and built-in controls then you'll see inline styles used anyway!
There can be very good reasons to put style information in a specific page.
For example, if you want to have a different header background on every page (travel agencies...), it is far easier to put that style information in that specific element (better, in the head of the document...) than to give that element a different class on every page and define all those classes in an external style-sheet.
The style attribute does have one important use: setting style programmatically. While the DOM includes methods to manipulate style sheets, support for them is still spotty and they're a bit heavyweight for many tasks, such as hiding and showing elements.
Yes, the style attribute is frowned upon in general. Since you're moving to the CSS method from table-based, I'd strongly recommend that you avoid inline styles. As a previous poster pointed out: bad habits are hard to break and getting into the habit of using inline styles for their temporary convenience is a mistake. You might as well go back to using the font tag. There's really no difference.
Having said that, there are occasions where it makes sense to use a simple inline style, but first develop the habit of using stylesheets. Only when you're comfortable with putting everything in a stylesheet should you start looking at shortcuts.
I think that's the general consensus of everyone who posted an answer