I need to set space for each line <br> tag is taking huge.
<font color="white">
ani <br> </br>
hna <br> </br>
Raj <br> </br>
Parya <br> </br>
Sith <br> </br>
Sududa <br> </br>
</font>
Why don't you use <p> tags for each line instead of double <br>s? Or use an <ul>? You'll have more control over the layout.
But if you must use <br> use line-height and only one <br> for each line.
It seems to me that you are trying to close each <br> tag, this isn't possible and instead you are creating two line breaks. Remove one of these and you'll get normal line breaks:
http://jsfiddle.net/LMXNY/
http://jsfiddle.net/QFHPh/
<html>
<head>
<style>
p {
line-height: 1.5em;
}
</style>
</head>
<body>
<p>
this is <br />
a test<br />
of good text spacing
</p>
</body>
</html>
<pre style="color:white">
ani
hna
Raj
Parya
Sith
Sududa
</pre>
By golly, if it looks like a list and acts like a list, it may in fact be a list! Change the bottom margin for the list item to change the spacing between items.
<style type="text/css">
ul {
color: white;
}
li {
margin-bottom: 6px;
}
</style>
<ul>
<li>ani</li>
<li>hna</li>
<li>Raj</li>
<li>Parya</li>
<li>Sith</li>
<li>Sududa</li>
</ul>
You could use line-height property in your CSS.
First thing,
you don't use
<br> </br>
It is only:
<br />
Then on your problem, use the following
<p style="line-height: 20px;">ani
</p><p style="line-height: 20px;">hna
</p><p style="line-height: 20px;">Raj
</p><p style="line-height: 20px;">Parya
</p><p style="line-height: 20px;">Sith
</p><p style="line-height: 20px;">Sududa
</p>
Increase/decrease the number in line-height ('20'px), to increase/decrease the space between the lines respectively.
Related
How browser shows "my" code
<html>
<head>
<title> chatter|app </title>
<style>
.styled_dates {
font-size: 11px;
}
</style>
</head>>
<body>
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p> <strong>Neversea</strong> <p class="styled_dates"> 11/07/2022 </p>
<p> <strong>Deutschland</strong> <p class="styled_dates"> 23/05/2019 </p>
<p> <strong>Erasmus</strong> <p class="styled_dates"> 23/06/1999 </p>
<p> <strong>Work</strong> <p class="styled_dates"> 04/07/2003 </p>
<h2> Regular </h2>>
</body>
</html>
Hello. Noobie here.
What I want to do: see the dates next to "Neversea, Deutschland, Erasmus, Work", not underneath them.
Neversea 11 07/2022
not...
Neversea
11/07/2022
How can I do that?
Thank you
The issue is that <p> tags by default follow onto the next line. Also you have unclosed tags (each line you open 2 and only close 1)
In my code I use <span> elements, they are made for in-line styling/changes which seems appropriate for your use case.
.styled_dates {
font-size: 11px;
}
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p>
<strong>Neversea</strong>
<span class="styled_dates">11/07/2022</span>
</p>
<p>
<strong>Deutschland</strong>
<span class="styled_dates">23/05/2019</span>
</p>
<p>
<strong>Erasmus</strong>
<span class="styled_dates">23/06/1999</span>
</p>
<p>
<strong>Work</strong>
<span class="styled_dates">04/07/2003</span>
</p>
<h2> Regular </h2>
I want to show the English sentence and its RTL language translation like this:
When I try to achieve it using this code:
<section>
<h3>I <span style="color: #42affa;">would</span> like a cup of coffee, please.</h3>
<p style="text-align: right;" class='farsi'>«لطفا یک فنجان قهوه لطف کنید.»</p>
</section>
I get this result:
I think I need to get the end of the English text element and start the position of translation text right there!
Any suggestions would be appreciated...
Note: the English sentence aligned to the center.
UPDATE: using code below:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span>
like a cup of coffee, please.
</h3>
<p style="direction:rtl" class="farsi">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>
I get this:
I would recommend using display:flex with justify-content: center on the section element. Then simply wrap the english and farsi text in a div. Align the english text to the right, and set the direction of the farsi text to rtl.
Something like this should work:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span> like a cup of coffee, please.
</h3>
<p style="direction:rtl">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>
Try the below code, which will work properly.
HTML
<p>
I would like a cup of coffee, please.
<br>
<span lang="fa">«لطفا یک فنجان قهوه لطف کنید.»</span>
</p>
CSS
p {
display: inline-block;
background: #181818;
padding: 20px;
color: #fff;
font-size: 24px;
}
span[lang="fa"] {
direction: rtl;
float: right;
display: inline-block;
}
I want to increase C and I . I also use ::first-text{}. It works Now, how can i increase I.
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
</style>
<span class="a">Creating</span> <span>and</span> <span>Implementing</span>
</p>
</center>
Its very simple, You have to change you p tags like
<p>
<span class="highlight-first-letter"><b style="font-size:20px;">C</b>reating</span> <span>and</span> <span class="highlight-first-letter"><b style="font-size:20px;">I</b>mplementing</span>
</p>
your output is look like
I'm not sure about first-text, but first-letter should work for the C.
For the I, you would have to wrap it in a span and give it a class unfortunately.
https://caniuse.com/#feat=css-first-letter
--Update--
I'm not sure if you aware, but style tags are not 'scoped'. This means that all <p> tags will have their first letters increased, is this what you want?
Also, the center tag is deprecated and should not be used.
<style>
p{
text-align: center;
font-size: 32px;
color: #424242;
margin-top: 15px;
font-family:Rockwell;
}
.highlight-first-letter::first-letter{
font-size:40px;
display: inline-block;
}
</style>
<p>
<span class="highlight-first-letter">Creating</span> <span>and</span> <span class="highlight-first-letter">Implementing</span>
</p>
i have done it with jquery it can be achieved also in javascript bydocument.getelementbyid
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=o>c js isj kl</div>
<script>
var txt = $('#o').text();
var new_text = txt.replace(/i/gi, 'I') ;
$('#o').text(new_text.replace(/c/gi,'C'));
</script>
after your update i havev found that in css
introduce span in between your text
<p>Creating and Implementing</p>
<center>
<p style="font-size: 32px;color: #424242;margin-top: 15px;font-family:Rockwell; ">
<style>
p::first-letter{
font-size:40px;
}
.l::first-letter{
font-size:40px
}
</style>
<span class="a">Creating</span> <span>and</span> <span class=l>Implementing</span>
</p>
</center>
Hey so im making a website for ICT class for hmk and basically i want "R A S T A" printed accross the front page how would you recommend going about this problem?
<P class="sans" align="center"> <font size="80" color="#009900" >R</p> </font>
<p class="sans" align="center"> <font size="80" color="#ffff00" >A </p> </font>
<p class="sans" align="center"> <font size="80" color="#ff0000" >S </p> </font>
<p class="sans" align="center"> <font size="80" color="#009900" >T </p> </font>
<p class="sans" align="center"> <font size="80" color="#ffff00" >A </p> </font>
I tried to understand your question but it is hard to visualize exactly what you want. So I'll just clean and update your code (i.e. bring it into the 21st Century).
Please don't use the <font> tag or the align attribute anymore. It's 2016.
If this is a heading, use <h1>, not <p>.
Tags work like parentheses in math. Close the inner before the outer:
<strong><em>this is correct.</em></strong>
<strong><em>this is incorrect.</strong></em>
Learn CSS. It saves you from repeating a lot of code and it's just the right thing to do.
<style>
/* this is CSS */
.page-heading {
font-size: 80px;
}
.letter1, .letter4 { color: #009900; }
.letter2, .letter5 { color: #ffff00; }
.letter3 { color: #ff0000; }
</style>
<h1 class="page-heading">
<span class="letter1 sans">R</span>
<span class="letter2 sans">A</span>
<span class="letter3 sans">S</span>
<span class="letter4 sans">T</span>
<span class="letter5 sans">A</span>
</h1>
If class .sans is what I think it is (font-family: sans-serif), and its properties are all inherited (as indeed font-family is) then you don't need to apply it to each span; you can apply it to the entire heading. Each span will inherit it from the heading. Again, this only works if all the properties in .sans are inherited.
<h1 class="page-heading sans">
<span class="letter1">R</span>
<span class="letter2">A</span>
<span class="letter3">S</span>
<span class="letter4">T</span>
<span class="letter5">A</span>
</h1>
Alternate solution: Use all descriptive CSS classes. Recommended only for very advanced CSS authors.
(This method reduces CSS size, however design changes must be reflected in the HTML, not the CSS. When first learning CSS you're better off with the method above.)
<style>
.fz-80 { font-size: 80px; }
.c-green { color: #009900; }
.c-yellow { color: #ffff00; }
.c-red { color: #ff0000; }
</style>
<h1 class="sans fz-80">
<span class="c-green">R</span>
<span class="c-yellow">A</span>
<span class="c-red">S</span>
<span class="c-green">T</span>
<span class="c-yellow">A</span>
</h1>
<html>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color=green>Green</font>
<BR>
<font color= rgb(255,255,0)>Gold</font>
</body>
</html>
From the code above I am trying to use different ways to change the font color. The first 2 ways work perfectly (in hex and the actual name); but the third one in RGB format is not displayed correct. What is the error in there?
style="color:rgb(255,255,0)". The font tag is deprecated and inline style should also be avoided. Don't forget your double quotes on attribute names: attr="value" not attr=value
This would be best done in CSS using a target class:
<p class="my-class">Some text</p>
In your css file:
.my-class {
color: rgb(255,255,0);
}
The tag is also not to be used for layout. It should only be used for new-lines in text. Instead, use display: block on the elements that should be on a new line.
Here's a complete sample: (note that <p> tags have display: block by default)
<p class="red-text">Red</p>
<p class="green-text">Green</p>
<p class="gold-text">Gold</p>
CSS:
.red-text {
color: #FF0000;
}
.green-text {
color: green;
}
.gold-text {
color: rgb(255,255,0);
}
Live demo (click).
How about this?
<style>
.red{
color: #FF0000;
}
</style>
HTML Tag:
<div class="red" >Red</div>
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font> (it's look right).
<BR>
<font color=green>Green</font>(wrong).
<BR>
<font color= rgb(255,255,0)>Gold</font>(wrong).
</body>
</html>
modified
<html>
<head>
<title>webpage name</title>
</head>
<body>
<font color="#FF0000">Red</font>
<BR>
<font color="green">Green</font>
<BR>
<font color="rgb(255,255,0)">Gold</font>
</body>
</html>