hi...m nilesh..
i want ask that...if m using inline css while disigning the website, so is there any problem for website loading or validation or any other problem if i use inline css???

Inline CSS is generally considered bad practice.

The issue with inline CSS is that it quickly becomes unmanagable. You should be looking to separate your styles from your markup and only use inline styles when it's the only solution (dynamic background images, ect. There's a good write-up about this here.

---

When most frontend developers get more familiar with writing CSS, they tend to move to Sass. A common approach when using Sass is to break your stylesheets out into multiple files and include them in one main file. Unlike CSS import, this doesn't have a performance hit.

Here's an example of the structure described on thesassway.com

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

As you can see, everything is broken out and is much more maintainable. Imagine if all of these files were merged together and placed inline. It would be a nightmare.

Sass isn't recommended if you're a beginner to CSS, it certainly adds a layer of complexity on top of standard CSS. If you're not quite ready to use a preprocessor like Sass, just loading the file externally would be a good first step.

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

Just to expand a little on what Jack says regarding bad practice with inline css, yes it is bad practice but occasionally it has to be used say when you want to be able to change a background image from the back-end or something similar, but this is a rare case and should be used only when necessary as like jack said if you start using a load of inline styles things quickly become unmanageable, especially when you consider the high specificity of inline selectors.

 

Sorry jack missread your post, you already touched on this

Edited September 12, 201412 yr by rbrtsmith

There is no problem has been occured.

 

But The problem has been occured when redirecting from your site into mobile version or ipad and laptop.

 

So here you need to create external css file and link to your html file.

we can use to in line function to create a menu list horizontally,

e.g:

<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>

it can occurring any web page.

we can use to in line function to create a menu list horizontally,

e.g:

<p style="background: blue; color: white;">A new background and

font color with inline CSS</p>

it can occurring any web page.

 

Yes but this is a very bad idea, i can't think of any instance where you would want to do this. Even styles put inside style tags are, in most cases considered bad practice, the only use case I have for these is when you might want some styles controlled by the backend, like a background image for example, but the associated styles like background-position background size and anything else should be in an external css file. Inline styles increase specificity and one of the keys to performant css is low specificity selectors. This kind of thing is worse than using ID's

Edited September 23, 201412 yr by rbrtsmith

Using inline css is a very bad practice and a very bad habbit as well. in future if you want to chage the layout or a color if you have used inline css you have to go through whole pages to change the color but if you used external style sheet it will be easy to change the color with a single class.

newbie uestion for inline css (which by the way is itself bad terminology -css standing for cascading style sheets - surely the best name for the bad practise would be inline style rules??) - whilst i agree it is bad practise, and the end goal is to save them in the external sheet. One thing that I find helpful as a new developer is to have them in the same page as i am working on - either inline on the specific element or embedded within style tags in the head of the document. Then I can faff around and alter the look of the element and the specific styling and then when I am happy with the result - remove the styling from the specific page and take it to the external CSS file.

 

is this bad practise? it seems illogical to have to constantly refer to second document during design / modification. But I am only starting out so don't want to develop bad habits.

newbie uestion for inline css (which by the way is itself bad terminology -css standing for cascading style sheets - surely the best name for the bad practise would be inline style rules??) - whilst i agree it is bad practise, and the end goal is to save them in the external sheet. One thing that I find helpful as a new developer is to have them in the same page as i am working on - either inline on the specific element or embedded within style tags in the head of the document. Then I can faff around and alter the look of the element and the specific styling and then when I am happy with the result - remove the styling from the specific page and take it to the external CSS file.

 

is this bad practise? it seems illogical to have to constantly refer to second document during design / modification. But I am only starting out so don't want to develop bad habits.

 

I don't agree, when you're learning you should try to use best practices at all times, the last thing we want is coders who have picked up bad habits, it's not particularly challenging even for a newbie to put css in a seperate file.

It's harder to unlearn a bad habit than it is to just do it right from the off.

newbie uestion for inline css (which by the way is itself bad terminology -css standing for cascading style sheets - surely the best name for the bad practise would be inline style rules??) - whilst i agree it is bad practise, and the end goal is to save them in the external sheet. One thing that I find helpful as a new developer is to have them in the same page as i am working on - either inline on the specific element or embedded within style tags in the head of the document. Then I can faff around and alter the look of the element and the specific styling and then when I am happy with the result - remove the styling from the specific page and take it to the external CSS file.

 

is this bad practise? it seems illogical to have to constantly refer to second document during design / modification. But I am only starting out so don't want to develop bad habits.

It might seem easier but in the end can lead to a lot of problems. If its the working in two documents at the same time is the issue there are numerous coding apps that let you split your view so you can see both your markup and your styles without having to switch back and forth. In other words get it in your workflow now having them separate from the start.

thanks for the advice - will change. I don't want to learn it wrong from the start. Thanks all

In SEO almost not. What counts for a search engine is textual content, it will filter out everything else.

I take for granted CSS comes into play with search engines when they find out whether a portion of text is visible on the page, or hidden for the purposes of SEO. But even there, whether the CSS inline or in a style sheet won't make a difference.

One could disagree that the more CSS and JS a page contains, the less weight do search terms have on that page. But I think that argument is invalid, because any non-content content will simply be ignored altogether.