Jump to content
kenryan

css references in w3schools template

Recommended Posts

I am building a website using the following responsive web design template from w3schools (thanks!):

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_webpage&stacked=h

The html references four css files:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

I think I can just copy the first css files (w3.css and w3-theme-black.css) to my server, but the last two css files (googleapis and font-awesome) have me a little confused. Should I just leave the css links as they are (to googleapis.com and cloudflare.com) or is there a way to put them on my server, like the css files from w3?

I believe the css from googleapis.com is just for providing a specific font, right? Is it common nowadays to use online fonts from google? It looks like the css from font-awesome only provides a single icon, the three bars for navigation on small screens. Am I correct about that? Does using css from outside domains slow down my site enough to matter?

Thanks in advance,

Ken

Share this post


Link to post
Share on other sites

The googleapis refers to css file that has url links to several font files on its server, so you would have to make sure you have all theses identical filesĀ  and make sure the urls refer to these files new locations on your server. The awesome uses css to display hundreds of encoded icons, not just the one for mobile hamburger icon. Any classes using prefix 'fa-' uses font-awesome to produce that button icon, arrow etc.

Both these files are small text based files, and should not be a drain on bandwidth.

Share this post


Link to post
Share on other sites

Thanks for that. So it looks like it is possible to put all the google files on my server if I want to.

Do I want to? Is acceptable to leaveĀ the link pointing to the google hosted style sheet, rather than putting the files on my server?

Regarding the awesome, is it also possible to get all the files on my server? Again, do I want to do that, or should I just leave the css link to the awesome hosted style sheet?

Share this post


Link to post
Share on other sites

Okay, I will leave the following two links as they appear on the w3 template code:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Thanks for the great templates and great support.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×