im just beginner at CSS, so i have a problem i wrote a simple code, IE shows correctly, but Firefox didint, how can i solve this problem? whats wrong with the code? Thank you. As i say, im beginner so sorry for stupid questions. :)
here is the code
h3 {
color: "blue";
font-size: "20px";
font-family: "verdana"
}
p {
color: "white";
background: "blue";
font-family: "helvetica";
text-indent: "1 cm"
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
First is CSS I called it stiliai.css, secon is html called index.html
Remove the quotes wrapping your colors. Quotes are not required while specifying colors.
Change
h3 {color:"blue"; font-size:"20px"; font-family: "verdana"}
to
h3 {color:blue; font-size:"20px"; font-family: "verdana"}
Your issue is with your use of " within your css. These are not needed:
h3 {
color: blue;
font-size:20px;
font-family: verdana
}
p {
color: white;
background: blue;
font-family: helvetica;
text-indent: 10px; /*cm are not commonly used in css*/
}
<html>
<head>
<title>Pakopinių stilių (CSS) naudojimo pavyzdys</title>
<link rel="stylesheet" href="stiliai.css" type="text/css">
</head>
<body>
<h3>Trečiojo lygio antraštė</h3>
<p>Naujas pastraipų stilius.</p>
</body>
</html>
Your use of " would only be necessary when you're using the likes of html.
They are not used in css files.
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
i'm using vs code
i tried :
-removing all other styles but one
-checking all semicolons and tags
-using another browser
none of these worked.
please reply if you have a plausible answer :) thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<a class = "one" href = "/index.html">MAIN</a>
</head>
<body>
<p id="p1">Websites by Froggy Sites!</p>
<p id="p2">Nelson Mandela - The Promotion</p>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON\ CLUB\ MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON\ CLUB\ MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
</body>
</html>
Your are probably using your CSS without including it or in wrong place.
Try using in style tag in head section above your body or create a new file named for example index.css and connect this file to your code.
If you use external version. For example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
<title>My site</title>
</head>
<body>
Other HTML STUFF HERE
</body>
</html>
Or if you use style tag
<!DOCTYPE html>
<html lang="en">
<head>
<style>
all styling here
body {
margin: 0;
}
</style>
<title>My site</title>
</head>
<body>
All HTML HERE
</body>
</html>
You are trying to access a class name while using: .p1, however it looks like your html is set up with p1 as an id. To access IDs in css you will need to change the "." to a "#".
ex. #p1{ ... } instead of .p1{ ... }
As stated above first you should make sure to reference the elements
in the proper way, either if you need to do it by class (".") or by
Id ("#") in the CSS code.
I have give some standard order to your code within the HTML
structure for improving readability.
Also there are some typos and invalid spaces.
Check the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON/CLUB/MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON/CLUB/MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
<title>Main</title>
</head>
<body>
<a class="one" href="index.html">MAIN</a>
<p class="p1">Websites by Froggy Sites!</p>
<p class="p2">Nelson Mandela - The Promotion</p>
</body>
</html>
I left the HTML and CSS in one single file as it is in your initial example.
I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;500&display=swap" rel="stylesheet">
<style type="text/css">
.topRight {
position:absolute;
top:0;
right:0;
}
.data-body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7
}
.option, .span {
font-size: 14px;
}
.p {
font-weight: 300;
font-size: 16px;
color: #333333;
line-height: 1.22;
}
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
</style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
</div>
<div>
${databody}
</div>
</body>
</html>
the variable databody is being set from the backend. It has content like
<h1>Something</h1>
<h2>foo bar</h2>
css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.
How can I get this working.
It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.
Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.
.h1 means that you want to select all class="h1" elements.
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
You can select the <h1> directly and apply css to it via h1{...}
It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.
There are couple of issues here.
The css for html tags should be named without the preceding dot.
For example .h1 should be h1
Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.
If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.
So the solution here is ${databody} should be ${databody?no_esc}
More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping
Hello I am just getting started with HTML and CSS but having a weird issue.
If I use border:0; and padding:0; I still get a white space all the way around my div. I can fix the issue by doing margin:-8; but that doesn't seem right to me. I am using Dreamweaver if that matters. thanks!
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar">Home - Introduction - Stakeholders - Implementation Plan - Proposal - Training</div>
</body>
</html>
and the CSS:
#charset "utf-8";
#navbar {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
font-weight: bold;
text-decoration: none;
background-color: #CCC;
height: 25px;
text-align: center;
border: 1px solid #000;
margin: 0px;
}
I figured it out thanks!
Adding a body tag in my CSS and setting the margins to auto fixed this.
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.