I'm kinda new to HTML, PHP and CSS and I have an issue with my stylesheet not applying some changes.
Here is the part in my HTML where I've got an issue:
<div class="container" id="contact">
Some Random Text
<br/><br/>
More Random Text
</div>
And the corresponding ID in my stylesheet:
#contact{
color:white;
font-size:20px;
font-weight:bold;
}
I am using Bootstrap for the grid and such thing and I've already made sure to call the Bootstrap stylesheet before my own (to not overwrite my own changes).
What I really don't understand is that if I type the following HTML, I got the result I need but not with the previous one:
<div class="container" style="color:white; font-size:20px; font-weight:bold;">
Some Random Text
<br/><br/>
More Random Text
</div>
I hope that my question is clear, and that I haven't made to many English mistakes (not a native speaker).
Maybe you didn't link your css right?
For example, if you have your index.html file and style.css file in one directory, you may write like this:
<link type="text/css" rel="stylesheet" href="style.css">
But if your css file on the folder "css" don't forget to write: href="css/style.css"
After following Ths's answer, I've looked for a solution to this possible caching problem.
And after changing my stylesheet call from:
<link rel="stylesheet" media="all" type="text/css"href="css/style.css" >
to:
<link rel="stylesheet" href="css/style.css" media="all" type="text/css <?php echo date('l jS \of F Y h:i:s A'); ?>">
It seems to now update properly.
Here is a link to the explanation on this CSS-caching problem:
https://css-tricks.com/can-we-prevent-css-caching/
It’s because your rules are on the html tag what has more precedence
You should identify with your developer tools what styles are effectively setting the styles
Style precedence is a bit complex to solve as « you new » but first as your rule is « active » (seem not but but using developer tools to see it will help)
Could also try to be more precise with a « .container#contact » does it work ?
Order of stylesheet processing do not drive precedence logic but in some cases it change the result is « active » styles
F12 and Check styles tab...
Related
[I've tried seemingly everything and nothing is working for this seemingly simple and mundane css and html. I'm using external css as I was told that's easier on a larger scale for later projects but right now I'm just learning basics. Before you ask, yes, they are both in the same folder and using developer tools I can see that it is properly linking, but it appears the browser isn't reading it and it just looks like a text doc. Running the code works perfectly through here so I don't understand what's wrong. I'm using safari on MacBook and have also tried chrome - should I use a different browser or?
Edit: As you can see in the images my user profile includes Null (part of my name) I believe that's what's messing with it, is there a way around that?
h1{
color: red;
}
p{
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>First Coding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>First code</h1>
<p>Welcome to my first set of code!</p>
</header>
<NAV>
<ul>
<li><a href "#">nice</a></li>
<li><a href "#">cool</a></li>
<li><a href "#">rad</a></li>
</ul>
</NAV>
<footer>
<p>Nice amiright?</p>
</footer>
</body>
</html>
There actually 2 ways to achieve that. The first Method has been already stated and that is to link the external CSS inside the head-element of your website:
<link type="text/css" rel="stylesheet" href="url to the external .css" />
The second method however has not been mentioned yet which imo is the better one. Create an own .css file and link your website to it. Then add following line at the very top of your css file. That allows you do overwrite or change specific element of the css that you might cant access on your own:
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
We have two various types of Href
Absolute Path [it's added through an External Link]
Relative Path [it's added through an Internal Link]
The way you wanted to have is definitely the first item of the above-mentioned issues.
It'd be like this:
<link rel="stylesheet" type="text/css" href="http://example.com/[Path]/file.css">
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
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've used inline and imported css loads but having trouble with external and never tried it before.
I copy and pasted everything from this link css link
into a css file, I don't actually know specifically which animations I want to keep and get rid of yet, that will come later.
How do I actually add it into the html though? In the Header I have the
<link rel="stylesheet" type="text/css" href=\animate.css">
link so my html is inked to my css.
If I wanted to add for example .animated.hinge to a <p> how would I do this?
Preferably without any javascript or php, haven't progressed that far yet!
Thanks!
The problem is that you are using a backslash instead of a forward slash and missing a double quote when you are linking to the CSS file.
<link rel="stylesheet" type="text/css" href="/animate.css">
Web sites are all about files. If you have a file called animate.css in the same folder as your index.html, you can simply call it with the next tag
<link rel="stylesheet" type="text/css" href="animate.css">
This means that you are referencing the animate.css file. There you select your objects by clases and just use them in the html file.
Also you would add classes to the p element like so
<p class="animated hinge">Paragraph</p>
We can include external css file through the link tag in head tag. Please see below syntax for the same. also check the file path(href path), it should be relative or absolute.
<link rel="stylesheet" type="text/css" href="/custom.css">
You are missing one double inverted comma at start and you have to use '/' in the href attribute instead of '\'.
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.