If a property starts with -webkit- it means you’re using some experimental code that will normally only work in WebKit-based browsers (Safari, Chrome) and cause errors or warnings everywhere else.
In noticing this error and asking the question you’ve done the right thing though — now you can learn a few simple things about how CSS is developed and how to use experimental and upcoming features safely.
First: why is this code «experimental»? It’s because the experienced web developers and computer specialists who sit down together to plan new features for CSS are still trying to figure out how it should work exactly. Over time they try different keywords and syntaxes (discussing details like ‘should it say «ease-in-out» or «in-out»?’). While doing so they also want some testing in the real world and feedback from real developers, so they encourage web browsers like Chrome and Opera to support stuff that’s unfinished — but with a prefix. The prefix -webkit- then means «this is a temporary implementation, we’re not sure that any other browser will ever understand the «ease-in-out» instruction because we haven’t finished deciding this, but you can test it as long as you understand it’s temporary and you may have to go back and fix your code later, if we change our mind».
To do this correctly, you need to do a bit of research on whether this CSS feature is still experimental. You’re trying to use CSS transitions, so you might for example take a look at this:
http://caniuse.com/#feat=css-transitions
Here you see a table of browsers and versions. You see which versions require a prefix like -webkit- , -ms- , -moz- or -o- (for Safari/Chrome, Internet Explorer, Firefox and Opera respectively).
In this case, the most recent versions of Internet Explorer, Firefox and Opera support this CSS instruction without a prefix, which basically means «we think we’re done discussing this now, pretty sure it’s going to be like this forever. If you write just ‘transition’ now you won’t have to come back and fix your code because we changed our mind.»
On the other hand, WebKit-based browsers still require a -webkit- prefix. So what you should do is to make sure you add this instruction twice — once with a -webkit- prefix, followed by one line without the prefix. Like this:
-webkit-transition: opacity 0.5s ease-in-out 0s;
transition: opacity 0.5s ease-in-out 0s;
If you feel very thorough and want to support older Firefox and Opera versions you could also add the -moz- and -o- lines.
If you make sure the code looks like that, you can now ignore the warnings. You’ve dealt with the problem it was warning you against.
Answer by Alberto Curtis
I am trying to add a Youtube video in my page using a CSS style sheet to my page, for some reason, video is not appearing,
Stack Overflow for Teams
Where developers & technologists share private knowledge with coworkers
,Thanks for contributing an answer to Stack Overflow!,Making statements based on opinion; back them up with references or personal experience.
.youtube-video iframe,
.youtube-video img,
.youtube-video-2 iframe,
.youtube-video-2 img {
position: absolute;
top: 0px;
left: 12%;
width: 890px;
height: 500px;
cursor: pointer;
}
img {
vertical-align: middle;
}
.youtube-video iframe,
.youtube-video img,
.youtube-video-2 iframe,
.youtube-video-2 img {
position: absolute;
top: 0px;
left: 12%;
width: 890px;
height: 500px;
cursor: pointer;
}
img {
vertical-align: middle;
}
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
Answer by Vera Liu
Otherwise, the default style sheet language is «text/css».,Setting the default style sheet
language,Otherwise, if any HTTP headers specify the «Content-Style-Type», the last
one in the character stream determines the default style sheet language.,The syntax of style data depends on
the style sheet language.
For example, the following short CSS style sheet (stored in the file
«special.css»), sets the text color of a paragraph to green and surrounds it
with a solid red border:
P.special {
color : green;
border: solid red;
}
Authors may link this style sheet to their source HTML document with the
LINK element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="special">This paragraph should have special green text.
</BODY>
</HTML>
Answer by Santiago Krueger
You need to make sure that there aren’t any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance. As you’re learning CSS, that can be difficult. To that end, you should visit the following sites to check your handiwork:
,
Another very common author error is the tendency to put HTML in places it shouldn’t be— especially external stylesheets. If you are LINKing or @importing a stylesheet, then there should be no HTML whatsoever in that stylesheet. That includes HTML comments, the <STYLE> tag, or anything else.
,
For some reason, a very common error on the part of authors is the tendency to put spaces between values and their units. For example:
,
In addition, make sure you use it correctly, and don’t go overboard with the attributes. You should really have only one LINK element, which should look very much like this:
For some reason, a very common error on the part of authors is the tendency to put spaces between values and their units. For example:
P {margin-left: 50 px;}
Notice the space between 20
and px
? That’s wrong. Values and units are never separated by a space. Having the space there will make the value invalid, which means that the entire rule is invalid, which means that your paragraphs won’t have a fifty-pixel left margin. Instead, you need to write:
P {margin-left: 50px;}
So assume that you have the following file, called mystyles.css, which you’re importing into HTML documents.
/* mystyles.css */
H1, H2, H3 {font-family: sans-serif;}
P {margin-left: 50px;}
CODE {color: #333;}
<!-- add new styles below this line -->
H2 {clear: both;}
IMG {float: right;}
See that HTML comment about adding new styles? It’s wrong. Rip it out, delete it, or turn it into a CSS comment, like the first line of the file. Thus, the «new styles below» comment should look like this:
/* add new styles below this line */
The other big error is to start out external stylesheets like this:
<STYLE type="text/css">
In addition, make sure you use it correctly, and don’t go overboard with the attributes. You should really have only one LINK
element, which should look very much like this:
<LINK rel="stylesheet" type="text/css"
href="mystyles.css" title="Default Styles" media="screen">
Fortunately, it’s easy to work around this. All you need to do is declare a zero-width border for the element, and magically, the background will be correctly filled with color.
P.side {background: aqua; border: 0px solid aqua;}
In the meantime, however, here’s the script:
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
NS4 = document.layers;
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;
}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
if (NS4) onresize = reDo;
//-->
</SCRIPT>
Answer by Sutton Santos
Browsers will often cache, or temporarily store, resources from websites you visit in order to improve load speed. Some sites will also use plugins for additional caching. Often when you don’t see your custom styles on your site, it’s because the browser or other system has cached an older version of your site.,If clearing your browser cache doesn’t seem to work, here are a couple of additional strategies to try:,If you find that you’d like to write more custom CSS for your forms or any other part of your site, consider checking out CSS Hero, a plugin which allows you to style your forms or site easily without code.,In this situation, the browser prefers the specificity of the default CSS over the !important, and so this CSS will not be applied on your site.
If you are only using a small amount of CSS, however, it may sometimes be easier to do a quick format check of your own. Let’s start by looking at a snippet of valid CSS:
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
margin: 0 0 10px 0;
}
For example, here’s the default CSS that sets the font size of form titles in WPForms:
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
}
Let’s try to override that CSS to make the font bigger. It may be tempting to use a short CSS selector, like this:
.wpforms-title {
font-size: 40px;
}
That CSS is valid, but its styles won’t come through in the browser. The default styles will be applied instead because they have a more specific selector. You would instead need to use the same, longer selector as the default style for your custom CSS:
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 40px;
}
It’s important to note, however, that adding !important
will not always work. Let’s try this approach for the CSS we discussed in the last example:
.wpforms-title {
font-size: 40px !important;
}
Here is the CSS that creates that style (#ff0000 is a hex code for red):
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: #ff0000;
}
We want to make these asterisks appear blue instead. We could copy that full selector from the CSS above, or we could use a short selector and add an !important
, as in this CSS snippet:
.wpforms-required-label {
color: #007acc !important;
}
Answer by Zayd Hayes
CSS defines style declarations and applies them to HTML documents. There are three different ways to link CSS to HTML based on three different types of CSS styles:,Other benefits from linking a CSS file to an HTML document are:,Inline – uses the style attribute inside an HTML element,External – links an HTML document to an external CSS file
Start linking style sheets to HTML files by creating an external CSS document using an HTML text editor and adding CSS rules. For instance, here are the style rules of example.css:
body {
background-color: yellow;
}
h1 {
color: blue;
margin-right: 30px;
}
Then, use the <link> tag in the <head> section of your HTML page to link a CSS file to an HTML document. Next, specify the name of your external CSS file. In this case, it’s example.css so the code will look as follows:
<head>
<link rel="stylesheet" type="text/css" href="example.css" media=”screen” />
</head>
Answer by Vienna Flores
The <LINK> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type—text/css for a Cascading Style Sheet—allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.,The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:,The STYLE element is placed in the document HEAD. The required TYPE attribute is used to specify a media type, as is its function with the LINK element. Similarly, the TITLE and MEDIA attributes may also be specified with STYLE.,The ID attribute is used to define a unique style for an element. A CSS rule such as
A style sheet may be embedded in a document with the STYLE element:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
BODY { background: url(foo.gif) red; color: black }
P EM { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
-->
</STYLE>
A style sheet may be imported with CSS’s @import statement. This statement may be used in a CSS file or inside the STYLE element:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(https://htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
DT { background: yellow; color: black }
-->
</STYLE>
The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }
Some examples of SPAN follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
.firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN> of a
paragraph could be in small-caps. Style may also be inlined, such as
to change the style of a word like <SPAN STYLE="font-family: Arial">
Arial</SPAN>.</P>
Answer by Angie Collins
External style sheets — Using the <link> element, pointing to an external CSS file.,In this tutorial you’ll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML.,You can attach external style sheets in two ways — linking and importing.,An external style sheet is ideal when the style is applied to many pages of the website.
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>
CSS not linking to HTML is a common error that you will encounter when building web pages. It can lead to hours of frustration and debugging before you identify the root of the error. In this article, we will explore 13 situations that will prevent your CSS from linking to your HTML, along with their solutions. Read on, and you’ll level up your CSS debugging skills.
Contents
- How Do I Link CSS to HTML?
- Why Is My CSS Not Linking to My HTML?
- Detailed Reasons Why Your CSS Is Not Linking to Your HTML
- – You Are Not Using the Right Linking Tag
- – Missing “Rel” Attribute
- – You Spelled “Stylesheet” as “Stylesheets”
- – Wrong Attribute Name in the Link Tag
- – Wrong Value for the Type Attribute
- – Path Error
- – Wrong Folder Name
- – Wrong File Name
- – CSS Syntax Errors
- – Wrong CSS Selector
- – Trailing Characters in Your CSS Selectors
- – Comment Fragments in Your CSS File
- – You Forgot To Save Your Files
- Conclusion
How Do I Link CSS to HTML?
You can link CSS to HTML by using the <link> tag or a pair of <style></style> tags in the <head> section of your HTML document.
Why Is My CSS Not Linking to My HTML?
Your CSS will fail to link to your HTML when there is a break in the relationship between the HTML and CSS. This relationship ensures both the HTML and CSS follow rules that will allow the CSS to link to the HTML.
Detailed Reasons Why Your CSS Is Not Linking to Your HTML
A lot can happen that can prevent your CSS from linking to your HTML file. In this section, we present you with thirteen reasons and their solutions.
The reasons are:
- You are not using the right linking tag
- Missing “rel” attribute
- You spelled “stylesheet” as “stylesheets”
- Wrong attribute name in the link tag
- Wrong value for the type attribute
- Path error
- Wrong folder name
- Wrong file name
- CSS syntax errors
- Wrong CSS selector
- Trailing characters in your CSS selectors
- Comment fragments in your CSS file
- You forgot to save your files
Read on as we analyze each reason so you can prevent a repetition of this error in the future.
– You Are Not Using the Right Linking Tag
The concept of “linking tag” in this context is the HTML tag that you use to link CSS and HTML. There are two tags that you can use for connecting CSS to HTML. These tags are:
- The link tag
- The style tag
The Link Tag
This is the recommended tag for linking CSS to HTML. The preferred location for this tag on your web page is the <head> section of your web page. It loads a CSS file that is external to the current HTML element.
So, when your CSS fails to link to HTML, you should confirm that the link tag is present in the <head> section.
The Style Tag
The style tag is an alternative method you can use to link a CSS to HTML. Its default location is the <head> section of your document. Its main usage is to allow you to write CSS styles in your HTML document.
Unlike the <link> tag that is a self-closing tag, <style> has a closing tag which is </style>. So, if you forget to use the closing tag, there is a chance that the CSS within the tag will not work with the HTML.
So, moral of the story is to always close the <style> tag.
– Missing “Rel” Attribute
The rel attribute is an attribute of the <link> tag. It defines the relationship that exists between an HTML file and a CSS file. Once you define the <link> tag, it should have the rel attribute. This informs the browser that the linked CSS file is a stylesheet meant for the HTML page.
If the rel attribute is missing, your CSS will fail to work, as you will be able to see if you run this code:
<head>
<!– This will not work –>
<link href=”myCSSFile.css”></link>
</head>
The fix is to ensure the rel tag is present in the link tag:
<head>
<!– This will work –>
<link rel=”stylesheet” href=”myCSSFile.css”></link>
</head>
– You Spelled “Stylesheet” as “Stylesheets”
The fix for this error is to write “stylesheet” with no “s” at the end.
In case you didn’t notice it, read this section’s title again, this time pay attention to the names. Did you spot the error?
There is an extra “s” in the second stylesheet. When you make this mistake, it will result in HTML not linking to CSS, as happened when running the coding example below:
<head>
<!– This will not work –>
<link rel=”stylesheets” href=”myCSSFile.css”>
</head>
Clearly, the fix is to write “stylesheet” with no “s” at the end.
<head>
<link rel=”stylesheet” href=”myCSSFile.css”>
</head>
– Wrong Attribute Name in the Link Tag
HTML <link> tag has three common attributes. They are:
- rel
- href
- type
A typographical error in any of these names will not allow your CSS to link with the HTML. Keep an eye out for this one, as it can be a tough error to spot.
– Wrong Value for the Type Attribute
The type attribute is an optional attribute of the HTML link tag. Its value tells the web browser the nature of the linked document; in this case, a CSS stylesheet. If there is a typographical error in the name, the HTML will not link to the CSS, like in this code:
<head>
<!– This will not work. Did you spot the mistake? –>
<link rel=”stylesheet” type=”text/cs” href=”test.css”>
</head>
The error from the code block is “text/cs” (with no quotes). You should spell it as “text/css” (with no quotes).
<head>
<link rel=”stylesheet” type=”text/css” href=”myCSSFile.css”>
</head>
– Path Error
This is a tough one, and it’s difficult to get for the first time. Before you learn what it’s all about, we will define the following:
- What is a path?
- Types of path
Furthermore, a path is a location of a resource on your computer or a web server. There are two types of paths. They are:
- Relative paths: The location of a resource starting with a forward slash
- Absolute paths: These are URL locations
A path error occurs when you are connecting CSS to HTML using the wrong path.
For example, if your CSS is in FolderA and your HTML is in FolderB. The following won’t work:
<head>
<!– If HTML and CSS are in different folders, this
will not work –>
<link rel=”stylesheet” type=”text/css” href=”FolderA/myCSSFile.css”>
</head>
The path to get the CSS would be:
<head>
<link rel=”stylesheet” type=”text/css” href=”../FolderA/myCSSFile.css”>
</head>
Another example is, if your CSS file is in FolderA. This FolderA resides in FolderZ. If you need to fetch the CSS file in FolderA, you’ll need the following:
<head>
<link rel=”stylesheet” type=”text/css” href=”../FolderZ/FolderA/myCSSFile.css”>
</head>
When your CSS fails, take note of the path, an error can slip in without you even realizing.
Can you spot the error below? If yes, can you fix it?
<head>
<link rel=”stylesheet” type=”text/css” href=”./FolderZ/FolderA/myCSSFile.css”>
</head>
– Wrong Folder Name
If your CSS is in a folder, you’ll need the correct name of that folder when you want to link the CSS with the HTML. When the folder name is incorrect, it will result in CSS link not working.
For example, let’s say your CSS is in a folder called “indigo” (with no quotes), the following code will fail to get the CSS:
<head>
<link rel=”stylesheet” type=”text/css” href=”índigo/myCSSFile.css”>
</head>
Take a careful look at the folder name. Can you spot the error?
When your CSS files are in a folder, ensure you use the correct folder name when you are linking the CSS to HTML. Always double-check your file name when debugging HTML and CSS not linking issues
– Wrong File Name
The wrong CSS file name is one of the root causes when your CSS fails to link to your HTML. It can take countless hours to figure out this type of error.
When there is a wrong CSS file name, your HTML will consider it as a non-existent file. So, the web browser will use its user agent (UA) styles on the web page.
Don’t forget to always double-check your file name, to avoid such errors.
– CSS Syntax Errors
If there is a CSS syntax error in your CSS file, the web browser will not apply the CSS to your HTML file.
Some of the most common syntax errors are:
- Missing semicolons at the end of a property-value declaration
- Missing closing brace
– Wrong CSS Selector
When your HTML is set up with HTML IDs and classes, any attempt to use a class selector to get an HTML ID will not work, like in the code below:
<div class=”className”>
<p>
Your text
</p>
</div>/* This will not work */
#className {
width: 500px;
background-color: red;
}
In this scenario, you’ll need a class selector:
.className {
width: 500px;
background-color: red;
}
– Trailing Characters in Your CSS Selectors
This is a hard one to spot. As a challenge, see if you can spot the difference in the code blocks below:
.selector, {
display: grid;
place-items: center;
border-radius: 20px;
cursor: pointer;
width: 300px;
height: 50px;
background-color: #cccccc;
}
.selector {
display: grid;
place-items: center;
border-radius: 20px;
cursor: pointer;
width: 300px;
height: 50px;
background-color: #cccccc;
}
Did you spot it? We bet you did not.
The first CSS selector has a trailing comma in the selector name. As a result, this will prevent the browser from applying the styles. The fix is to pay a closer look at your CSS. Better yet, you can use an editor that’ll notify you of this error.
It is a best practice to document your code. In CSS, you write your comment in the following way:
You should know if you delete one part of the comment, everything will seem alright. But, know that the web browser will not apply CSS styles below the second part, i.e. below “*/” as in the coding block below:
main {
display: flex;
justify-content: center;
background-color: red;
}
*/
.display-grid {
display: grid;
place-items: center;
border-radius: 20px;
}
From the code above, the web browser will apply styles for the main selector. It will not apply the styles of .display-grid due to the trailing comments fragment.
The fix is to use an editor that’ll always delete both comment fences.
– You Forgot To Save Your Files
Yeah, I know, this one is common. When there is a change in your CSS file, always save your files before you refresh the web browser.
Conclusion
In this article, you learned about thirteen errors that will prevent your CSS from working on your web page. Here is a summary of what you’ve learned:
- How you can link CSS to HTML
- What will stop your CSS from working on your HTML page
- Thirteen reasons that will cause your CSS not to link with your HTML, like not using the right linking tag, path errors, syntax errors, and others
- How to fix the common reasons that will stop your CSS from working
With the new knowledge that you’ve gained, you’ve surely leveled-up your CSS debugging skills.
- Author
- Recent Posts
Your Go-To Resource for Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL. Meet The Team
Верстка. Дизайн. Раскрутка. Тема для споров |
Модератор форума Сообщение # 1 |
Это НЕ тема для вопросов и помощи по вашим сайтам!
Для чего эта тема?
Наболевшие темы:
Тут можно поделиться друг с другом различными идеями и наработками по оптимизации кода сайтов под разные браузеры, обсудить наболевшие проблемы и спросить совета по проработке некоторых элементов дизайна. Примечание: |
olegsuv Сообщений: 1365 Репутация: 127 Сообщение # 331 |
Quote (Diоm) но вот только эти теги увеличивают текст Ну так задайте им свой размер. Любые работы по: |
Diоm Сообщений: 2 Репутация: 14 Уровень замечаний: Сообщение # 332 | Если валидатор выдает 255 ошибок в html это что значит? На мой взгляд если там и есть ошибки то ни как не 255. Ведется набор персонала на Liverpool-Portal.ru |
olegsuv Сообщений: 1365 Репутация: 127 Сообщение # 333 |
Quote (Diоm) Если валидатор выдает 255 ошибок в html это что значит? это значит что на сайте 255 ошибок Любые работы по: |
Diоm Сообщений: 2 Репутация: 14 Уровень замечаний: Сообщение # 334 | Может ли этому быть виной то, что сайт в основном сверстан таблицами а не при помощи ЦСС? http://opengt.ru/ Ведется набор персонала на Liverpool-Portal.ru |
olegsuv Сообщений: 1365 Репутация: 127 Сообщение # 335 | Diоm, вы бы в консоль сначала посмотрели: Code [26.03.2012 18:01:51] CSS — http://opengt.ru/_st/my.css Любые работы по: |
Diоm Сообщений: 2 Репутация: 14 Уровень замечаний: Сообщение # 336 | И вообще, сильно ли это влияет на поисковики? Ведется набор персонала на Liverpool-Portal.ru |
olegsuv Сообщений: 1365 Репутация: 127 Сообщение # 337 |
Quote (Diоm) И вообще, сильно ли это влияет на поисковики? Я думаю что может влиять соотношение контент/разметка, по поводу ошибок — не слышал. Любые работы по: |
Diоm Сообщений: 2 Репутация: 14 Уровень замечаний: Сообщение # 338 | Это типа лишнее в ЦСС и нужно удалить? Ведется набор персонала на Liverpool-Portal.ru |
olegsuv Сообщений: 1365 Репутация: 127 Сообщение # 339 |
Quote (Diоm) Это типа лишнее в ЦСС и нужно удалить? в html Любые работы по: |
nad-x Репутация: 0 Сообщение # 340 | Народ! Как думаете, слайдер, который перелистывается типа как на андроиде (мышкой в сторону, переходя на новый раб. стол) реально на jquery написать, или флэшем всё-таки проще? |
Miss_Esq Сообщений: 13859 Репутация: 4159 Уровень замечаний: Сообщение # 341 | nad-x, поковыряйтесь может и найдёте jQuery , но пока что только Flash встречались … geometriya ISO 3166-2 DEE |
tellpeople Репутация: 0 Сообщение # 342 | Всем доброго вечера. Законы, кодексы, права, защита, жалобы — TellPeople.ru |
webanet Сообщений: 24067 Репутация: 4985 Сообщение # 343 | tellpeople, вы большой и рисковый оригинал однако, забивать верхнюю часть кода этими красотами Quote <div id=»logoBlock»><noindex><a style=»font-size:8pt;» href=»/search/%D0%BA%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%B0/» rel=»nofollow» смело. очень смело ТУТ можно оставить своё мнение по любому вопросу |
tellpeople Репутация: 0 Сообщение # 344 | webanet, а я подумал что noindex наоборот спасает от мусорки которая получается из тегов. Законы, кодексы, права, защита, жалобы — TellPeople.ru |
webanet Сообщений: 24067 Репутация: 4985 Сообщение # 345 | tellpeople, зачем вам мусорка в самом вверху кода? какой в этом сакральный смысл? ТУТ можно оставить своё мнение по любому вопросу |

When working with HTML and CSS, you may find that your CSS is not styling your HTML document even when you’ve added the CSS to your page.
Here are six fixes that you can try to make your CSS work on your HTML page
Make sure that you add the rel attribute to the link tag
When you add an external CSS file to your HTML document, you need to add the rel="stylesheet"
attribute to the <link>
tag to make it work.
<link rel="stylesheet" href="style.css" />
If you omit the rel
attribute from the <link>
tag then the style won’t be applied to the page.
Make sure you have the correct path in the href attribute
If you have the CSS file in the same folder as the HTML document, then you can add the path to the CSS file directly as shown below:
<link rel="stylesheet" href="style.css" />
If you add a /
before the file name, the CSS won’t be applied:
<link rel="stylesheet" href="/style.css" />
<!-- this is wrong -->
When your CSS is one folder away, you need to specify the folder name inside the href
attribute without the /
as well.
This is wrong:
<link rel="stylesheet" href="/assets/style.css" />
This is correct:
<link rel="stylesheet" href="assets/style.css" />
Make sure the CSS file name is correct
The name of the CSS file that you put inside the href
attribute must match the actual name of the CSS file.
If you have a CSS name with spaces, then you need to include the spaces in a URL-safe format by replacing it with %20
For example, suppose the name of your CSS file is my style.css
, then here’s the correct name inside the href
attribute:
<link rel="stylesheet" href="my%20style.css" />
Because URL can’t contain spaces, it’s recommended that you replace all spaces in your CSS file with a hyphen -
or an underscore _
so that my style.css
becomes my-style.css
or my_style.css
.
Make sure the link tag is at the right place
The <link>
tag that you used in your HTML file must be a direct child of the <head>
tag as shown below:
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello World</h1>
</body>
If you put the <link>
tag inside another valid header tag like <title>
or <script>
tag, then the CSS won’t work.
The following example is wrong:
<head>
<title>
<link rel="stylesheet" href="STYLE.css" />
</title>
</head>
<body>
<h1>Test page</h1>
</body>
The external style CAN be put inside the <body>
tag, although it’s recommended to put it in the <head>
tag to load the style before the page content.
The following example still works:
<body>
<link rel="stylesheet" href="STYLE.css" />
<h1>Test page</h1>
</body>
Make sure that all your style rules are correct
When you have an invalid CSS syntax inside your stylesheet, then the browser will ignore the invalid syntaxes and apply the valid ones.
For example, suppose you have the following CSS file:
body {
background-color: greenyellow;
}
h1 {
color: choco;
}
Because browsers have no support for choco
color name, the style rule for <h1>
tags above will be ignored while the background-color
property for the <body>
tag will be applied.
Make sure that you are using the right syntax for your styling because invalid CSS syntax won’t generate an error message.
Invalidate the cache with a hard reload
Sometimes, you might have the CSS file linked correctly from your HTML file, but you don’t see the changes you make to the CSS file reflected on the web page.
This usually happens when the browser serves a cached version of your CSS file.
To invalidate the cache and serve the latest version of your CSS file, you can perform a hard reload on the browser.
The shortcut to perform a hard refresh might vary between browsers:
- For Edge, Chrome, and Firefox on Windows/ Linux, you need to press
Shift + CTRL + R
- For Edge, Chrome, and Firefox on macOS, you need to press
Shift + CMD + R
- For Safari, you need to empty caches with
Option + CMD + E
or click on the top menuDevelop > Empty Caches
If you’re using Chrome, you can also select to empty the cache and perform a hard reload with the following steps:
- Open the Chrome DevTools by pressing
Shift + CTRL + J
on Windows/ Linux orOption + CMD + J
on Mac. - Right-click on the reload (refresh) icon and select the third option
The image below shows the Chrome Empty Cache and Hard Reload option you need to select:
With that, you should see the latest CSS changes reflected on your web page.
Alternatively, you can also invalidate the browser cache by using CSS versioning as explained here:
CSS versioning trick explained
And those are the six fixes you can try to link your CSS file to your HTML document.
I hope this tutorial has helped you fix the issue 👍