I'd like to be be able to link to the rule for the class "button" in multiple sheets and have it defined in one sheet such that I only need to edit it once to edit all my buttons.
Example:
mystyle.css reads:
.button{
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
height: 45px;
width: 140px;
background-color: #9999ff;
text-align: center;
padding-top: 6px;
border-radius: 25px;
}
I want when I create a new page to be able to say something like
.button {
url:("../mystyle.css/.button")
}
This one was down to me not understanding how HTML loads styles.
<html>
<head>
<link rel="stylesheet" type="text/css" href="../mystyle.css">
<link rel="stylesheet" type="text/css" href="./newpage.css">
</head>
Will load all the CSS for the buttons and then if both files define the same element, style according to newpage.css
You can achieve this with the #import at-rule:
#import "buttons.css";
or by using a CSS processor such as SASS to combine the files at build time.
You could also import multiple CSS files into a single HTML document by using multiple <link> elements.
Try to include your base css in your child css sheet like;
#import url("base.css");
Related
I'm relatively new to this but as far as I can tell from my research, this should be working. I'm trying to link a css stylesheet to an .erb file. Here is the code I'm using:
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
I've also tried
href="./css/stylesheet.css"
and
href="css/stylesheet.css"
for reference my erb file and css file both sit in different subdirectorys of the same main directory. Here is the code contained within my stylesheet, just in case this is the problem:
body {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
background-color:powderblue;
}
h1 {
font-family: verdana;
}
h2 {
font-family: sans-serif;
}
With a server.rb like
require 'sinatra'
set :public_folder, __dir__ + '/static'
get '/' do
erb :index
end
A views/index.erb like
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
Hi!
And your stylesheet in static/css/stylesheet.css it should work, the important bit you may be missing is setting the public folder.
index.html file contains this
<link href="style.css" type="text/css" rel="stylesheet"> <link>
<nav class="header">
<img src="/Users/DeMarcus/Desktop/DevProjects/Websites/CodeCademy/p.4 Datsomo/Resources/images/pattern.jpg" alt="">
<h1>Dasmoto's Arts & Crafts</h1>
i Have this link which I'm using to connect my html file to my css file. Its just that when i load my page it appears without any css.
I know I've written my css correctly and used classes to identify my div containers. Can anyone help me with what I'm doing wrong here?
css file contains this
header{
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;`.
}
try this :
<link href="./style.css" type="text/css" rel="stylesheet">
By adding ./ before style.css, you are explicitly telling the browser that your file is in the same folder.
Also, check the case of the css file. I can see that in the img src you have used capital characters and spaces. Try to avoid spaces and capitals in file names as servers are usually case sensitive.
First check if the css is getting loaded.
To check this right click on the page -> view page source. Click the link in the href attribute to see if you get your css file.
If you can see your css file you probably have a syntax error in your css file.
If you can't see your css file, you need to change the link to your css file.
To link to your css file use this syntax:
<link rel="stylesheet" type="text/css" href="style.css">
It also seems you need to change the code in your css file to something like this:
.header {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
Note I added a . before the header, since it is a class.
Another note: you should close your <nav> tag.
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 6 years ago.
Improve this question
Head section
<head>
<meta charset="utf-8">
<title>Kaffehaus Mannfredo | Home</title>
<link rel="shortcut icon" href="../1_pics/favicon.ico" />
<link rel="stylehseet" type="text/css" href="../2_css/general.css">
<link rel="stylesheet" type="text/css" href="../2_css/nav.css">
<link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>
First CSS
ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
font-family: 'Open Sans', sans-serif;
margin:0px;
float: none;
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 15px 17px;
text-decoration: none;}
li a.active {
background-color: #4CAF50;}
li a:hover:not(.active) {
background-color: #555;
color: white;}
.navbar-nav {
width: 100%;
text-align: center; }
Second CSS
body {background-color: black;}
I am trying to add 2 CSS files in 1 html. The second one is not working.
In the first one I format my navbar, in the second I want to make a basic layout for the whole page, any tips?
This line is invalid
<link href='fonts.googleapis.com/css?family=Open+Sans' ; rel='stylesheet' type='text/css'>
Remove the semi colon
<link href='fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Semi colons are used for property value pairs not for use randomly inside of a <link> tag.
Please provide your code.
If I understand correctly one CSS is working and the other is not so probably there is an error in your syntax.
Check that you have the correct path for the CSS files and the correct names. If you copied and pasted it be sure that you changed the name of the second.
Bellow is an example of two different CSS files named 1 and 2 that are inside a folder named css.
<link rel="stylesheet" type="text/css" href = "css/1.css" />
<link rel="stylesheet" type="text/css" href = "css/2.css" />
If your files are not in a folder just remove the "css/" part.
Are you sure all of your files are loading?
Press F12 and check the console,
It will give
uncaught error failed to load
or something similar
You can add as many css as you want.
Either from external files with :
<link rel="stylesheet" type="text/css" href="PATH_TO_YOUR_FILE">
Or inside your html file with :
<style>
/* ...Some css...*/
</style>
If there are conflicts between the two css (styling the same element), you need to add specificity because the second one is overriding the first one.
For example :
/* first css file */
h1{
color:blue;
}
/* second css file */
h1{
color:red;
}
In this case, h1 will be red everywhere.
So In the first css file you have to be more specific by adding a class, or id to the selector :
/* first css file */
.navbar h1{
color:blue;
}
Take a look at CSS Specificity
My custom main.css can't change the font size or the location where's the text located at, but when I delete the bootstrap assigning line, it works.
I assume the bootstrap.css has already set the appearance of those attributes I want to change, so they take to effect from my main.css unless I delete the
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Here's how my head section looks like, I have read that I have to assign my custom main.css after bootstrap, here it is`
<title>For Testing Purposes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
Here is the HTML code of attributes I want to change`
<h1>Space</h1>
<section class="parallax">
<div class="parallax-inner">
<h2>Space</h2>
</div>
</section>
<h1>Space</h1>
And here is my main.css, which takes effect only when the bootstrap line is deleted.
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
background-size: 100% 100%;
}
.parallax-inner {
padding-top: 10%;
padding-bottom: 10%;
text-align: center;
font-size: 575%;
}
.h1 {
font-size: 575%;
}
I have tried !importnant tags too.
I am not a bootstrap expert, but .parallax and .parallax-inner sound as if these classes would be used for parallax effects in Bootstrap. So they are probably altered dynamically by a javascript, which also affects your own classes with the same name.
If possible, just rename your own classes and CSS rules. You can also add own classes as a second class to an element, like <div class="parallax my_class">...
To override a pre existing style use !important after your CSS rule. For example.
h4 {
font-size: 14px !important
}
The above rule will override any other font size assignment for h4
You have to be more specific if you want to bypass conflicts with bootstrap styles.For example, you could target .parallax div with its parent element.
In CSS, a period . denotes a class. If you want to work with the tags alone, simply put 'h1' instead of '.h1' in your css stylesheet.
.parallax {
background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
background-size: 100% 100%;
}
.parallax-inner {
padding-top: 10%;
padding-bottom: 10%;
text-align: center;
font-size: 575%;
}
.h1 {
font-size: 575%;
}
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes.
I have created a test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
File: /css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* #import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
and now the file: /css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Problem:
When I use the above code, the site_header div does not have any formatting/background.
When I remove the link line from the HTML doc for site_header.css and instead use an #import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div.
Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...
So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.
The #import directive has to come first in your CSS. As soon as one style is hit by the browser, all other import lines will be ignored.
To quote WC3:
"any #import rules must precede all
other rules (except the #charset rule,
if present)"
See http://www.w3.org/TR/CSS2/cascade.html#at-import
One thing to consider, is that each #import still causes an HTTP request, so it's not any more efficient than using multiple link tags. In fact it may be less efficient as imports may be sequential rather than parallel requests. See this article. IMO it also adds complexity because you end up managing CSS references in two places (head tag of markup plus 1 or more CSS files) vs a simple list of link tags.
I'd also recommend where you can combining CSS files when your site is in production as it will reduce HTTP overhead.
Can I just say, pet peeve here, but place images related to the CSS file in the CSS folder itself, not in /images/.
The point of CSS is the separation of style and content, and only content images should go in /images/. Any images called by the CSS should be placed in the same directory and called pathlessly, e.g.:
body {
background: url(wallpaper.png) repeat;
}
That way at a later date if it comes to changing the style, or making multiple styles it's just a case of updating one link and moving one folder (/css/) rather than having a mess of images scattered all over the filesystem. Plus it's always a bad idea to use absolute paths to files (such as /images/wallpaper.png).
First of all, you have invalid markup. The link tag must be closed...
<link rel="stylesheet" href="/css/main.css" />
Second, why don't you use double-quotes consistently for element attributes (here in the link tag you happen to use single-quote)? This is not part of the problem, but I find it daunting that you would intermingle various syntax conventions like this.
Lastly, I would not recommend using #import because it does not offer a compelling benefit. It must be the first thing in the CSS file. An additional HTTP request still has to be made for each of the additional CSS file(s). And on top of that, IE cokes when you to specify a target media for imports. I stick to the good old classic link tag because it just works (given that you have valid markup!).
Use firebug to inspect the div and see what styles are being applied to it, you might get some more insight.
use #import rule into your main.css file like:
#import url("css/site_header.css");(this code should be on top of your main.css)
the above import snippet will bind your multiple css files into single css
then that main.css file use into your HTML.
For any issues with CSS like this I would recommend using firebug. You will be able to see if your site_header.css is loading properly.
If it is loading you will be able to see which styles are being applied to which elements, perhaps some are being overwritten?