On this page: https://www.nycofficesuites.com/new/offices/, I want to change the font size on red bar across the top (where it says "Office Space"). I've entered this code but it's not working.
.page-title h1 {
font-size: 35px !important;
}
Thanks!
If you can't update the existing rule, your new rule will need to appear after the existing rule as they are both marked as "!important".
The existing rule is showing in "custom.css":
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
In custom.css you have,
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
Either edit that file or add/load your overriding css after custom.css (order of load matters, the last one is considered).
Side note: Try to avoid using !important as much as you can.
If this is something you are just messing with you can declare it inline.
<h1 style="font-size: 35px !important;">Office Space</h1>
Or
.header {
font-size:35px;
font-weight:bold;
font-family: 'Pontano Sans', Arial, sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
<span class="header">Office Space</span>
Just figured this out, thanks for your help everyone. The person who wrote the theme put this in a file called custom.css.php. So this was overriding the place where I was entering CSS. (This is a Wordpress site.)
Related
.navbar-brand{
font-weight: bold;
font-family: "Ubuntu";
font-size: 2.5rem;
}
<a class="navbar-brand" href="">tindog</a>
So this is how I try to change the font-size for my link through a certain class and I came across something strange that everything has changed whether it is font-family or font-weight which means that I define the class in index.html correctly and in the css file I am doing it right!!
But the size does not change, someone explain to me what could be the problem.
THANKS!!
I tested your code and there is nothing wrong with it. Try to change the font size using pixels instead.
.navbar-brand {
font-weight: bold;
font-family: "Ubuntu";
font-size: 40px;
}
Since 1rem = 16px.
Try this code:
.navbar-brand{
font-weight: bold;
font-family: "Ubuntu";
font-size: 2.5rem !important;
}
I want to change the font/font-color/font-size of an html page. I have converted the css file to a string using String(contentsOfFile). Can I use regEx or something similar to edit the css data. Here is a sample of the css file
.calibre {
color: #000;
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
text-align: justify
}
I have also tried converting this string(of Css file) to a Dictionary using ESCssParser. However, when I convert that dictionary(after changing the font size) to a string, the formatting is different. An example of a difference is that #idSelector would become "#idSelector". I am in the assumption that these changes will affect the css file. Am I wrong?
Is there any other approach I can take to edit the Css file?
Thanks!
It would be better if you changed a class in your html rather than try to change lots of entries in your css.
For example if you laid out your html like this:
<body>
<div id="wrapper" class="med">
<p class="calibre">Lorem Ipsum</p>
<!--rest of html-->
</div>
</body>
You could change the class in the #wrapperelement in your backend code and then use css to determine the style for the page, like this:
.calibre {
color: #000;
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
text-align: justify
}
#wrapper.small .calibre{
font-size: 0.8em;
}
#wrapper.large .calibre{
font-size: 1.4em;
}
In the above example there is no specific class for med, so the default will be used (1em). If you were to make the wrapper have the class small or large instead of med, calibre would still have all the same properties except the font-size would change to 0.8em in the case of small and 1.4em in the case of large.
Here's an example with jquery taking the place of your backend code.
I am attempting to make my site responsive, I give my heading text 15px of padding however if the text stretches onto a new line the next line doesn't get the correct padding on the left side. Is it possible to make the text align?
Here is a screenshot of the text.
Here is the CSS i'm using.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
}
and my html element is
<span class="article_title">Building Refurbishment and Modernisation</span>
span is an inline element, which means the left padding is not applied to it.
Just add the display: block; to the CSS code and it should work fine.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
display:block
}
The display:block should do the trick. Notice I have also changed the line-height to 15.
you can just add display:table; and remove line-height for responsive layout.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #666;
font-weight: bold;
padding: 15px;
display: table;
}
http://jsfiddle.net/oapu11q4/28/
Just change the span to div. Using a span while forcing it to be a block element is counter-intuitive.
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!