How do I change font family of title in html? - html

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>

Related

Why aren't my font-weight and letter-spacing working outside h1?

very new to this and have tried several fixes without success.
Inside h1, my fonts are all correct and reacting as expected:
h1 {
position:relative;
left: -10px;
top: -16px;
padding: 2em;
height: 3em;
width: 100%;
background: #545454;
font-family: "Avenir Light", sans-serif;
font-size: .7em;
text-align: center;
color: darkgray}
h1 p {
font-weight: 30;
word-spacing: 30px;}
But the text isn't responding anywhere else on my page, even when inserted under body, body p, into each individual element... It's driving me nuts!
body {
margin: 0, 0;
padding: 0, 0;
overflow-x: hidden;
background: #765264;
color: white;
font-family: "Avenir Light", sans-serif;
font-size: 16px;
line-height: 1.5;
}
body p {
font-size: 1em;
font-family: "Century Gothic";
font-weight: 30;
letter-spacing: 1px;
}
Weirdly, inserting letter-spacing above seemed to make the spacing larger.
Here's my HTML, for reference:
<head>
<div class="header" id="myHeader">
<h1>
<link rel="stylesheet" href="peytonsite.css">
<p>
<img src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_100,h_100,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
<a>HOME</a>
<a>SKILLS</a>
<a>PORTFOLIO</a>
<a>EXPERIANCE</a>
<a>CONTACT</a>
</p>
</h1>
</div>
</head>
<article>
<section id="LANDING">
<img id="LongLogo" src="https://static.wixstatic.com/media/058e45_0291502c1e424532bbd24f9cfd50fd1e~mv2.png/v1/fill/w_1466,h_348,al_c,q_90,usm_0.66_1.00_0.01/Long%20Logo.webp">
<p>PASSIONATE DESIGN</p>```
Please help!
Update:
30 isn't a valid font-weight, and, your font may not necessarily have a boldness available to it.
Try: font-weight: bold;
or: font-weight: 300; (300 is usually non-bold)
A few other ideas:
You probably want a comma between h1 p { in your second CSS block.
Secondly- Is your target text within a <p> block?
For debugging purposes, what happens if you append !important to your styles? Does that show what you want?
What happens if you delete the h1 p { ... block, and add this in at the bottom of your CSS?
p {
font-weight: 300!important;
word-spacing: 30px!important;}
If nothing changes, I suspect you don't have the right CSS selectors.
Here is a CodePen of your CSS correctly applying

Not being able to use margin

So I'm not unable to use margin that consists of three texts. I tried adding it both in html and css, none of them worked. Am I supposed to format it in a different way?
.middlelectureread {
margin-left: 740px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 20px;
}
.middlecaptivityread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
.middleprotestread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
<span class="middlelectureread">READ MORE</span><span class="middlecaptivityread">READ MORE</span><span
class="middleprotestread">READ MORE</span>
Like Neffy wrote you shouldn't use span here. Span element is inline and shouldn't be a container to postion elements. For such things we have divs or HTML5 semantic elements like Section, Header, Footer etc. span can be useful when we want to style for example a part of some text, paragraph.
<p>If you do it you will see a <span class="warning">warning</span>sign</p>
And if we apply color to this span it will work.

CSS is not styling my HTML

<div class="entry"> is the root div.
Page CSS:
.entry h3 {
font-family: Helvetica
font-size: 30px
Now the problem is I have another div
<div class="widget">
<h3 class="widget-title"</h3>
I want to change font size and font family of the above h3 (.widget-title) but I cant as I have to delete the font size and family of .entry h3. I don't want to delete .entry h3
UPDATE:
I fixed the issue by adding !important. I hope this post helps someone else.
You don't have to delete anything. That's not how stylesheets work. Define your .entry h3, then just provide your widget title css after that. Stylesheets cascade, remember.
Also your H3 in your code example is missing a >.
.entry h3 {
color: blue;
font-size: 16px;
font-family: serif;
}
h3.widget-title {
color: red;
font-size: 32px;
font-family: sans-serif;
}
<div class="entry">
<h3>Entry Title H3</h3>
<div class="widget">
<h3 class="widget-title">
Widget Title H3
</h3>
</div>
</div>
It should not be an issue if you specifically target that element like below:
.entry h3 {
font-family: Helvetica;
font-size: 30px
}
.widget-title h3{
font-family: serif !important;
font-size: 30px
}
Use !important in front of css styles
.widget-title{
font-family: Helvetica !important
font-size: 30px !important
}

font-size inside paragraph and textarea

Text inside #write is much smaller than inside .sent.
I need them both of equal size.
html{
font-size:62.5%;
}
body{
font-size:1.4em;
}
.sent{
font-size:1.9rem;
}
#write{
font-size:1.9rem;
}
<p class="sent">abc</p>
<textarea id="write">abc</textarea>
set same font-family. textarea has a different font-family than other.
.sent{
font-size:1.9rem;
font-family: Arial;
}
#write{
font-size:1.9rem;
font-family: Arial;
}
jsFiddle
Here's your code: https://jsfiddle.net/s92shahm/
If you inspect each element you will discover the following:
textarea {
font-family: monospace;
border-color: rgb(169, 169, 169);
}
While the paragraph has no font-family definition, meaning it will default to the main font set by your browser or specified by you.
You need to unify the fonts being used by explicitly setting the font-family in use on each. the following:
#write,
.sent {
font-family: 'MyFont', sans-serif;
font-size: 1.9rem;
}
by default textarea has a font-family of BlinkMacSystemFont and font-size: 11px
html{
font-size:62.5%;
}
body{
font-size:1.4em;
}
.sent{
font-size:1.9rem;
font-family:san-serif;
}
#write{
font-size:1.9rem;
font-family:san-serif
}
<p class="sent">abc</p>
<textarea id="write">abc</textarea>

square bullet list wrong font size with body css

I have a list in my sidemenu, the settings don't seem to read past the css of the .body class in stylesheet -
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
}
li.develop
{
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
color:#fff;
}
My body class is -
body {
font-family: 'Arial', sans-serif;
font-size: 12px;
font-weight: normal;
}
The list then is defaulting to body class 12px, if I change body to 11px, the list is fine but I want to keep 12px for actual body of main content of copy on site.
I tried using !important but unsure that is correct?
Thanks
I think you may have .develop on ul not li, try putting your font rules on the ul.develop rule as they will apply to the li's underneath.
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
}
Put your 'body' related CSS above/ before the other styles. It reads it top down. Hope that works!