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.
Related
Here are 2 images of my HTML work and CSS as well. I don't know what I'm doing wrong but the google fonts will not load. I've tried using a different browser but that didn't help either. The browser that I've been mainly using is Google Chrome and I've also tried out Safari. I've also tried using different fonts but that hasn't made any difference either. I've added the code down below.
:HTML Work
:CSS Work
Html Code:
<!DOCTYPE html>
<head>
<title>Ray's site</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans|Montserrat|Sacramento&display=swap" rel="stylesheet" type="text/css">
<link rel="icon" href="favicon.ico" />
</head>
<body>
<div class="topContainer">
<img class="top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>I'm Ray.</h1>
<p>a <span class="pro">pro</span>grammer.</p>
<img class="bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middleContainer">
</div>
<div class="bottomContainer">
</div>
</body>
</html>
CSS:
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans', ;
}
h1 {
margin-top: 0;
font-family: 'Sacramento', ;
}
h2 {
font-family: 'Montserrat', ;
}
h3 {
font-family: 'Montserrat', ;
}
.topContainer {
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middleContainer {
width: 200px;
height: 200px;
background-color: red;
}
.bottomContainer {
width: 200px;
height: 200px;
background-color: blue;
}
.pro {
text-decoration: underline;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
Remove the trailing commas after your font names and it'll work (not sure why it doesn't work anyway, but I tried your code with and without the trailing commas and the latter works):
body {
margin: 0;
text-align: center;
font-family: 'Merriweather Sans'; /* <- removed comma */
}
h1 {
margin-top: 0;
font-family: 'Sacramento'; /* <- removed comma */
}
h2 {
font-family: 'Montserrat'; /* <- removed comma */
}
h3 {
font-family: 'Montserrat'; /* <- removed comma */
}
Btw, I went to Google Fonts and they're giving you that code (with the trailing comma), which is likely a bug on their end - normally what's after that comma in the code Google Fonts give you to paste is a fallback generic font (like "sans-serif" or whatever) - you should use one of those too. But the code above will work for you.
I created a div example, It uses /google/code-prettify library which is a color library.
It is basically a div inside another div with a textarea.
Whenever i try to add a new paragraph, header or another example in the next line, it messes up the page.
Something about the prettyprint lang class that is making it impossible to add more info down..
Can you see what i am missing?
HTML
<div class="examplebox">
<h3>Code Example:</h3>
<div class="exampleinsidebox">
<pre style="padding-left:20px;" class="prettyprint lang-python" >
<!-- !!!!! Start of showing Code !!!!!-->
# I am a comment
print("Free code wiki")
<!-- !!!!! End of showing Code !!!!!-->
</pre>
</div>
</div>
<button
onclick="window.location.href = '/TryYourselfCodes/pythonguide4.html'; "
style="left:30px;"
class="buttontest"
>
Try yourself >>
</button>
</div>
CSS
.examplebox {
background-color: #f3f4fa;
border-style: unset;
padding: 30px;
}
.examplebox h3 {
padding-bottom: 10px;
}
.examplebox button {
top: 20px;
}
.exampleinsidebox {
background-color: black;
border-style: unset;
}
.exampleinsidebox p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: white;
}
pre.prettyprint {
padding: unset;
border:none;
}
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint {
background: #343434;
font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco,
Consolas, monospace;
border: 0 !important;
}
As I can see you're closing <div class="examplebox"> that div at </pre></div></div>
in the second closing div tag, and there is no opening <div> for - at the very last closing </div> tag. maybe that's causing problem.
I learned to change the font family of text in the body by doing <p style="font-family:;></p>, but how would I do it for the title? Also, is there a way to fixing a font family for the entire document?
You want to use (html{}) in your style.css Therefore, it will apply to any element inside your (HTML). unless you explicitly specify otherwise.
Further on the matter, on the example, I gave you if you are to remove the child1 or child2 font-family it will default to whatever is in the body section if you are to remove the font-family from the body it will default to the HTML.
[
/*Change the font style on the Entire Document */
html{
font-family: "Montserrat", sans-serif;
font-size: 1rem;
color: Gray;
}
/*Change on the Body*/
body{
font-family: "Montserrat", sans-serif;
font-size: 2rem;
color: white;
background-color: #333;
text-align:center;
}
/*Change on a specific elements*/
#container .child1{
font-family: cursive;
font-size: 2rem;
color: white;
text-align:center;
background-color: blue;
}
#container .child2{
font-family: cursive;
font-size: 2rem;
color: white;
background-color: green;
text-align:center;
}
footer{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<header>
<p>I am the Header</p>
</header>
<div id="container">
<div class="child1">
<p>I am a Body Child</p>
</div>
<div class="child2">
<p>I am another body Child</p>
</div>
</div>
<footer> I am the Footer</footer>
]1
If you REALLY wanted to set the entire document you could use the below noting that more specific selectors will over-ride it unless you specify !important (though I strongly recommend against using !important on a selector this vast):
body {
font: normal 10px Verdana, Arial, sans-serif;
}
You can code a style element within the head element your HTML file to apply styles globally throughout your document:
<style>
title {
font-family:; /* usually the name of your font goes here */
}
</style>
I've watched some videos and copied what they did but it's not working. I have my file in the same folder as my documents. Ugh, the site wants me to add more "details" or it won't let me post. I had my html and my css pages separated but it put them together. If you know how feel free to break them apart.
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
}
.potato {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
font-family: 'lazyspringday';
}
.p1 {
font-family: 'lazyspringday';
}
body {
margin: 0;
padding: 0;
font-family: 'lazyspringday', serif;
}
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format:('truetypefont');
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left
}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right
}
p {
padding-top: 25px;
text-align: left;
}
.potato {
color: #00b8e6;
font-size: 15px;
font-family: 'lazyspringday';
font-weight: 100;
}
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="british-shorthair-3055340_1920.jpg" width: "400" height="400" class="float-img">
<p class="potato">
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute cat themed foods and drinks in a relaxing environment. Spend some quality time playing with some feline friends. Enjoy watching the cats have fun in an environment made just for them.
All cats will be adoptable and provided by the local shelter. Cat Corner Cafe will also have fun events like cat yoga, art with cats and game days. Come by yourself, with your meetup group or have your next birthday party here! We look forward to seeing
you. To be alerted when we open please sign up with your email on our homepage.
</p>
first of all define #font face on the top and remove ":" from format and rename turetypefont to truetype
#font-face {
font-family: "lazyspringday";
src: url('lazyspringday.ttf') format('truetype');
}
Hope this will help
first and foremost, put your fonts in fonts folder seperately and css stylesheet in css folder, then include/import fonts in your css at top like this.
#font-face {
font-family: 'lazyspringday';
src: url('../fonts/lazyspringday.eot');
src: url('../fonts/lazyspringday.eot?#iefix') format('embedded-opentype'),
url('../fonts/lazyspringday.woff2') format('woff2'),
url('../fonts/lazyspringday.woff') format('woff'),
url('../fonts/lazyspringday.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
we use woff and woff2 for using fonts in web.
you can also use web fonts generator to generate webfonts just uploading your .ttf file there.
In the head tag of your html file (index?) place something like this:
<link href="(your file location)" rel="stylesheet">
After importing the font you can do it in several different ways. I'd recommend you to use a body tag that would contain everything on that html file.
If you chose to use the body tag, simply add this line to your css file:
body {
font-family: 'Montserrat', serif;
}
Example:
Use Google Fonts. https://fonts.google.com
Then copy this code into the <head> of your HTML document.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Then use the following CSS rules to specify these families:
font-family: 'Roboto', sans-serif;
Sorry to ask the same question many before me have asked... I have read lots of these and they all say change
margin: 0;
There is a gap between the two divs (div class ="heady" and div class="menus") I just can't seem to get rid of the white space, hopefully it is clear enough, let me know if its not.
Thanks James.
html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>website</title>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<link rel="stylesheet" type="text/css" href="CSS/style1.css" />
<body>
<div class="heady">
<br></br>
<h1><a class="header" href="index.html">website</a></h1>
</div>
<div class="menus">
<ul>
<il><a class="list" href="x.html">About</a></il>
<t> | </>
<il><a class="list" href="y.html">Beginners</a></il>
<t> | </>
<il><a class="list" href="z.html">Advanced</a></il>
<t> | </>
<il><a class="list" href="contact.html">Contact</a></il>
</ul>
</div>
</body>
</html>
CSS
/*general rules*/
html,body {
font-size:11pt;
font-family: 'Lucida Grande', 'Lucida Sans', Geneva, Arial, Helvetica, sans-serif;
color: black;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
background-color: white;
padding-top: 0px;
margin-top: 0px;
}
h1 {
font-size: 25pt;
margin-left:10px;
margin-bottom:0;
padding-bottom: 0;
}
a:link, a:visited {
color: white;
}
a:hover, a:active {
color: grey;
}
/*header section rules*/
div.heady {
height: 200px;
width: 760px;
padding: 0;
background-color: grey;
background-repeat:no-repeat;
margin: 0;
}
a.header {
text-decoration: none;
}
a.header:link, a.header:visited, a.header:active,a.header:hover {
color: red;
margin:0;
}
div.menus {
padding: 0;
margin:0;
background-color:black;
width: 760px;
text-align: center;
font-size:12pt;
}
a.list {
margin:0;
}
Here is a link to a jsFiddle.
Browsers apply default styles to ceratin elements. In this case it's ul that gets some margin. Note that this margin separates the divs even though the divs themselves have no margins.
Use
ul { margin: 0; }
or include a reset stylesheet
Are you using the Firebug plugin for Firefox? Even if you don't already use firefox, you should download it along with the firebug plugin. With Firebug you can look at an element in your source code and see the styles that are being applied, the layout (width/height, padding, margin), and even manipulate the styles to view what a change in your CSS would do.
I HIGHLY recommend it!
Download Firefox
Download Firebug
.heady { display:block; }
.heady { margin:0; padding:0; }
.heady { line-height:100%; /* or even 0 (if no text present) */ }
the content can fool here, but 1 or all 3 of those should tame the beast across browsers.
google for a "css reset" too