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.
Related
So I'm not unable to use margin that consists of three texts. I tried adding it both in html and css, none of them worked. Am I supposed to format it in a different way?
.middlelectureread {
margin-left: 740px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 20px;
}
.middlecaptivityread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
.middleprotestread {
margin-left: 210px;
font-family: Arial, Helvetica, sans-serif;
font: bold;
font-size: 30px;
}
<span class="middlelectureread">READ MORE</span><span class="middlecaptivityread">READ MORE</span><span
class="middleprotestread">READ MORE</span>
Like Neffy wrote you shouldn't use span here. Span element is inline and shouldn't be a container to postion elements. For such things we have divs or HTML5 semantic elements like Section, Header, Footer etc. span can be useful when we want to style for example a part of some text, paragraph.
<p>If you do it you will see a <span class="warning">warning</span>sign</p>
And if we apply color to this span it will work.
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>
I uploaded a responsive site I did for a friend that does not render full width on the Index Page whether viewed on a smartphone or tablet.
The lady is doing me a favor as I try to get my name and work known. She has a business she'd like to see grow and we thought the Internet the place to start.
The odd thing is that site's other pages render just fine with proper width and height.
This leads me to believe the problem is with the "#media screen" queries.
I believed the CSS "width" and other properites and values in the full width, non-mobile page's code, would "cascade" down into the smaller mobile queries but added the properties "head," "html, body" and "footer" sections to see if that would improve the situation.
It did not.
The site can be viewed here: www.notaryonwheelsshaver.com
The CSS can be read here: http://www.notaryonwheelsshaver.com/css/nows.css
Any help would be greatly appreciated.
Your first media query (780px) has a typo in html,body -> height: 100%x; That may be interfering with the min-width attribute under it.
I don't know if that will fix it, but it's what I noticed.
I think the issue is in your CSS file:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
/*width: 100%;*/
}
/*width: 100%;*/ is commented out which makes the browser skip the code try changing it to:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
EDIT: You have the width also commented in:
.wrapper {
/*min-width: 100%;*/
min-height: 100%;
}
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.)
New to HTML and CSS and trying to replicate sites to get some practice. I'm having some trouble replicating a section on the airbnb website where it lists the explore, contact and book. For some reason, I float the image to the left and my h3 and p tags should not overlap the image. I've made sure to display the image as a block, but the h3 and p tags overlap and my margins won't work. Not sure what I'm doing wrong.a
Thanks
Here's the css
.feat-box {
background-color: red;
float: left;
margin-top: 20px;
width: 282px;
}
.feat-box h3 {
font-size: 22px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
padding-top: 10px;
}
.feat-box p {
font-size: 17px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
}
.feat-box img {
float: left;
display: block;
}
.feat-box-container {
margin: auto;
width: 900px;
}
Here's my html
<div class="feat-box-container">
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Explore</h3>
<p>Find the perfect place.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Contacts</h3>
<p>Message hosts.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/check-mark.png"/>
<h3>Book</h3>
<p>View your itinerary.</p>
</div>
</div>
Try adding
display:inline
to your
.feat-box p
you might have to play around a little with the margins to get the text to align, but it fixed it for me.
If your learning CSS I'd advice installing firebug, it's an add-on that will help you better understand how CSS works.