I have a div that opens like this:
<div class='gf_browser_chrome gform_wrapper' id='gform_wrapper_8' >
I added this code to the css file:
.gform_wrapper_8
{
border-style:solid;
border-width:1px;
text-color: black;
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
}
.gform_wrapper_8 h3
{
font-weight: normal; <!-- #lighter -->
text-color: black;
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
}
But I don't see any change in the HTML page for that div. Did I do something incorrectly? Or does the css look right?
Thank you!
In CSS, you select a class with the period (.) and IDs with the pound sign (#).
So change:
.gform_wrapper_8
to:
#gform_wrapper_8
since .gform_wrapper_8 is your element's ID, not the class. To style it via the class, use .gf_browser_chrome gform_wrapper
jsFiddle example
"gform_wrapper_8" is the ID, so in the CSS it should be
#gform_wrapper_8
not
.gform_wrapper_8
# is for ID, . is for class
#gform_wrapper_8{
border-style:solid;
border-width:1px;
text-color: black;
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
}
#gform_wrapper_8 h3{
font-weight: normal; <!-- #lighter -->
text-color: black;
font-family: "Century Gothic",Helvetica,Arial,sans-serif;
}
CSS selectors
gform_wrapper_8 is an id, so you should use
#gform_wrapper_8
instead of
.gform_wrapper_8
(which is only for class)
Related
I want to use in my css different titles/headers, with the same font but with different font size, etc. I have this:
#titulo1{
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Now I want to use some titles to some divs and others to anothers.
Like this:
.slogan #titulo1{
...
}
.pesquisa #titulo3{
...
}
But it doesn't work, I can only make it work by using it in my html file like this:
<div class="slogan" id="titulo1">
Yeah, I had already visited this page:http://www.w3schools.com/cssref/css_selectors.asp and still nothing
You can use selector that select all elements that id starts with "titulo"
[id^="titulo"] {
font-family: 'Roboto', sans-serif;
}
#titulo1{
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Definition .slogan #titulo1 has no sense, because id is unique identifier, so #titulo1 means the same.
anyway selector of particular element with several classes, e.g. <div class="class1 class2"> will look .class1.class2 (without space between class names) or div.class1.class2
Its the space in the css, that makes it difficult . Lets see :
Notice this:
.slogan #titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan">
<div id="titulo1">
</div>
</div>
Now Notice this:
.slogan#titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan" id="titulo1">
</div>
Did you notice the space in the css, if you put an space that mean they are in different element
Use The following. Hope your problem will be solved :)
<div class="slogan">
<div id="titulo1">
--------
--------
</div>
</div>
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; }
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 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 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!