dannyg Posted November 11, 2015 Share Posted November 11, 2015 Hi all, i am using W.3 CSS to create a responsive website http://www.w3schools.com/w3css/default.asp Because W.3 links to a CSS sheet that W3 created, and the links are all embeeded into the html page, how can i make changes to all my pages without going into each html page and changing it. For example if, down the line, i wanted to change the colour of my nav bar i cant think of any way of doing that without opening each html page and editing it. Currently i am using <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> My site may be 100+ pages I understand that you can download w.3 css , but when i clicked on it iut just looks like this and i dont see how i could make a style sheet out of it that i could make a change to that would apply to all pages Cheers for any help, Dan Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2015 Share Posted November 11, 2015 Create your own css stylesheet name it custom.css, place the link to this stylesheet below link to w3.css, making changes in custom.css that match the same nav selector used in w3.css will override it. 1 Link to comment Share on other sites More sharing options...
dannyg Posted November 11, 2015 Author Share Posted November 11, 2015 Thank you so much for your speedy reply, i didnt know i could do that.I just had a go and it worked for some things e.g. p{colour:blue} turned all the p font blue.However for nav bar, footer etc the custom sheet doesn't currently seem to be compatible with the w.3 css. At first i thought it had no impact when i put footer {background-color:blue} in the custom.css style sheet but when i clcked refresh a few times the page appeared, without any css except the css that i had on the custom sheet, when i clicked refesh again it went back to how it is before (with all the w3.css that is embedded on the html page. Any thoughts? My concern is that custom.css wouldn't know about the W.3 CSS sheets, so cant handle them. Is there a way to link custom.css with w.3 css stylesheets Thanks again, i really appreciate any help Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2015 Share Posted November 11, 2015 You have to clear cache/history, plus you have to remember if you are loading w3.css from w3 website it could take time to load so you may get a flash of old styling appearing, then your custom, so its best to copy w3.css directly to your server and link to that. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2015 Share Posted November 11, 2015 Remember also you possibly have media queries to deal with also which have affect on different screen/ resolution widths. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 11, 2015 Share Posted November 11, 2015 Just one question, you are not placing <style>...</style> tags in stylesheet are you?. Link to comment Share on other sites More sharing options...
dannyg Posted November 15, 2015 Author Share Posted November 15, 2015 Thank you, No , only using {} in custom, does 'placing copy w3.css directly to your server and link to that.' mean donwloading w.3 saving it as a css file, then linking to it like <!DOCTYPE html><html><title>My Web</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/w3.css"> Thank you Link to comment Share on other sites More sharing options...
dsonesuk Posted November 15, 2015 Share Posted November 15, 2015 (edited) Thank you, No , only using {} in custom, does 'placing copy w3.css directly to your server and link to that.' mean donwloading w.3 saving it as a css file, then linking to it like <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/w3.css"> Thank you Yes, and place custom.css below that. Edited November 15, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now