I'm trying to run this code on Visual Studio Code and faced these errors:
at-rule or selector expected at Ln1 Col1, Ln7 Col 1, Ln50 Col1
{ expected at Ln2 Col1, Ln51 Col 1
I tried to run these on W3Schools and they ran just fine. How can I solve this issue? Here's the code, thank you!
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
}
/* Text Display */
h1 {
font-family: georgia, "Times New Roman", Times, serif;
color: black; /* Set text color to black */
text-align: center;
}
#p1 {
font-family: Arial, Helvetica, sans-serif;
color: blue; /* Set text color to blue */
text-align: center;
}
.center {
font-family: Arial, Helvetica, sans-serif;
color: green; /* Set text color to green */
text-align: center;
}
/* unvisited link */
a:link {
color: blueviolet;
}
/* visited link */
a:visited {
color: gray;
}
/* mouse over link */
a:hover {
color: blue;
font-weight: bold;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<h2 id="p1">Enjoy numerous movie reviews and recommendations here.</h2>
<h3 class="center">Featured movie of the week:</h3>
<p><b>Everything Everywhere All at Once</b></p>
</body>
</html>
In Visual Studio Code bottom right, change Language Mode to HTML from CSS.
Sometimes your editor could have extra characters accidently placed somewhere
To see those you can refer this whitespace
Otherwise copy your entire code a normal notepad in windows and paste it back to VS Code
Or you can use Notepad++ and see all characters and then delete them
Otherwise copy paste you code piece by piece one style at a time, you can narrow the issue
Related
My code was all working correctly until I did a CSS3 validation which told me I needed to move the #import font code line to the first line in the css style file. When, I did that of course I realized the web fonts I had chosen had not been displaying, so I fixed all the sizes, etc. to best display the pages with the chosen fonts.
I can't seem to figure out this last quirk, though. The p a:link, a:visited color blue is not being picked up in the p tags, except for one place in the footnote area (footnote #6)! The other a links within p tags are picking the white color up from the insert-container p a styles. I understand that the last style overrides previous ones, but the selectors are different, so I'm not understanding why this is happening.
I've cleared the cache, tried different browsers, tried changing the colors on each of the a link styles, but if I change it to fix the paragraph text, then it ends up also changing the insert-container link styles.
You can see the issue on my CodePen at https://codepen.io/Ovimel/pen/XQjgeg and the CSS is shown below. Thanks!
CSS3
/*styling for paragraph text links */
p a {
font-weight: 900;
}
p a:link,
a:visited {
color: #194a76;
text-decoration: underline;
}
p a:hover,
a:active {
color: #194a76;
text-decoration: underline;
}
/* styling for colored page inserts from xopixel dot com */
#fullwidth-insert {
padding: 30px 0;
background: #7d654b;
text-align: center;
color: #fff;
font-family: "Carme", sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
.insert-container {
max-width: 85%;
width: 960px;
margin: 0 auto;
}
.insert-heading {
margin: 0;
font-size: 2rem;
font-weight: 300;
padding-bottom: 1rem;
letter-spacing: 0.08rem;
}
/* styling for full-width insert heading links */
.insert-heading a {
color: #fff;
font-family: "Days One", sans-serif;
font-weight: 300;
text-decoration: underline;
}
.insert-heading a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/* styling for full-width insert paragraph links */
.insert-container p a:link,
a:visited {
color: white;
font-weight: 700;
text-decoration: underline;
}
.insert-container p a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/*styling for footnotes*/
p.footnote {
font-size: 0.8em;
/*10 pt 13px */
}
Higher specificity will beat out order in the stylesheet. This selector:
.insert-container p a:link
has higher specificity than this one:
p a:link
You can see the selector is more specific as it targets links inside a p inside the .insert-container div. For more on the how it is calculated by the browser: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hey can anyone fill me in on how to add fonts to HTML classes? I was watching a tutorial and that part skipped and I'm confused exactly what he did. There was a box class with different elements in it and he was trying to add font styling before it skipped.
This is the HTML and CSS, excluding the <head> and <body> tags:
.body {
Background-color: red;
}
.box {
Width: 174px;
Height: 250px;
Background: yellow;
Width: 25px Padding:20px;
}
.true {
Background-color: brown;
}
.true2 {
Background-color: green
}
<Div class="box true"> this is an example</Div>
<Div class="box true2> parenthesis</Div>
Use the font-family styling in your classes:
Example:
body {
font-family: Arial, sans-serif;
}
You can also add custom fonts like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
And then just juse font-family: myFirstFont; whenever you need it.
I'm new to HTML and CSS. The following lines I wrote in the Atom text editor are not properly shown in the preview. The font is not changing from the default Times New Roman. Even after adding extra font-packages. However, I did not use any fancy kind of fonts. Is their something wrong with my code instead?
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Text</title>
</head>
<body>
<p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
<ul>
<li id="point1">This list item uses the Verdana font and color orange.</li>
<li id="point2">This list item uses the Impact font and the color red.</li>
<li id="point3">This list item uses the Georgia font and the color pink.</li>
<li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
<link href="http://www.spiced-academy.com"></link>
</ul>
<p>This is another paragraph. Each item in the list above has a top and bottom
margin of 10 pixels.</p>
</body>
</html>
I'm not sure that is the problem but try to add the attribute type on the link css stylesheet:
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Well, in the code preview window I see it works (Chrome, Mac). Try to clear your browser cache or write font-family: Tahoma !Important;
Make sure that your CSS page is saved as stylesheet.css because this is what is referenced in your code.
Check that your HTML file and CSS file are saved in the same directory.
For testing, you could have the CSS in a <style> tag, before even trying to link to a stylesheet. You can place this in the <head> tag. Then tackle the external stylesheet once you can successfully see the styles here.
<head>
<style>
body {
font-family: Tahoma;
font-size: 16px;
}
#point1 {
font-family: Verdana;
color: orange;
margin-top: 10px;
margin-bottom: 10px;
}
#point2 {
font-family: Impact;
color: red;
margin-top: 10px;
margin-bottom: 10px;
}
#point3 {
font-family: Georgia;
color: pink;
margin-top: 10px;
margin-bottom: 10px;
}
#point4 {
font-family: Tahoma;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
I'm sorry, I'll admit I'm a bit of a newbie when it comes to HTML. But I can't see where I'm going wrong. I've declared the page to be aligned center, but for some reason invisible to me, it won't actually align!
My code is here...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,td,th {
font-size: 14px;
text-shadow: inherit;
max-width: 1000px;
min-width: 600px;
float: none;
vertical-align: central;
position: absolute;
width: auto;
}
h1 {
font-size: 40px;
color: #FFF;
}
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
h2 {
font-size: 16px;
color: #666;
}
h3 {
font-size: 24px;
color: #FFFFFF;
}
.Headertext2 {
}
h5 {
font-size: 16px;
color: #666;
}
h6 {
font-size: medium;
color: #000;
}
h4 {
font-size: 12px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #999;
}
a:active {
text-decoration: none;
}
</style> <title>We'll fix your Potholes!</title>
</head><center>
<body bgcolor="#B90D32"> <div id="container" width "1200" align="center" >
<h1>A1Jay Pothole Solutions</h1>
<h3><strong>Permanent Pothole Repair that lasts</strong></h3>
<div id="content" align="center" bgcolor="#FFFFFF" width"600" class="content">
<h6>Potholes are a growing problem and cause lasting damage to your vehicle.
We here at A1JAy Pothole Solution have the solution. We use only the best products on the market to repair potholes ensuring that the problem is fixed permanently and never returns. Our repairs are professional water tight and permanent. We replace any road markings that may be removed. We respond quickly to repair any holes, therefore stopping the damage to your vehicle.
Our products are cold lay, fully graded to PSV-60 and all packaging is recyclable.
We have different rates depending on the amount of potholes you require permanently repairing, get in touch for details.
If you have a pothole on your drive, street, place of work, car park, walkway or anywhere else, please get in contact and I will happily give you a free, no obligation quote.. </h6>
<p> </p>
</div>
</div>
</body>
</html>
I apologise if this question has already been asked, I'm still getting to know Stack Overflow. Thanks in advance :).
Let's start with a stripped down (and working) solution: http://jsfiddle.net/WDTCK/1/
Major Points
<center> is obsolete* (it's also an illegal parent for body, and unclosed in your example)
align=center is obsolete*
A simple way to center something using CSS is to assign a container element a width and margin: 0 auto
Like this:
#container {
margin: 0 auto;
width: 600px;
}
Minor Points
Always prefer styles declared separate from the markup
Always declare styles using CSS (not deprecated properties like bgcolor="#B90D32")
Make sure you are using headings correctly. I see H1, H3, and H6. Headings should represent the outline of your document; they should not be used just for formatting.
Here's a cleaner example which demonstrates better semantics: http://jsfiddle.net/WDTCK/2/
* "obsolete and non-conforming, and [...] must not be used by authors."
Put this inside the body
<div align = "center">
<!--somecodes-->
</div>
I have a HTML file which has the following code;
<html>
<head>
<LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
</head>
<body>
<span class="ipad_text">DESKTOP RED; iPad GREEN</span>
<br />
<span class="ipad_text2">DESKTOP BLACK; iPad BLUE</span>
<br />
<span class="ipad_only">iPad ONLY SHOW</span>
<br />
<span class="ipad_only2">iPad ONLY 2</span>
</body>
</html>
Also there are 2 CSS files under css folder (desktop.css and ipad.css);
In desktop.css, I have
#import "ipad.css";
.ipad_text{
font:42px arial bold;
color: red;
}
.ipad_text2{
font:22px verdana bold;
color: black;
}
.ipad_only{
display:none;
}
And in ipad.css, I have
#media only screen and (device-width:768px)
{
.ipad_text{
font:32px arial bold;
color: green;
}
.ipad_text2{
font:22px verdana bold;
color: blue;
}
.ipad_only{
display:block;
}
.ipad_only2{
color: red;
font:52px arial bold;
}
}
Now for some reasons, this is not working..If I cut/paste the code from ipad.css under the desktop.css file as follows, the page displays correctly in both desktop and iPad...What I am doing wrong? I want the 2 CSS to reside in separate files...Please help me.
Following works perfectly
#import "ipad.css";
.ipad_text{
font:42px arial bold;
color: red;
}
.ipad_text2{
font:22px verdana bold;
color: black;
}
.ipad_only{
display:none;
}
#media only screen and (device-width:768px)
{
.ipad_text{
font:32px arial bold;
color: green;
}
.ipad_text2{
font:22px verdana bold;
color: blue;
}
.ipad_only{
display:block;
}
.ipad_only2{
color: red;
font:52px arial bold;
}
}
Like I said in my previous answer...
#imports have to come before any other style declarations.
But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles.
... because your non-iPad styles apply to all media, including Mobile Safari on iPad. Since your non-iPad styles come after your conditional #import, they'll override your styles whether they get imported or not. This is normal cascading behavior.