This is a really simple question that I can't figure out the answer to. I am a total beginner.
I can't change the font-family for some reason. I can physically type something different but it doesn't change the font at all. This is what my code looks like:
<!DOCUTYPE html>
<html>
<head>
<title>Fruit</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<style>
.left {
width:800px;
margin:auto;
text-align:center;
box-sizing:border-box;
background-color:#FFEBCD;
border:2px solid black;
font-family: 'Alegreya SC';font-size: 22px;
}
</style>
</head>
<body>
<div class="left">
<h1><strong>Fruit</strong></h1>
</body>
</html>
You need to include the desired font ( google font in your case ) inside your project.
You can do that in multiple ways. One is adding a link to it in your HTML
You can also that a quick look at this documentation
Other ways:
import in your stylesheet (CSS) with #import url('https://fonts.googleapis.com/css2?family=Alegreya+SC'); or
download the font and include it in your project and then import it
with #import(pathToFont)
.left {
width:800px;
margin:auto;
text-align:center;
box-sizing:border-box;
background-color:#FFEBCD;
border:2px solid black;
font-family: 'Alegreya SC', serif;
font-size: 22px;
}
<link href="https://fonts.googleapis.com/css2?family=Alegreya+SC&display=swap" rel="stylesheet">
<div class="left">
<h1>
AAAA
</h1>
</div>
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">
Im building a responsive website. Using a w3schools demo as a template to start with. Ive been having trouble with the fonts tho. Im trying to get the h1 to be Roboto Bold. Any help would be greatly appreciated.
Here is a fiddle: https://jsfiddle.net/08ggqgom/
#welcome{
font-family: "Roboto", sans-serif;
font-weight: bold;
If anyone could help with the font and also maybe cleaning it up a bit like separating the css and html that would be greatly appreciated as i keep breaking something when i try. ( or cleaning up all the class ids from w3schools)
You have assign welcome as a an id with # when in your HTML file you will add welcome in a class. So in the css file try this:
.welcome {
font-family: "Roboto", sans-serif;
font-weight: bold;
}
Now run code snippet, Your needed font added into your document, bold font is working. Remove "body{background-color:gray}" from my code, I have added dark background to show white text/content in document.
body{background-color:gray}
*{
margin: 0;
padding: 0;
}
.welcome{
font-family: "Roboto", sans-serif;
font-weight: 700;
}
h1{
font-size:30px !important;
}
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style>
body, html {height: 100%}
.bgimg {
background-image: url('images/bg.png');
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
<div class="w3-display-middle">
<h1 class="welcome">Welcome to Launchpad</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p class="w3-large w3-center">35 days left</p>
</div>
<div class="w3-display-bottomleft w3-padding-large">
Powered by w3.css
</div>
</div>
</body>
</html>
The problem is that in your css you are triggering the id #welcome but you have to write it as a class .welcome and everything works fine :)
So it looks like that
.welcome {
font-family: "Roboto", sans-serif;
font-weight: bold;
}
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty
If you have these big "slanted" fonts (not sure on the terminology), your opacity is less than 1, and you're using text-align:right, the end of the text will get cut off. I also found that in the OSX version of Safari, the end doesn't render even when the opacity is at 1. Anywhere else it seems to only be the case while opacity is < 1. This only seems to happen when aligning the text to the right.
I have recreated the problem in jsfiddle:
http://jsfiddle.net/qcr62eoa/
The code:
<head>
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<style>
.box {
background-color: lightblue;
width: 500px;
font-family: 'Playball', cursive;
text-align: right;
padding-right:30px;
}
.box h1 {
opacity: 0.5;
font-size:48px;
font-weight:400;
}
</style>
</head>
<body>
<div class="box">
<h1>Hello world</h1>
</div>
</body>
I don't know if you are looking for a workaround or an explanation, it is indeed weird and have no answer for that, but a workaround is available :). you could add some padding to the "box h1".
I tested it and it worked
<head>
<title>Test</title>
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
<style>
.box {
background-color: lightblue;
width: 500px;
font-family: 'Playball', cursive;
text-align: right;
padding-right:30px;
}
.box h1 {
opacity: 0.5;
padding-right:10px;
font-size:48px;
font-weight:400;
}
</style>
</head>
<body>
<div class="box">
<h1>Hello world</h1>
</div>
</body>
Hope this helped
cheers
Here's the image:
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FLoung</title>
<meta charset="utf-8">
<style>
body {
background-color: #cfcfcf;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
text-decoration: none;
}
#wrapper {
width: 700px;
margin: auto;
padding: 5px;
margin-top: 75px;
}
</style>
</head>
<body>
<div id="wrapper">
Test
</div>
</body>
</html>
how would I go about doing the second dark layered background? the top part is light grey, how would I go about doing the bottom part dark?
Would I just create a new div, with a z-index?
You could just split the wrapper div into two divs with different background colours
Example here