How do I make a CSS document that anyone can use? - html

In case you don't understand what I mean, how do I create a CSS library that anyone can use? I mean this like, w3.css. You would link it like:
<link href="get code here" rel="stylesheet" type="text/css">
Can someone please help? If it's confusing just tell please!

You have to upload your CSS file on a server. (Use an Apache server e.g)
Example:
Your server's domain is example.com. If you put the CSS file in the folder called 'cssfiles' and call the file itself "free.css", the link for the CSS file which you would use in the 'href=""' part would be http://example.com/cssfiles/free.css.

Have a web server which contains the file. So if your website is http://example.com then on your server have the file at http://example.com/yourfile.css, that way other people could use it in their HTML files by having the following.
<link href="http://example.com/yourfile.css" rel="stylesheet" type="text/css">

Related

How would I go about connecting a css folder to an HTML file?

Alright so this is my first post, and I'm sorry to bother with such a stupid question but I was wondering how would I go about writing a file path to a folder with my css in to and connect it to my HTML folder.
Would it be like ./FOLDER-Name/Style.css
because I have tried that but it hasn't worked. Someone please help, Thank You.
It will be like this
<link href="FOLDER-Name/style.css" rel="stylesheet">
example taken from the docs :
<link href="/media/examples/link-element-example.css" rel="stylesheet">
You just have to replace the href string to whatever path leads to your css file. I recommend using a relative path.

How to link css external file which is stored on Dropbox?

Not possible link an external CSS file stored in Dropbox with HTML.
Tried and follow up all the instructions I could find online.
That I need to left click and press "Copy Dropbox Link" and that should be by href link but Is not working.
The general dropbox link looks like the the code below
(Changed the ?dl=0 to raw=1 and remove www.dropbox with dl. but still with no luck).
<link rel="stylesheet"
href="https://www.dropbox.com/s/xxxxxxxx/xxx.css">
Could you please check and please point out what I am doing wrong
Thanks
To use this URL in your stylesheet you will need to make a small adjustment to the URL by changing the www. in the URL to dl.
This allows Docs to access the source of the file rather than the Dropbox page for the file.
Finally, your code like this:
<link rel="stylesheet" href="https://dl.dropbox.com/s/xxxxxxxx/xxx.css?dl=0">

can you link a css file through html?

I just need some clarification about linking a css file. I am looking at a html widget that has been created by someone and they seem to have a html with a query string to get the required css..
<link href="https://cdnres.willyweather.com.au/widget/cssView.1-12-8.html?id=36723" rel="stylesheet">
And this works if you click on this link
http://cdnres.willyweather.com.au/widget/loadView.html?id=36723
But when i downloaded these files onto my own web server and tried it, it didn't work
http://www.mccdepot.com.au/Test1/loadView.html
but when I update the link styles to a css and updated the file name it worked.
http://www.mccdepot.com.au/Test2/loadView.html
For the query string html do I need to enable something on the server side?
Thanks in advance
i copied that link css add it to your code its coming same as given link i have added the screen shot check it.
try this->
<link rel="stylesheet" type="text/css" href="path of the css file"/>
This is how normally we include a css file in our html page. If still getting error, please check the file path properly.
your linked css file is minified, check it once. When you minify some
css files actually it replaces some variables. Try again to download
again and link it. And js files also not included properly, when it
check it in viewsource file was not found there

CSS file doesn't load, trying to test an app on Google App Engine locally

I am very new to CSS.
I am putting the following line in the header of my html, but CSS doesn't load:
<link type="text/css" rel="stylesheet" href="static/main.css" />
Basically my HTML doesn't see the CSS file. I am probably missing a very obvious point. My CSS file is in the "static" folder of my project and my HTML file is in the "templates" folder.
While writing this, I realized that I might be directing to the wrong path, but changing it to "../static/main.css" didn't help either.
Should I use SRC instead of HREF, when using this locally? Or is it something completely different?
Thank you for your help!
UPDATED:
The project tree is as follows:
|____.gitignore
|____app.yaml
|____appblog.py
|____appblog.pyc
|____README.md
|____static
| |____main.css
|____templates
| |____front.html
| |____newpost.html
I am linking to main.css from inside my front.html
You are giving the wrong route to the CSS file. It is currently looking for the file in templates/static/main.css, which doesn't exist. You need to add ../ to back out of the templates directory, and then head to the static directory.
Example:
<link rel="stylesheet" type="text/css" href="../static/main.css">
If the directory structure is in your root directory, you could also link relative to root by adding /. This will start in the root directory, and then look for the static directory.
Example:
<link rel="stylesheet" type="text/css" href="/static/main.css">
Also, make sure you are adding that in the head of the document.
The answer was somewhere else:
I am using Google App Engine for the app development and I should've included the following under -handlers:
- url: /static
static_dir: static
Thank you for all your helps.
Chrome browser: Open developer tool (F12) and look at right top of the panel, or click "Console" tab, if the develper tool console return Not found error with your main.css file then check your css path. You can try to locate html file and css file in one directory and then change link tag to
Can you show me how did you open the html file? direct click on the html or browse through webserver project?

Stylesheet link failure HTML/CSS

I've been working on a project with a HTML and an external CSS file. The link worked fine at school when i was doing it on adobe dreamweaver on a mac, but i sent both files home via dropbox, and the css doesnt seem to link with the html file. I believe i've got the file paths and everything right, but just to make sure:
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
i also tried removing the "Desktop/" bit from the file directory, but it still didnt work. My Index file and Css file are both on my desktop. I am using windows. The same code worked at school, so i believe it might be something to do with with file location.
please help
Thanks in advance
This is how linking works,
Let's say your html file is in a folder named "xyz". Now when linking to css, the address is related to your html file's location. So if you mentioned
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
it would assume the css file is in the same folder as your html, while if you linked it as
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
it would assume there is a folder named Desktop inside the folder xyz, and your css file is probably stored in Desktop.
Now im assuming you've simply placed both your html and css on your desktop directly, this is not good practice as you're probably going to move these files back to school as well. Hence I'd recommend you to place both in a folder and then link to your css with
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
and dont forget to pay attention to capitalization, yes html is non case sensitive but when it comes to linking external files, capitalization does matter.
Your directory structure should look as follows:
Root Directory
|
|-page.html
|-Desktop
|-StyleSheet.css
If it does not you need to modify your directory structure or change the href attribute on the link tag
If it is in the same directory simply set the path to href="Stylesheet.css"
The problem is with your file location .
If you are using Dreamweaver or any other code editor, simply browse to the path of the file to insert it in link href attribute, rather than manually entering the path .