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>
Related
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
To explain what I wish to achieve, lets say I have a long css document with many classes. I have several different "h1" tags and "h2" tags, "iframe", "ul", and many have different classes. Is it possible for all "h1" or other tags, regardless of class, to be grouped together and all "iframe" are grouped together in one group in Notepad++.
h1.left {
font-family: Papyrus;
font-size: 45px;
color: white;
margin-left: 15px;
}
h1.center {
font-family: Papyrus;
font-size: 30px;
color: white;
text-align: center;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre>PS: All code in this document is just
so it would be seen as I meant it to be,
and I hope you can read it right.<pre>
<!--For example:-->
+ h1
<!--And if i roll the h1 down, i can get all h1 in the document:-->
<ul>
<li> h1.left</li>
<li>h1.center <li>
<li>h1.right<li>
<!--And if i open those again, I will get all the code that is inside them-->
</body>
</html>
Not sure whether Notepad++ can run SASS but it sounds like what you are after.
h1 {
color: white;
font-family: Papyrus;
text-align: center;
&.left {
font-size: 45px;
}
&.center {
font-size: 30px;
}
}
I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.
Here are my files:
<!DOCTYPE css>
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!
You don't define a doctype for CSS files, remove <!DOCTYPE css>.
.header {
font-family: Roboto, serif;
text-align: center;
color: Black;
}
.mainHeader {
font-size: 28px;
font-weight: 900;
line-height: 1.5em;
padding-top: 20px;
}
.subHeader {
font-size: 14px;
line-height: 0em;
word-spacing: 0.25em;
padding-bottom: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="WSDS-css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
<title>Temp title</title>
</head>
<body>
<div class="header">
<h1 class="mainHeader">Temp main heading</h1>
<h2 class="subHeader">Temp sub-heading</h2>
</div>
</body>
</html>
DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
Make sure file path for css file is correct.
Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.
if we visit this page , at the time of loading , "ADD TO CART" button will display bit above as below image.
once the page loaded completely, than it will display in proper place.
but at the time of page loading also i want to display in proper place.
.label {
color: #000;
display: inline-block;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: normal;
}
.product-view .add-to-cart .qty-wrapper label {
line-height: 40px;
}
.qty-wrapper, .product-view .add-to-cart .qty-wrapper label {
margin-right: 7px;
float: left;
}
.product-view .add-to-cart-buttons {
float: left;
margin-right: 10px;
max-width: 100%;
}
The source code of your page hurts my eyes!!
You're loading the styles <link rel="stylesheet" type="text/css" href="http://sbdev2.kidsdial.com/skin/frontend/rwd/Style/css/styles.css" media="all" /> after all the js files, move the CSS below the <meta property="og:image" ... meta tag in your page, above all the js files.
I'm new to SVG and have been putting numbers in text tags for a week or two with no issues. It seemed straightforward. Now, strangely, I'm having an issue in which, no matter what numbers I put in, there is a dip in the second number.
Here is a pic to show you what is happening. The number "63" is supposed to be all on the same plane with itself, though a bit below the "This Week" designation. Instead, the '3' is dipping down lower. Pic of my problem.
My code:
<div class = "chartbox">
<div class = "svgcontainer" >
<svg class = "chart" width="590" height="440" role="img">
<g class = "bigbox">
<text x="346" y = "35" class = "blurbhed">This Week </text>
<text x ="491" y ="44" class = "blurbdeck"><?php echo round($kms_for_table[0]);?></text><text x ="540" y ="48" class = "blurbkm"><?php echo "km";?></text>
</g>
</svg>
</div>
</div>
The CSS:
body { background-color: #1C1816;
font-family: Raleway, Gotham-Rounded, Arial , sans-serif;}
.blurbhed {
font-size: 1.5em;
font-weight: 600;
fill: #650a5d;
letter-spacing: .3px;
}
.blurbdeck {
font-size: 2.7em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.blurbkm {
font-size: 1.3em;
font-weight: 600;
fill: #08292e;
letter-spacing: .4px;
}
.svgcontainer {
display: block;
position: relative;
border: 10px solid purple;
background-color: lightyellow;
margin-left: 10px;
height: 453px;
width: 630px;
margin-top: 0px;
margin-bottom: 20px;
text-align: center;
margin-right: 50px;
}
.chartbox {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
width: 800px;
margin-bottom: 10px;
padding-top: 20px;
}
The same problem happens wherever I move the text around the svg element. It occurs with a variety of fonts, and with different numbers. It happens whether I just have it echo the number or have it generated by the code from my model. I also tried making a completely new text element in a different spot, and the same weird dip in the second number occurs.
I'm sure this is really simple, but I've been fiddling with it far too long and am hoping someone can help me out. Thank you!
This is definitely down to the design of the font being used.."Raleway".
h1 {
font-family: 'Raleway', sans-serif;
font-size: 72px;
text-align: center;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 72px;
text-align: center;
}
* {
margin:0;
}
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<h1>0123456789</h1>
<h2>0123456789</h2>
I can only suggest using a different font..but you'd have to test each for the right look.
There's a proper solution for this that allows you to continue using Raleway:
You need to do two things:
Add CSS instructing the browser to use the lining-figures
Avoid pre-optimised font files (as served by Google Fonts.)
The CSS:
body {
font-variant-numeric: lining-nums;
font-feature-settings: "lnum";
}
Alternative CDN (Brick):
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Raleway:400">
The problem with Google Fonts is that it minimises font download size by removing 'unnecessary' glyphs and meta-data. In particular in this case, it removes the lining-nums variation of figures from Raleway. (You can try adding &subset=all to a Google Font URL to circumvent this, but this doesn't appear to be reliable.)