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>
Related
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
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>
in above image you can see text "acceptable".
i want to change this font as text "contact us" font which is present below.
we are using
font-family: 'Roboto Condensed', sans-serif;
but it didt worked for us.
Well according to your code, you just have to change the font-size of p tag and you are done. To check the changes try to add Contact us next to acceptable and then you will see both are same. Happy to help :)
Use <span class="red">text</span> and some basic CSS like .red { color: red; }
lOOK AT THIS EXAMPLE
HTML
<span class="red">acceptable</span>
</p>
CSS
p {color: black;
font-size: 13px;
line-height: 26px;
text-align: justify;
}
.red { color: red;
font-family: 'Roboto Condensed', sans-serif; }
I have noticed when I have a <h2> tag directly below an <h1> tag there is a large gap between the two. No padding or margin is set and I've normalised the css using normalize.css. Why does this gap exist?
Fiddle here: fiddle
Here is a screen shot:
html (normalize.css is active on this html)
<div class="header">
<div class="wrapper">
<h1>Portfolio of...</h1>
<h2>Jing Xue</h2>
</div>
</div>
css
.wrapper {
width: 940px;
margin: 0 auto 0 auto;
}
/* header ------------------------------------------------------------------ */
.header {
text-align: center;
padding: 40px 0 0 0;
margin-bottom: 40px;
}
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
/* margin-bottom: -50px; */
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
}
Further Question
For what ever the reason for this big gap between "portfolio of..." and "Jing Xue", is the correct way to reduce the gap to give a negative top/bottom margin on the corresponding <h..>?
h1 through h4 tags have a default margin. You need to remove that margin in your CSS.
.header h1 {
font-family: 'Delius Swash Caps', cursive;
font-size: 250%;
color: rgb(200,50,50);
margin:0;
}
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin:0;
}
This is normal behaviour for these elements..
You forgot to take the default margin-top off of your h2 element. Simply add margin-top:0px; to your h2 class.
Here is a working jsFiddle.
Your class should now look like below:
.header h2 {
font-family: 'Playfair Display SC', serif;
font-size: 450%;
color: rgb(59,67,68);
margin-top:0px;
}
Here is an image from W3 regarding some default styles of elements:
See more about default styles of elements here on W3.org.
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!