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>
Related
I am currently building my first webpage using a custom font from the CSS. This looks like this:
#font-face {
font-family: "Baiti";
src: url("./fonts/baiti.ttf");
}
body { font-family: "Baiti", serif }
.navbar
{
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.container{
width:900px;
margin:auto;
}
.box-2 /*targeting class from HTML*/
{
border:8px dotted #ccc;
}
I am now putting some text into my page. Some is inside a table while other is outside of a table:
<html>
<head>
<title>innomotion media</title>
<!--reference CSS file, will only affect CSS PART, HTML comes first-->
<link rel="stylesheet"
type"text/css"
href="styles.css">
</head>
<body>
<!--NavBar-->
<div class="navbar">
Contact
What we do
Who we are
Home
</div>
<!--Heading-->
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
</div>
</body>
</html>
But the result looks like this:
So, if my eyes aren't deceiving me, both texts don't look the same, or do they? To me, the one inside the table seems to be "bolder" or "bigger" in a way? or maybe even a bit darker. However, this cannot be from the HTML code I wrote, or am I just blind here?
The problem is that you are using a th tag, which applies the style font-weight:bold (in my browser at least, and presumably yours).
One simple solution is to add a css rule to override this browser default. A better solution is probably to change the ths (table header) to tds (table cell).
I was able to find this problem by copying your html into the stack editor, then right clicking on the bold text, choosing Inspect, then going to computed properties and looking at the applied properties. I suggest you get comfortable with the inspector; it's invaluable in debugging webpage problems.
th {
font-weight:normal;
}
<div class="container"> <!--width set in css-->
<div align="center" style="padding-top: 50px">
<img
src="./img/banner_top.jpg"
width=100%
</img>
</div>
<div align="center" style="padding-top: 10px" >
<font color="#534f4f" size="+1">
<h1>Hello, friend.</h1>
</font>
</div>
<div align="justify">
<font color="#534f4f" size="+2" >
<p>We here at innomotion media, a young start up located in the heart of Hamburgs' city, will get your own app or (mobile) game going live in no time!
We offer you the cheapest but also the quickest way of getting your app or game finished and monetized.
Sit back and relax while we do all the work for you. Or get involved and create your own assets for us to use and therefore
shorten developement time. Our plans offer 100% flexibility, so that we will tailor the perfect plan for your individual needs.
</p>
</font>
</div>
<div align="center" class="box-2">
<div align="center>
<font color="#534f4f" size="+1">
<h1>Who we are</h1>
</font>
</div>
<div style="padding-left: 15px; padding-right: 15px">
<table border="0">
<tr> <!--tablerow-->
<th width=400px>
<div align="center">
<img
src="./img/me.png"
width=60%
</img>
</div>
</th>
<th width=400px>
<div align="justify">
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</div>
</th>
</rt> <!--for padding-->
<tr height=20px/>
</rt>
</table>
</div>
</div>
If you use the dev tools in Chrome to inspect the element, you will see that the font-weight is being inherited from the th cell. You should not be using table headers this way.
I would strongly recommend against using table-based layouts in modern web development, but in this instance, you should be putting your header on one row and move your image and paragraph to a new row, using proper td table cells.
[Edit]
To elaborate further, tables are the old way to achieve a small part of what the modern grid properties achieve. To achieve the desired layout, you will need to use two rows, the first of which should span both columns:
.center{
text-align:center;
}
<table border="0">
<tr>
<th colspan=2>
<h1>Julius Tolksdorf</h1>
</th>
</tr>
<tr>
<td class="center">
<img
src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
width=60%
/>
</td>
<td class="center">
<font color="#534f4f" size="+2" >
<p>CEO of innomotion media and head of software developement.
<br>
He will be your primary contact during the planning and developement processes.
Julius has already finished about 20 apps & games and has years of experience being an Android developer.
</p>
</font>
</td>
</tr>
</table>
You are applying size = "+2" to all the text and not just the title
Change this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
</font>
To this:
<font color="#534f4f" size="+2" >
<h3>Julius Tolksdorf</h3>
</font>
<p>CEO of innomotion media and head of software developement.<br> He will be your primary contact during the planning and developement processes. Julius has already finished about 20 apps & games and has years of experience being an Android developer.</p>
Also, check class="box-2" which is assigned only to the first text
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>
Hello i am new for css and html.. I need to remove the space between body and footer. Any help ?
I want to add an image at the same lines with paragraph
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neotic</title>
</head>
<body>
<div>
<center><img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" ></center>
<center> <font face="Arial" size="14.18" color=" #587974" >Beat the markets with AI </font></center>
</div>
</br>
</br>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
</br>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
</body>
Okay. Fist of all... Please give all of your code and use up-to-date HTML5 code...
Using the poorly written code you provided, I made a JSFiddle.
<div class="well">
<center> <p class="text-muted" style="color:#EDEDED; font-family: Arial; font-size:+2" >©2017 Neotic. All rights reserved </p> </center>
</div>
</footer>
the div with the class well had a height of who knows what, so when I set the background color and the height at 20px, I came out with a result just like your picture.
PS: I removed the outdated center tags and added a text-align:; to the div style. I also fixed your </br> tags which were incorrect and reset them to <br/>. I also added missing starting elements like <footer> because of the </footer> in your code. Thanks to James and j08691 who pointed out that the <font> tags are also outdated. I fixed your code, but next time please check your HTML for outdated tags.
<title>Neotic</title>
<body>
<div>
<img src="{{STATIC_URL}}Neoticlogo.png" height="200" width="400" alt="Logo" style>
<h1 style="text-align: center;">
<font face="Arial" size="14.18" color=" #587974">Beat the markets with AI </font>
</h1>
</div>
<br/>
<br/>
<div class='row' style="background: #3CB371" >
<div class="col-lg-4">
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> Neotic is a trading support platform, that allows traders to test trading strategies and provides related trading recommendations leveraging artificial intelligence, without writing a single line of code.</p>
<br/>
<p style=" color:#EDEDED; font-family: Arial; font-size:+9; padding-left: 90px; width:400px" align="justify"> The artificial intelligence is based on a machine learning algorithm that incorporates corporate fundamentals, historical prices and financial news</p>
<b> <p style=" color:#EDEDED; font-family: Arial; font-size:+10; padding-left: 90px; width:400px" align="justify"> We are upgrading our services and revamping our brand</p> </b>
</div>
<footer>
<div style="background-color:#333; height:20px;">
<p style="font-family: Arial; font-size:+2; text-align:center;color:#fff;" >©2017 Neotic. All rights reserved </p>
</div>
</footer>
I don't know how to make text indent in my capitation in second line in html. I tried giving hardcoded whitespaces but in next in my HTML document they appear as grey field.
<capitation>
<span style="font-weight: bold; font-size: 12px;">xxx</span>
<span style="font-size: 12px;">YYYY</span>
<span style="font-weight: bold;font-size: 12px;">YYYYY</span>
<span style="font-size: 12px">YYYYY</span>
<br>
<span style="font-size: 12px "> XXXXXX</span>
<span style="font-weight: bold;font-size: 12px;"> xxxxxxxx</span>
<span style="font-size: 12px;">XXXXXXX</span>
<br>
<br>
</capitation>
Its appears as
XXXX! YYYY
ZZZZ
and I want
XXXXX! YYYYYY
ZZZZZZ
This code is a bit naff mate.
Inline CSS everywhere and so on.
It's not how I would write it. But you could use padding-left.
Jsfiddle:
http://jsfiddle.net/ev88su57/1/
<capitation>
<span class="bold">xxx</span>
<span>YYYY</span>
<span class="bold">YYYYY</span>
<span>YYYYY</span>
<br>
<span class="indent"> XXXXXX</span>
<span class="bold"> xxxxxxxx</span>
<span>XXXXXXX</span>
<br>
</capitation>
CSS:
.indent { text-indent:-2em;margin-left:2em; }
capitation span {font-size:.8em;}
.bold { font-weight:bold; }
You can use margin-left for this:
<span style="font-size: 12px; margin-left: 5em;">ZZZZZ</span>
Note: If you want the same font size, wrap the span elements in a div:
<div style="font-size: 12px;"><span ...></div>
since the children of the div inherit its styles.
I solved it
putted tab at start and after new line
<capitation>
<span class="bold"> xxx</span>
<span>YYYY</span>
<span class="bold">YYYYY</span>
<span>YYYYY</span>
<br>
<span class="indent"> XXXXXX</span>
<span class="bold"> xxxxxxxx</span>
<span>XXXXXXX</span>
<br>
</capitation>
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.