Multiple CSS / 1 Site? - Post ID 203546
bough
Registered User
1,718 posts
Is it really possible to link multiple stylesheets through CSS to one website? I've been seeing some websites that look like they were done by WordPress but when viewed they are actually coding multiple stylesheets at one time.. if so , can someone please introduce me to this method? Thanks
david wilson
Ambassador
1,707 posts
You can certainly link multiple css files to a web page, there are two basic methods:
1. link in the html file directly
2. in the css file use an import statement
Now in the first example I have 4 css files linked, one to reset web browsers to a set state so my formatting should display consistently on everyone's browsers, then a css to provide the styling for my site, then a css to provide font and typographic styling, then a css for the menu styling.
Now this is where I get lazy... in my reset.css file, I use the @import statement to load google's reset css code since they are constantly tweaking it, ever time google updates the reset code, my site instantly updates.
check out my site and see the code I used
1. link in the html file directly
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="font/font.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/top-menu.css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="font/font.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/top-menu.css" media="screen">
2. in the css file use an import statement
@import url(http://reset5.googlecode.com/hg/reset.min.css);
Now in the first example I have 4 css files linked, one to reset web browsers to a set state so my formatting should display consistently on everyone's browsers, then a css to provide the styling for my site, then a css to provide font and typographic styling, then a css for the menu styling.
Now this is where I get lazy... in my reset.css file, I use the @import statement to load google's reset css code since they are constantly tweaking it, ever time google updates the reset code, my site instantly updates.
check out my site and see the code I used
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
Inger
Senior Advisor
14,610 posts
Online Now
There is also a way to combine a style sheet for screen and one for print in the same file:
That way there is just one call to the server to do two things.
@media screen {
Here goes all the css for presentation on the screen
}
@media print {
Here goes all the css for the printed version
}
Here goes all the css for presentation on the screen
}
@media print {
Here goes all the css for the printed version
}
That way there is just one call to the server to do two things.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Jo Rice
Senior Advisor
10,951 posts
Do also keep in mind that if you use multiple CSS files that you may come across some nasty overlapping of ID's and Classes so you should make sure that you have them named so they don't clash with eachother. Other than that, yep as everyone says you can use all the CSS files you like. You "should" though, do your best to combine as much as possible into less files as it will then represent less HTTP requests to your site which is good for SEO, page loading and I'm sure many other things.
Eric Rohloff
Senior Advisor
20,265 posts
Online Now
I do it all the time for a lot of my cc hacking so I only have to add the style sheet reference link back to a page that gets over written by the app that I'm working with.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
bough
Registered User
1,718 posts
That is totally awesome guys, I was just asking because a friend of mine had his site done and it looked like the guy linked multiple CSS stylesheets to the page to create a "WordPress" looking site. I am very interested in learning CSS, where should I start? 
Eric Rohloff
Senior Advisor
20,265 posts
Online Now
https://www.google.com/search?q=learn+c … nt=firefox
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Tonethemoan
Registered User
156 posts
Hi Just my penny-woth on this. I'm getting into the "responsive design" thing and have found it relative esay to link 4 style sheets to each HTML page. Typically the <head></head> looks like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, intitial-scale=1.0" />
<title>AJS Web Design?About Us</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screen_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screen_layout_medium.css" />
<!-- [if lt IE9]>
script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
This allows for a range of screen resolutions from mobile, through tablet to desktop.
Like the lady said earlier, you have to pay attention to id and class attributes or all hell breaks loose.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, intitial-scale=1.0" />
<title>AJS Web Design?About Us</title>
<link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
<link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screen_layout_small.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screen_layout_medium.css" />
<!-- [if lt IE9]>
script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
This allows for a range of screen resolutions from mobile, through tablet to desktop.
Like the lady said earlier, you have to pay attention to id and class attributes or all hell breaks loose.
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
