I am starting out at writing my own website and following a few tutorials on HTML5 and CSS. I am using netbeans to create and edit my project.
Here is my index.html file
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="newcss" href="newcss.css" type="text/css">
</head>
<body>
<p>This is css</p>
</body>
</html>
Here is my css file, called newcss.css
p {
color: #FFF;
}
I have my css file in the root folder of the webpage, same as the index file. All I am trying to do is change the colour of the text so I can see my style sheet is working. I am sure it is something really simple but can't seem to see it at the moment.
Thanks in advance for any help,
Mash
From the validator (assuming you add an HTML 5 Doctype):
Error Line 7, Column 57: Bad value newcss for attribute rel on element
link: The string newcss is not a registered keyword.
<link rel="newcss" href="newcss.css" type="text/css">
To load a stylesheet you have to use the stylesheet relationship, not the newcss relationship (which doesn't exist).
Fix your rel attribute.
Try the below one
<link rel="stylesheet" href="newcss.css">
Change your rel="stylesheet"
Change link rel:
<link rel="newcss" href="newcss.css" type="text/css">
to:
<link rel="stylesheet" href="newcss.css" type="text/css">
Related
I have modified my datatable to be editable but I ran into a display problem and it looked like below:
I played around in firefox's inspector changing some css settings and fixed the issue so now it looks like this.
What I modified is this block of css it was class="col-sm-12 col-md-12", I modified it so that it's just class="col-sm-12 col-md.
Now how can I make my css changes permanent for this table only? ps, I know the tags say boostrap-4 but I'm actually using boostrap-5. Couldn't find it in the tags.
Try adding an important tag like this to your main css stylesheet to override your bootstrap.
.col-sm-12{width:100%!important;}
In the head section of your html place your custom.css below bootstrap.css to override the styling
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
I'm a newbie to web design and recently got into Bootstrap. I also recently started using Codepen. After working on a project in Codepen I went to copy and paste my code from there into Sublime and for whatever reason it changed some of the stuff on my page i.e. the CSS for my footer and for some of the text.
Now for whatever reason my footer is huge and some of my text is gold. Nowhere in my CSS did I specify gold text. When I move the CSS link in my HTML file below the script tags for Bootstrap my page changes. But regardless of where I put the CSS link or the scripts I still don't get my page displaying the correct way.
Why does the location of my CSS link and my Bootstrap script matter? They are both in the head.
I recently installed Emmet and also recently started toying with Github and pushed the files to Github right before this issue. Not sure if that is relevant.
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<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="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="realsite/styles.css">
<link href='http://fonts.googleapis.com/css?family=Marcellus+SC' rel='stylesheet' type='text/css'>
The CSS specification dictates the following rules when applying css:
!important
Rule origin
Specificity
Order
It sounds like the 4th is where your getting your issue. What this means is if you have the following:
.cssrule {
color: white;
}
.cssrule {
color: gold
}
Then the color will be gold, because it was the last rule specified. Generally, the specificity rule is used to get around this in my experience, so for example:
#ida .cssrule {
color: white;
}
.cssrule {
color: gold
}
in that scenario, a div like this:
<div class="cssrule" id="ida">
would apply the color white.
I am new to CSS and I have just read the topic regarding the hierarchy of the various types of applying a style. More specifically I read that the embedded method overrides the external always but when I run some tests this wasn't always the case.
The declaration of an embedded style and an external is done in the head element of the web page and what I found was that the embedded style overrides the external only if is written after the external.
for example let's say that we have the following code snippet
<head>
<title>Testing CSS Hierarchy</title>
<style type="text/css">p {color:#fff;}</style>
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
</head>
in the above example the external rule overrides the embedded!!!!
Did I understand something wrong or this is normal?
Thnak you in advance.
Try it with the embedded styles after the link to the external file:
<head>
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
<style type="text/css">p {color:#fff;}</style>
</head>
The css that comes after overrides the css that comes before.
The rule is simple in this case the last is the one that is used. Try doing the reverse:
<head>
<title>Testing CSS Hierarchy</title>
<link rel="stylesheet" media="screen" type="text/css" href="css/screen/external.css"/>
<style type="text/css">p {color:#fff;}</style>
</head>
I have written a new website template. All works fine but there is one problem:
IE8 and lower don't load my stylesheet. I have no idea why.
I have tried it on multiple computers to eliminate the possibility of cache-problems or something like that.
The stylesheet is written with SASS (http://sass-lang.com/). But I think, this isn't the problem because I've made some other websites with SASS and everything works fine.
//EDIT:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>***</title>
<link rel="stylesheet" type="text/css" href="/styles/screen.css" />
</head>
<body>
</body>
</html>
You are using <section> elements that are new and IE8 doesn't know about by default. And because it doesn't know about them they are treated sort of like a span except you can't style them either using CSS.
The trick is to create the element before the page is is loaded and the browser can style them. The easiest way is to use something like html5shim. Just make sure to add the following code to your head section as it needs to run before the HTML starts rendering:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Some problem in your path I guess..
Possibility 1 :
<link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen" />
Possibility 2 :
<link rel="stylesheet" type="text/css" href="../styles/screen.css" media="screen" />