Let say that I have a global css file, global.css :
.my-class {
background-color:red;
}
And I need a specific css file, specific.css, just for a certain html file. And this html file also has class named my-class. In this time, however, I want to make this html's background color as blue. How can I do that in specific.css file?
There are several ways to do this.
Option #1 is to make sure your specific.css file is included after your global one. this will cause the styles to overwrite.
For example:
<link href="global.css" rel="stylesheet" type="text/css" />
<link href="specific.css" rel="stylesheet" type="text/css" />
Option #2 is to leverage CSS specificity.
See here for more info on that: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Option #3 is to use !important in your style that you want to take precedence.
This isn't highly recommended, but will work if the above two options fail to get you what you need.
If you define the other element's background-color in a CSS file that was loaded AFTER global.css (e.g. load specific.css after global.css in your HTML markup). You can also use the !important tag to overwrite ALL other defined styles, but typically you won't need this. Its called cascading style sheets for a reason.
Related
I have a index.html page and a style.css file.
I have a style class called .slider and a style class called .logo. Should I put both .slider and .logo inside the style.css page or should i put .slider in index.html and .logo inside .css?
im asking this because i dont know if I should put styles only related to one page inside a global style.css or should i just put it inline in the page it applies to?
Typically you embed css that is page specific. Here is how I do my css:
Global css (seperate file(s)):
<link type="text/css" rel="stylesheet" href="css/style.css" media="all" />
NOTE: In today's web world we use a ton of plugins/themes and these plugins/themes tend to roll out newer versions so when you override these plugins/themes make sure you create a css file specific to that theme.
For instance,
Bootstrap 3.1
<link href="/css/bootstrap.3.1.css" rel="stylesheet" type="text/css">
Create this for all your bootstrap overrides so you can use the latest version when it comes out.
<link href="/css/bootstrap.overrides.css" rel="stylesheet" type="text/css">
Page specific css(embedded):
<head>
<!-- last element in head //-->
<style type="text/css">
.pageSpecific
{
color: red;
}
</style>
</head>
When I am in development stages or the html element does not require css classification.
Simple style format (inline):
<th style="min-width: 65px;">Column Header</th>
You may have print specific css as well:
<link href="/css/print.css" rel="stylesheet" type="text/css">
and inside this file wrap your css as such:
#media print{
<!-- print specific css here//-->
}
Keep in mind that you may want to use a css classifcation at a later date when at the time it may seem page specific. Always code for reusability!
Finally:
I like to use css minifier when I put my file(s) into production. I do the same with my javascript files using UglyJs. There is also LESS css that you can use but for now I would stick to these simple conventions or something similar.
Styles can go in one of three places.
Inline on the element itself
In the html page
In a separate file
I would suggest either putting it in a <style> tag in the <head> of your html or putting it in a separate file, either will work just as well. Obviously having the styles in a separate file means you could reuse those styles on another page if needed.
Either way, it won't make a difference. Personally, I like to have all of my CSS in one place, but you can do whatever you want. If you do put all of your CSS in one document, use comments to separate it into groups, so everything will be easy to find.
You should NEVER have inline or on-page CSS. It should all go in the stylesheet (of which you should only have one per media-type) - why? Because stylesheets are cached, and the cache is way better to hold it than the HTML-files (which may also be cached, by all means, but with dynamic content, they often load quite more often than CSS).
Second, it's a nightmare to update and change, if not everything is in one file.
I am doing a project which is building a website for my CS 205 class. I have made it using notepad++ for the html files and notepad for the css files. My site has a home/index.html page as well as 5 other content pages. What I did was created each each page in notepad++, with each page having its own css file.
What I'm having trouble with is it must have 1 css file that maintains a consistent look across your site / or link all pages to the same css external file. I'm not totally sure if those two mean the same thing that's why I list both of them.
I already have a style sheet in each html page that links to its css file. But I must have one css file for the entire site. Could I just copy and past each css file into one without it changing how each page looks? I would really appreciate it if someone could explain how I do this without it messing up the setup I have for each page.
Having all of your styles be consistent across the website is ideal. To achieve this, you have a single stylesheet and link all your pages to it using the <link> tag in the <head>.
It's a good practice to reuse as much CSS as you can, it'll save you time in the future and that's kinda the goal of a stylesheet versus inline styles.
To answer your question, yes you can combine all of our stylesheets together into a single stylesheet provided you do not have any duplicate class names. Notice in my example how I have a .class-for-index that is used in index.html but not in page.html and similarly for .class-for-page.
styles.css (your single stylesheet with all your classes)
body {
background-color: cyan;
}
.class-for-index {
color: red;
}
.class-for-page {
color: blue;
}
index.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-index">
Page 1
</body>
</html>
page.html (link to the single stylesheet)
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body class="class-for-page">
Page 2
</body>
</html>
You've learnt an important lesson of the DRY principle - Don't Repeat Yourself. Maintaining many CSS files creates overhead - how many places do you want to define/change the styling for H1 for example? This is why you've been asked to have a single file.
I'd recommend taking the largest of your css files and making it the master. For each of the other files, add those elements that are missing from the master. It's tedious, but that's the problem you created ;)
You could just copy and paste each file into a single master file and it would work (this is css and the last definition will win), but it's poor practice and you'll just have problems editing it when you have to find the actual definition you are using.
Others have already explained how to link to a single css file from many pages.
I am assuming you aren't using PHP at all.
Maintaining consistent look across all your webpages is quite easy if done correctly.
basically you have two options:
1. Put all CSS blocks into a single file and link it to all pages
For example: add this to all HTML pages, this single style.css file has rules for all the HTML pages as well as the overall layout.
<head>
<link href="style.css" rel="stylesheet">
</head>
This style.css file can get messy and large if you have a lot of HTML pages.
2. Put CSS blocks that are related to overall design in one file; add individual page-specific CSS rules into new files and link these to their respective pages
For example: add this to a login page, the main.css file will give the overall layout like body background-color, font-family, font-size etc. etc. while the login.css is specifically tailored to the login.html page.
<head>
<link href="css/main.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
</head>
I personally prefer the 2nd approach because it's more easy to maintain and I have more control over my CSS without breaking other styles.
However if you decide to follow the 1st technique, it is advisable to separate strictly page specific CSS (styles that are being only used by as single page) by comment lines. This makes the file more readable.
I think a single css file to be created and linked to all pages. You can create multiple css files too but one css file would be easy to maintain and once your index.html loads the css file would get cached in the browser.
Each file within your solution just needs to link to that one unified external stylesheet via a link tag in the head of the document:
<link rel="stylesheet" type="text/css" href="/path-to-mystyle.css">
Google "create external stylesheet" for many resources on this!
You can create a separate CSS file and put all of your "common" CSS into that, call it main.css for example. This is CSS for tags such as p, h1, h2, ul, li etc to set fonts and margins etc across the whole site since these should not really change between different pages.
You can include that file on all of your pages.
Then beneath that file you can include a page specific CSS file with CSS for that page only. That will have CSS which is for the layout of that specific page like background-images etc.
This is creating external css file:
In Index.html:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Other pages,
Page-1.html:
Put the same css file,
<link rel="stylesheet" type="text/css" href="mystyle.css">
Same as put css file for page-2.html and likewise..
Note: Latest of html, no need to put type="text/css" for create external css file.
It isn't fantastic practice to have 1 CSS file for all pages in a site, especially if you are styling selectors like h1, a, p etc... very differently per page.
But allejo has a great, simple approach to it.
Since the project calls for 1, just make sure you don't override the styles of elements on pages you want styled differently. If it means adding some additional divs to encompass tags on multiple pages to not lose points then go for that.
IE:
.about_page h1{
...}
.home_page p{
...}
etc...
After doing a bit of googling I was unable to come up with an answer, so here's my question. Is there a way to specify a specific element trait, such as an id, inwhich an entire style sheet should be applied?
For example if I have a block of html like this
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div id="my_id">
<!-- A bunch of elements here -->
</div>
</body>
</html>
Is there a way to specify that the rules contained in ./style.css should only be applied to matching elements with in #my_id, similar to specifying #my_id before each rule in the style sheet.
I understand specifying #my_id before each rule will achieve this, but am wondering if there is a way to do it without the need to add bloat to the style sheet.
I'm working on a greasemonkey(userscript) script, which creates a 'container' element on a specific page in which it creates and places all other GUI elements required. I don't want my CSS interfering with the CSS on the page(such as accidentally over writing rules that already exist on the page), but don't want to add unnecessary bloat to my style sheet if it can be avoided since all rules are only to be applied to the 'wrapper' element and/or it's children.
To my knowledge this is not possible. As you stated you can prefix the rules with the ID, but this is not what you wanted to do.
I should say however, that you shouldn't have to specify a stylesheet for a single ID, because an ID is supposed to be unique in the context of the page. Furthermore, I find it bad practice to apply the same ID to elements which serve different purposes on different pages, because it can make writing common JavaScript pages quite confusing.
And this is one of the reasons people started to use SASS. In SASS this would be as easy as just nesting all the css classes within the id class like so:
#my_id {
// all styles without editing
// Now all these styles are applied only if they fall
// under the element with id "my_id".
}
EDIT : The other (ugly) option is to use an iframe instead of a div and load your child elements and stylesheet within it so that it is sandboxed as follows.
<html>
<head></head>
<body>
<iframe id="my_id">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<!-- A bunch of elements here -->
</body>
</html>
</iframe>
</body>
</html>
P.S: Don't forget to add the doctype. I have not added it in the example for simplicity.
you can apply style to elements within #my_id using the > selector. example:
#my_id {
/* some style for #my_id */
}
#my_id > p {
/* this will style all p tags within #my_id */
}
I have a small CSS file with contents:
<style type="text/css">
li {
padding: 10px;
font-family: Arial;
}
</style>
Supposed to leave some space between list elements and change the font. Now, If I include this CSS file in the HTML like below:
<link rel="stylesheet" href="./css/lists.css" type="text/css" />
it does not work :(.
However, if I include the actual CSS code inside the html "head" block, it works.
I really prefer sourcing CSS (so different files can share the code). Any idea whats wrong and how to fix?
regards,
JP
You are supposed to omit the
<style type="text/css">
and
</style>
tags from your .css files, as those are tags used only in HTML to denote CSS styles if you're including them in your page <head>. If you include them, the browser will attempt to treat them as CSS code, which it isn't, and that causes your stylesheet to not work.
You shouldn't use script tag in your css files. Just li {..} is enough.
Also, checking path (./css/lists.css) might help. If it has mistake, nothing will be included.
Where are all of the places you can put CSS style information on an HTML page?
I know you can place CSS style info in the head of an HTML page, where else is it valid to put CSS elements?
I would like to place my CSS someplace else on the page due to inheritance, e.g:
<style type="text/css">
...
</style>
You can use
<link rel="stylesheet" type="text/css" href="style.css" />
in the head to link to an external stylesheet.
You can also have inline style attributes, such as
Hello
And you can also set the styles in your scripts, e.g. using jQuery (which can go where ever your script is):
$('textBox').css("font-weight", "bold");
However, it is good practise to try to keep all the style information in one standard spot, i.e. the head of the document - it makes it easier for others to maintain your work for you.
Note that if you really want to override a particular attribute, the best way to do it is to use the !important option, such as
color: red !important;
You can use this with any of the methods listed above, and it will override any later settings that conflict.
You can link external stylesheets in the <head> block. You can use more than one stylesheet, and they are loaded in order (in this example, both screen.css and print.css override some elements of style.css.
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can import it from an external stylesheet in the <head> block:
<style>
#import url(style.css)
</style>
Or import it using another method:
<style type="text/css" media="all">
#import "style.css";
</style>
You can put the CSS in the <head> block:
<style type="text/css">
p {font-face:Arial;}
</style>
You can put the CSS inline into the html:
<ul> <li style="list-style:none">Item 1</li></ul>
You can add the CSS to the DOM via javascript:
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
You can specify it "inline"
<div style="border: 1px solid red" />
Other than that I'm not used to place it anywhere else than separate files / <head>
Off hand:
In other documents. Include CSS files with the LINK element:
<link href="style.css" type="text/css" rel="stylesheet">
Inline with HTML elements:
<h1 style="color: red">Title</h1>
That is usually the only two other places you will put CSS. You can also apply CSS to documents via JavaScript.
As the others have said, non-inline CSS belongs in the head, if you want to write syntactically-correct code. Check the schema if you're not sure.
If you need to generate the CSS during dynamic page creation, you can easily inject it into the DOM, at the bottom of the head, using javascript:
document.getElementsByTags('head')[0].appendChild( -- css here --);
Be forewarned that this will cause your page rendering to slow down and "blink," as the browser must restyle the page when your new CSS is inserted. The same thing will happen if you ignore the schema and place your CSS in the body.
This leads to a poor user experience.
If you're concerned with inheritance in css then you need to remember this general rule.
Inline styles > everything else.
Tag > id
Id > class
Then you have combinations of these rules.
Tag + id (div#main) > id
Parent tag + tag+id > tag+id
Remember these are just general rules but they should take care of 99% of your situations. Placing styles in your scripts are generally a bad idea because it affects perfoance as others have noted and it adds another place for you to update when you need to change the styles.
So, you can specify it inline as an attribute on the element you want to style...
<p style=" font-weight:bold; ">
Or, you could add it in a style block in the page body or header
<style>
p {font-weight:bold;}
</style>
And lastly, you could include it from a linked CSS file by importing...
<style>
#import url(css/bold.css)
</style>
Or by linking it...
<link rel="stylesheet" href="css/bold.css" />
Honestly, linking is, 99.9999% of the time, is the best way to include stylesheets on a page as it neatly separates your CSS from your code, making updates to either much faster.