I hope all is well.
So, currently I am using a self-made template from dreamweaver (which includes a header and a footer) and I use this template to create new pages from it.
Many tutorials style the body and/or html tags inside the stylesheet, which would be fine if you were only creating one page, however I have multiple pages attached to one stylesheet.
So, by following any of the tutorials mentioned above It would completely change the layout on my other pages since they are all linked to the same stylesheet, is there any way around this?
I hope this makes some sort of sense,
Thanks in advance, Mark.
Assuming I understood your question correctly, you can link the same style sheet to multiple HTML pages. You'd just have to write your CSS accordingly.
Example:
.PG1-BOX,
.PG2-BOX{
}
Furthermore, keeping all your external CSS in one style sheet is better for maintainability and reduces loading times. If you had multiple style sheets, the user has to request them all and then download them all whereas maintaining just one stylesheet would reduce this process.
Related
Is there any way to find which CSS tags and elements are related to the specific HTML page section?
For example: We have a large CSS file but few of elements are related to content in HTML classes, is there any way to find related elements and remove other parts?
How large is the CSS file? I can't think of anything else than splitting it to multiple libraries and then including a library in your page if it's required.
For example, if the page has a slider then it will have a CSS link to slider.css this might not be ideal when you send too many HTTP requests so you might embed the library as internal <style> CSS. I've seen many WordPress theme developers use that technique.
This shouldn't be a problem since minification and Gzipping reduce the filesize drastically and once the file is cached your users wouldn't need to wait extra time to load your next pages.
For Chrome
In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :
For Firefox
You could install one of these add-ons :
CSS Usage for Firebug
Dust-Me Selectors
CSS Usage
Dust-Me Selectors
I don't think there is. It would be really hard to do this, too, because your system could build up a page by including 500 different files of different languages. How could such a program know which of your files is included where and under which conditions?
The thing that I think comes closest would be using your DevTools to see which styles apply to which element and maybe by hand or in an automated way create a list of which CSS rules apply to which end-page (for example which URL endpoint) element. But! Even then it would be hard, because it would be really hard for a program to find out which styles are dynamically added to elements (for example Javascript could add/remove classes when a user performs a certain action).
A Website im working on for several years now gets bigger and bigger.. CSS-Files are not very clear right now..
How am i able to find out which code of my huge css-file is not used on my homepage? So that im able to delete this?
I recently found this:
Removing unused CSS from website code
The Problem is, my page got of course multiple pages. I should know which css code is not used in all of the pages.
Can you check the method given here on using uncss. This parses your site and produces a css with only the used styles.
If you are familiar with node js you can also use "find unused css": https://www.npmjs.com/package/find-unused-css
This scans your html files and find out the unused css selectors. Currently it only supports class and id selectors.
I am building a personal homepage. I have 4 HTML pages and only one CSS sheet linked for all of the pages. That is, inside a single CSS file I have set up layout for all different pages.
[In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.]
Is it a good practice? Or I should create separate CSS for each page?
An example of that what I have done:
page-1.html:
<link rel="stylesheet" type="text/css" href="design.css">
page-2.html:
<link rel="stylesheet" type="text/css" href="design.css">
design.css:
/*
.......
*/
Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.
Have a read through the Scalable and Modular
Architecture for CSS approach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.
Your example shows you using one design.css file for your entire website.
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
You will allow browsers to cache .css files thus resulting in faster loading times;
It will ease the maintenance process.
I would advise you, if you really want to divide .css in separate blocks to use CSS' #import to divide blocks of code f.e form styles and so on.
It's a good practice. As you said that
In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.
So keep just one CSS file. Reasons:
It's easy for browsers to keep the cache
It's better for maintenance, as you have all your design rules in just one place.
As your project is small, the CSS file is not so big at all.
If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Less or Sass. With them you can set your styles in separated files and join all of them before the releasing.
There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.
Single huge .css file vs. multiple smaller specific .css files?
One Stylesheet Per Page!
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
I would recommend you use SCSS or LESS.
These pre-compilers will allow you to use valid CSS if you do not want to use the fancy syntax.
They will allow you to modularise your code and then com
Is there a way to add a Javascript segment to each page in my website via CSS?
I am looking to add some Javascript tracking code (for my own benefit (using Google Analytics)) before the closing </head> tag on every page.
The simple question is: is there a way to add code to the HTML on every page of my website between the <head> and </head> tags using CSS to dynamically insert it (as opposed to going through and updating every page manually)?
Thank you,
Mick
No, CSS is a collection of styles to apply to elements (which can handle alternating states of controls, such as :hover), but isn't functional in the way you desire.
However, it seems to me that, if you can reference a CSS file globally, then you could simply place your Javascript in a separate file and reference that in each of your pages with a <script> tag (similar to how you would do with CSS files.)
Furthermore, if you're using a framework such as ASP.NET, then you can use master pages as templates from which relevant pages derive, reducing redundancy of this sort of thing.
Is there a way to add a Javascript segment to each page in my website via CSS?
No. Use a template language (e.g. TT) or include system (e.g. SSI) if you want common HTML across pages.
Nope, you can't add javascript through css. These are different techniques, one for changing the look of your website (css) and one for adding functionality to it (javascript). There is no way to add javascript through css-code.
As all the other answers stated: No, in general not.
Only MS IE offers such a solution, using the behavior-property.
I currently use this for an hover-anything-script for IE6 (included inside a conditional comment), which allows to add the CSS-:hover-selector to any HTML-element:
body {
behavior: url(/js/csshover.htc); }
The csshover.htc is from Peter Nederlof (LGPL).
See also: MSDN HTC Reference
Others have already noted that it's impossible. It seems that your site is static html only. Then you could write a little script that would prepend a link to javascript file before
Moreover, is there a particular practice/way to have a cascading style sheet automatically call a footer div in every instance when <body> or <html> tags are present.
I think you are looking for a page decoration system. There are several, like jsp-decorator. There's also a pretty extensive discussion about JSP page decoration here on SO.
CSS applies style to page elements, it does not insert stuff into pages...
The SiteMesh tutorial might help to understand what page decoration is about...
Jsp templates can be used.
JSP templates to encapsulate Webpage layout and encourage modular design