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>
Related
I need to target the content of the span but not nested h1 content
Does anyone has an idea of how is that possible?
-down is a simple example:
Thanks
<html>
<div>
<h1>MainTitle <span>SubTitle </span> </h1>
</div>
</html>
If you want to select with CSS, use h1 span {} like this:
h1 span {
color: blue;
font-size: 20px;
}
<html>
<div>
<h1>MainTitle <span>SubTitle </span> </h1>
</div>
</html>
With javascript, I guess you have to add an ID to your span tag. I don't know any other way of doing it. Here is the code to show:
document.getElementById("h1span").style.color = "blue";
document.getElementById("h1span").style.fontSize = "20px";
<html>
<div>
<h1>MainTitle <span id="h1span">SubTitle </span> </h1>
</div>
</html>
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>
I am new to CSS !
I would like to overwrite a span style using external CSS. Any suggestions?
!important did not work for me.
Sample code below.
<div class="abc" id= "xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span> </div>
basically I would like to overwrite the #009530 for the text using a external css.
I tried like below external css. It did not work for me.
#xy {
color: blue !important;
}
TIA
Use following css:
#xy span{
color: blue !important;
}
<div class="abc" id="xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
</div>
<span id="xy" style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
css
#xy
{
color: blue !important;
}
<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>
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.