Bootstrap/Flatstrap CSS within Arduino Web Server

I have a project in my mind that involves an Arduino running a web server and I don't want the off-the-shelf CSS rules. I've looked into the web server's style rules and they look pretty sparse - just a few lines, and I wanted something more like Bootstrap in that it's a big list of good looking rules and I don't have to write it.

Is there a way to have the HTML pages within the Web Server referencing a CSS file stored on an SD card? What would the code to that look like? Most of the web server stuff that I've seen has the pages stored in flash, but I want it to reference the CSS file on the SD card, so that I'm not sucking up space in flash.

The page that gets served up can not point back to the SD card on the Arduino. That is not a file storage location that the client would know anything about. The page can reference another file; the Arduino can serve that file by reading data from the SD card.

You could inline the CSS in the HTML you send, of course.

Another possibility, if you have access to web space, is to host the stylesheet (the css file) externally and reference it from the HTML you send. You could use all of Bootstrap without a lot of painful code-escaping. Same goes for javascript.

-br

momchenr:
Is there a way to have the HTML pages within the Web Server referencing a CSS file stored on an SD card? What would the code to that look like?

You'd have to generate an HTML page that contained links to the CSS resources, and write your sketch to recognise the HTTP requests to read those resources and read them from the SD card and send them back over HTTP.

Arduino doesn't seem like an ideal platform for a feature-rich website and I suspect you will find it much easier to host your website externally and just use a web service to pull/push data from/to the Arduino as required; let the Arduino just deal with the backend actions and do the presentation stuff elsewhere.

How would I reference an externally-hosted css file, code-wise? Not on an SD card, but on the internet? I'm unsure.

Supposing that you had arranged for the style sheet to be available on the web at http://server.com/style.css, in your generated html output, in the head section, you would include something like this:

	<link rel='stylesheet' href='http://server.com/style.css'>

More here: css import from another server - Stack Overflow

-br

Good to know. Thank you very much, this community is amazing.