I want to show "Sentiment analysis" such that S should be much larger then h5 text.
What's wrong with follwing code:
HTML:
<h1>S</h1> <h5>entiment Analysis</h5>
CSS:
h1 {
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
}
h5 {
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
}
Live code in CodePan
That's a messy code. If you just want to make the first letter Bigger, You can try the following.
Working Demo
HTML
<div>Sentiment analysis</div>
CSS
div:first-letter {
font-size:30px;
font-weight:bold;
}
You are trying to align 2 block level elements in the same line, so either you need to make them inline or inline-block by using display: inline; or display: inline-block(recommended) or use <span> element inside your h1 like
<h1><span>H</span>ello</h1>
And than you can target the H using
h1 > span {
font-size: 54px;
}
If you are looking to target only the first letter, it is better, if you use :first-letter pseudo, which will save you an element as well.
Demo
Note: I am using general element selectors here, make sure you use a
class or an id to target the element uniquely.
Use this css rules for proper follow the css rules to render the requirement!
<style>
h1:first-line {
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
font-size:1em;
text-decoration:underline;
white-space: pre;
display:inline;
}
h1:first-letter{
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
font-size:2em;
text-decoration:underline;
white-space: pre;
display:inline;
}
</style>
<h1>Hello</h1>
<h1>World</h1>
h1:first-letter {
font-size: 60px;
}
demo
<style type="text/css">
.style1
{
font-size: 36px;
}
</style>
</head>
<body>
<p>
<span class="style1">S</span>entiment</p>
</body>
Add display:inline to both h1 & h5, Then remove margin-left from h5
DEMO HERE >>
Try this
h1
{
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
display:inline;
}
h5
{
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
display:inline;
}
Your way to implement this seems little complex, even if you want to go with your code you can use my answer, otherwise select any of the simple method in other answers here.
Related
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>
I need to set text is normal in div tag:
._div
{
text-decoration:none;
}
<i>italic<div class="_div">need to unitalic</div></i>
But it's not works. How can I do this?
I think you are looking for
._div
{
font-style: normal;
}
Edit: (comments) Since you can't override the line-through of the s tag you can make it look like you are overriding it
<!DOCTYPE html>
<html>
<body>
<style>
s {display: inline-block; position: relative; width: 100%;}
s ._div
{
text-decoration:none ;
position: absolute;
display: inline-block;
margin-left: 5px;
}
</style>
<s>line-through <span class="_div">need to un-line-through</span></s>
</body>
</html>
you will need to adjust this to your layout (e.g width)
if you use s tag u need add
<style>
s{
text-decoration : none !important;
}
</style>
Try this.
._italics {
font-style:italic;
}
<span class="_italics">italic</span> <div> need to unitalic </div>
If you want a striked text change the contents of class to
text-decoration:line-through
I have title in h2, left and right is defined hr.
I can't position hr to be towards the middle of h2.
On JSfiddle looks good, but in my case looks like this
http://i.imgur.com/MdsekCI.png
I tried to write vertical-align:middle, but hr goes down, and I deleted.
HTML
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<hr class="hrtitle"/><h2 class="fontraleway">WHO WE ARE?</h2><hr class="hrtitle"/>
CSS
.fontraleway{
font-family: 'Raleway', sans-serif;
}
h2{
text-align:center;
margin-top: 60px;
margin-bottom: 20px;
font-weight: 300;
color:#333434;
display: inline-block;
}
.hrtitle{
display: inline-block;
height: 1px;
background-color:#3eb8df;
border:none;
width:30px;
}
Code on JSFIDDLE
http://jsfiddle.net/x86o57rc/
I have the following css that is used to make one link coloured but it applies to all of the links I have. Is there any way to stop this.
This is my css that is getting applied to the links:
a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #CCC;
text-decoration: none;
background-color: #C00;
display: block;
border-radius: 5px;
z-index:10;
}
This is the link that it is suppose to get applied to:
<td>Food</td>
This is the link that I don’t want it to get applied to:
<td class="footer"><b>Top Attractions</b>
You could select your a tag by the href like this:
JSFiddle - DEMO
a[href="Food.html"] {
color: red;
}
Updated: DEMO (with your codes)
Working JSfiddle: demo
I gave the link you wanted to style a class and gave the class a style.
a.food :visited
instead of a:visited
Try this
HTML
<td><a href="Food.html" class="colored>Food</a></td>
CSS
.colored{
color:red;
}
One thing you could do, would be to give the tag an id/class and then refer to that in your css.
You could add a class to the link you want different and style it separately.
HTML:
<td class="footer"><b>Top Attractions</b>
CSS:
a.rides {...}
Apply a class to the links you want to effect:
<a href='food.html' class='apply_to_this'>Food</a>
Then in your CSS:
a:link.apply_to_this{
// your styles
}
You can add a class to the links you wan't to apply this rule, or you can use this rule :
a:not(.footer):link {...}
Rather than stopping it being applied to one link, you need to add a class to that link with additional CSS that overrides the styles you want to change, or (though this is bad practice...) use inline styles on that one link.
Proper solution:
In your CSS
.exception {put css here that will override the general link css, using !important to override it ifnecessary}
In your html
Content here
Quick and dirty solution
Content
Though this way will work, it is rightly frowned upon for accessibility issues.
You can just create a class and apply it to that link like mentioned above or you can just follow through your selectors to tell CSS to apply that link code to only a:links within those selectors like I've posted below:
#mainContainer #footer #etc #etc a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
PS - Inline styles are very bad practice. It adds tons of extra code that will reduce your rankings for Google, Yahoo, MSN, etc. Not to mention it makes code harder to read and more clunky.
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.