Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm creating a website, and the styles change frequently between pages. So what I have is images of pages that have the same header, same footer, and out-of-whack body styles. I started with the header and footer, and used a single css file that is linked in the header.
The problem is, as I do the pages, I have been adding css I need to the css page. I now have 1600 lines of css and I'm not done. I commented everything really well, but I have to use ctrl-f to find the element I need to change.
Now, I could separate them into different files and have a header with 10ish linked style sheets, but I didn't know if this was the "right" thing to do. Am I better off just having one large file? Is there a performance issue with multiple linked css files? Or is inline styling the better answer?
I've always opted for having a single file, but depending on the organization of your CSS, it might be easier to break it into multiple. At the end of the day there is no one right answer. It depends on the circumstances and developer's preference. I would say that whatever you do, make it consistent.
separating the stylesheets is entirely acceptable, and up to you. Anyhow, you can do one stylesheet for the base styles, and one stylesheeet for any custom sections if you want.
You wouldn't want to do one custom stylesheet for header, and one for footer, etc.., i dont think that's a good idea, separate them by content, not by html tags.
if you get a chance, post a site link so we can take a look at the styles.
how you would do this is just include each stylesheet from your main index file, or wherever your loading the files, like this..
<head>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
EDIT:
i should mention, please note, the order you load them in is important if you accidentally, or purposely override any styles.
say for instance you have a body style on the first sheet loaded, theme.css in this case, then if you have a different body style in gallery.css it will override it. so be careful not to do any overrides unless you intend.
Overrides are a great way to have more control also, take for example if you include bootstrap.css first, you include your theme.css after, overriding any bootstrap styles that you want to customize for example. you would leave the styles alone on bootstrap.css never touching them, then put a duplicate style name on your theme.css and change one or more of its properties to override it. This is why its important to load them in order. So pay attention to the order you load them in if you split your stuff up.
Its best to put your primary and most important style sheet first, then your override anything you need on a custom basis after.
Related
This question already has answers here:
Best way to include CSS? Why use #import?
(18 answers)
Closed 5 years ago.
Learning something new about CSS every day and I've come across #import. What the advantages and disadvantages of using it.
I know that you can link all your stylesheets in one stylesheet using #import. Then have that one stylesheet linked to all your HTML documents and not have multiple CSS urls on every HTML document. But what are the advantages or disadvantages using this method?
Under normal circumstances, loading your CSS files using the #import method could significantly increase page load times as the individual files are then referenced one after the other. File B won't load till File A has downloaded. CSS referenced using the <link> tag on the other hand, can be downloaded simultaneously.
While this does seem like an outright disadvantage, using the #import method does lend a pretty outstanding advantage; Organisation.
As your project grows in size and complexity, maintaining your CSS files, however organised and picky you are, can become a chore, to say the least. The #import method helps you break your massive stylesheet into more comprehensible and logical portions.
To illustrate, you would typically reference your CSS file through a single <link> tag like so:
<link href="/styles/main.css" rel="stylesheet" type="text/css">
This stylesheet could then reference several other subsidiary stylesheets,
#import url('/styles/navbar.css')
#import url('/styles/header.css')
#import url('/styles/typography.css')
#import url('/styles/grid.css')
This is just a rudimentary example off the top of my head, but hopefully you can see the potential of much more organised system. This can also make it easier for other team members to better understand where the referenced styles have been declared.
Blockquote Note Just make sure these imports are at the very top of the stylesheet. There shouldn't be any declarations/content before this. This also includes <-- comments -->
There are two ways to include a stylesheet in your web page. You can use the LINK tag:
<link rel='stylesheet' href='a.css'>
Or you can use the #import rule:
<style>
#import url("/styles/default.css");
</style>
I prefer using LINK for simplicity—you have to remember to put #import at the top of the style block or else it won’t work. It turns out that avoiding #import is better for performance, too.
THE DIFFERENCE BETWEEN #IMPORT AND LINK
Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.
Link -
Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your HTML document like this:
<link href="styles.css" rel="stylesheet">
WHY USE LINK?
The number one reason for using linked style sheets is to provide alternate style sheets for your customers. Browsers like Firefox, Safari, and Opera support the rel="alternate stylesheet" attribute and when there is one available will allow viewers to switch between them. You can also use a JavaScript switcher to switch between style sheets in IE. This is most often used with Zoom Layouts for accessibility purposes.
One of the drawbacks to using #import is that if you have a very simple with just the #import rule in it, your pages may display a "flash of unstyled content" (FOUC) as they are loading. This can be jarring to your viewers.
A simple fix to this is to make sure you have at least one additional or element in your .
#import -
Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. If you include an #import in the head of your HTML document, it is written like this:
<style type="text/css">#import url("styles.css");</style>
WHY USE #IMPORT?
Many years ago, the most common reason that was given for using #import instead (or along with) is because older browsers didn't recognize #import, so you could hide styles from them.
By importing your style sheets, you would essentially be making them available to more modern, standards compliant browsers while "hiding" them from the older browser versions.
Another use for the #import method is to use multiple style sheets on a page, while only including a single link in your document's .
From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct and either way will work equally well (in most cases). However, there are a few reasons you might want to use one over the other.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
So i am currently creating a website for a eSports team in wordpress, and i have just ran into a problem, that i do not remember how to sort out. I remember from making chrome extensions there is a method for doing this, but i do not remember, and that is why i am here now :)
First code
As you can see on the picture, that is what is in the CSS, and i need to keep that for other pages, but i want my one page to overwrite that. I have a box where i am allowed to add custom CSS, but when i add the code, it gets overwritten by the old code. I know why this happends, but not how to fix it without changing the original css (which i would prefer to avoid)
Overwritten code
So my question is, how to i make my new css overwrite my old css?
(i have tried !important and it does nothing)
When inspecting what code currently applies on a particular element, Chrome also tells you what specific selector applies that rule and where it's coming from. All you need to do is write a stronger selector and it will apply. In your example, body:not(.template-slider) #Header { } will be overridden by...
body.page:not(.template-slider) #Header {/* CSS here */ }
Ideally, though, it would be best to not have to increase the specificity of current selectors, but apply your rules last, using the same selectors. The easiest way to do that is to add your CSS at the end of your active theme's style.css, unless your theme/WP installation is messed up.
By the way, if you're using a theme you haven't developed yourself, your active theme should be a child theme. This is important, but it's something you should look into separately as per why it's important, what are the benefits and how to do it.
If writing to style.css of your active theme (by far, the recommended WordPress way) is not an option, you can always put all your CSS into a separate stylesheet of your choice (i.e. my-custom-style.css), placed in your active theme's folder, and register it using the following code in functions.php of your active theme:
function add_styles_to_your_active_theme() {
wp_enqueue_style (
'my-custom-style',
get_stylesheet_directory_uri() . '/my-custom-style.css',
array(),
null
);
}
add_action( 'wp_enqueue_scripts', 'add_styles_to_your_active_theme' );
After adding it and making sure it loads, you can modify its position in the <head> tag by specifying other registered stylesheets as dependencies of yours, using the third parameter in the above call to wp_enqueue_style().
You need to place handles of other registered scripts into that array. You can find the handles by looking into the <head> tag of any page, finding the last loaded <link rel="stylesheet" /> tag and removing the ending -css from its id. For example, if your last loaded styleheet's link id is some-theme-style-css, the third parameter of your call to wp_enqueue_style() should be array('some-theme-style').
After that, check the <head> tag again and make sure yours is last. If not, add each <link />'s id to the $deps array, stripping -css, until yours is last. When your stylesheet loads last, you can copy-paste any applying selectors to it, change the rules to whatever you want and they will apply.
But do note that, under normal usage conditions, the method described above is unnecessary. Normally you should use a child theme, put your CSS in its style.css and not have to worry about tricky details like this, reserved for theme and plugin creators.
Yo can overwrite CSS with adding child selectors for your specified DIV element.
Fiddle Example here http://jsfiddle.net/JfGVE/2031/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
This seems like kind of a basic question. What are the reasons one would choose to use a css document instead of altering the style with the style tags in the html document? Is it not possible, for instance, to alter IDs and classes from within the html style tags? Thanks- this is my first stackoverflow question!
There's nothing technically wrong with using the style tag, but most pages have a seperate style sheet file.
Here are some reasons to use a seperate style sheet file:
The page may load faster due to asynchronous loading by the browser.
Seperates your HTML markup from your CSS styles.
Caching.
Easier to maintain because all the CSS is in one place.
You may also want to look into LESS or SASS.
There are several benefits
Reusability. An external site sheet can be used by multiple documents, so you don't have to write a new style sheet for each.
Coherence. With external style sheets you can be sure that the documents have at least the same basic styles and are visually consistent. Embedded style sheets tend to drift away from the standard.
Performance. An external style sheet can be cached by the browser, which means it doesn't have to be transferred every time the client requests a document. An embedded style sheet has to be transferred every time the browser requests a document.
Maintainability. If you have a set of documents that have the same visual appearance, and a change has to be made (changes to the corporate identity for example), if the style sheet is external you have to change it in only one place. Using embedded styles you would have to make the same change in each document.
Check out this LINK
In my own words, using CSS makes thing a lot simpler as adding styles for each tag in HTML is basically just not practical. Hence defining how a particular element will look on the page just once and then reusing the same style multiple times saves a lot of time
CSS files is cacheable by the browser, the style tag in an HTML document just adds an extra file size overhead that needs to be downloaded everytime.
Often when I'm designing a site, I have a need for a specific style to apply to a specific element on a page and I'm absolutely certain it will only ever apply to that element on that page (such as an absolutely positioned button or something). I don't want to resort to inline styles, as I tend to agree with the philosophy that styles be kept separate from markup, so I find myself debating internally where to put the style definition.
I hate to define a specific class or ID in my base css file for a one-time use scenario, and I dread the idea of making page-specific .css files. For the current site I'm working on, I'm considering just putting the style definition at the top of the page in the head element. What would you do?
Look to see if there's a combination of classes which would give you the result that you want. You might also want to consider breaking up the CSS for that one element into a few classes that could be re-used on other elements. This would help minimize the CSS required for your site as a whole.
I would try to avoid page-specific CSS at the top the HTML files since that leaves your CSS fragmented in the event that you want to change the appearance of the site.
For CSS which is really, truely, never to be used on anything else, I would still resort to putting a #id rule in the site-wide CSS.
Since the CSS is linked in from a different file it allows the browsers to cache that file, which reduces your server bandwidth (very) slightly for future loads.
There are four basic cases:
style= attribute. This is the least maintainable but easiest to code. I personally consider use of style= to be a bug.
<style> element at the top of the page. This is slightly better than style= because it keeps the markup clean, however it wastes bandwidth and makes it harder to make sweeping CSS changes, because you can't look at the stylesheet(s) and know what rules exist.
page-specifc css: This lets you have the clean HTML and clean main CSS file. However, it means your client must download lots of little CSS files, which increases bandwidth and page loading latency. It is, however, very easy to maintain.
one big site-wide CSS: The main advantage of one big file is that it's only one thing to download. This is much more efficient in terms of bandwidth and latency.
If you have any server-side programming going on, you might be able to just dynamically combine multiple sheets from #3 to get the effect of #4.
I would recommend one big file, whether you actually maintain it as one file or generate the file through a build process or dynamically on the server. You can specify your selectors using page-specific IDs (always include one, just in case).
As for the answer that was accepted when I wrote this, I disagree with finding a "combination of classes that gives you the result you want". This sounds to me like the classes are identifying a visual style instead of a logical concept. Your classes should be something like "titlebox" and not "red". Then if you need to change the text colour on the user info page, you can say
#userInfoPage .titlebox h1 { color : red; }
Don't start applying classes all over the place because a class currently has a certain appearance that you want. You should put high-level concepts into your page, represented by HTML with classes, and then style those concepts, not the other way around.
I would set an id for a page like
<body id="specific-page"> or <html id="specific-page">
and make use of css override mechanism in the sitewide css file.
I think you should definitely expand the thought process to include some doubt for "page specific css". This should be a very very rare thing to have. I'd say go for the global style sheets anyway, but refactor your css / html in a way that pages don't have to have super-specific styling. And if in the end there's a few lines of page-specific markup in the global css, who cares. It's better to have it in a consistent place anyway.
Defining the style in the consuming page or inlineing your style are two sides of the same coin - in both cases you are using page bandwidth to get the style in there. I don't think one is necessarily better than the other.
I would advocate making an #Selector for it in your site-wide main stylesheet. The pollution is minimal and if you really have that many truly unique cases, you may want to rethink they way you mark-up your sites.
I would put them in a <style /> tag at the top of the page.
It's not worth it to load a page-specific CSS file for one or two specific rules. I would place it in tags in the head of the document. What I usually do is have my site-wide CSS file and then using comments, section it up based on the pages and apply specific rules there.
As you know style-sheet files are static files and cached at client. Also they can be compressed by web server. So putting them in an external file is my choice.
For that situation, I think putting the page-specific style information in the header is probably the best solution. Polluting your site-wide style sheet seems wrong, and I agree with your take on inline styles.
In that case I typically place it at the top of the page. I have a page definition framework in PHP that I use which carries local variables for each page, one of which is page-specific CSS styles.
Put it in the place you would look if you wanted to know where the style was defined.
For me, that's exactly the same place as I would place styles that were used 2 times, 5 times, or 170 times - I see no reason to exclude styles from the main stylesheet(s) based on number of uses.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I have a custom control I built that contains a list of items to be selected.
I was concerned that these items would run together seeing as how there can be many different types of actions in this list.
Create
Edit
View
So I made the ability to separate these into groups by using a horizontal rule.
Someone I work with thinks that horizontal rules are a terrible design choice, and wants me to change it to a stylized DIV. I do not really have an opinion other than they are simple to implement. The HR I implemented is styled nicely and looks good.
Thoughts? Are horizontal rules a good or bad design choice?
Bad, and so is using a div simply for adding a horizontal div. Instead, consider putting the line which looks like horizontal rule as a border to the element you want to divide. This will be semantically correct as you are not affecting the structure of the HTML document you are creating.
This article goes in to depth about how div's can be abused by using them as presentation elements only. While sometimes there is no avoiding it, this is not one of those times.
I tend to agree with altCognito on this point, because they're purely presentational (at least they seem to be in every instance in which I've seen them used so far) they should be applied via the css.
There may well be a :after {content: /* hr */;} option, but, honestly, when there's border-bottom, which visually serves (or at least can serve) the same purpose, why bother with the <hr /> anymore?
They can, of course, be styled if you do decide to go with it, although W3 Schools suggest that all the potential styling options are now deprecated. If this is so, and it can't be 'officially' styled, it'd be best to avoid it, I think. Even if only from a purist mentality to maintain validity of your stylesheets.
The only problem with the HR is that it's always there. I'm assuming your co-worker believes that you might not always want the HR to be displayed, and using the DIV and a css solution let's someone remove or change it in one global css file. (although, the HR could be controlled by css also)
The div+css solution isn't a bad one, but for what you describe, the HR solution isn't bad either. I'd just go with whatever is convenient in this case.