Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
Really simple question;
I have a link in HTML that I need to resize, I have edited the CSS file to create this class:
.redirect {
font-size: 1em;
}
In the main PHP file I have the tag set up as follows ---->
<a class="redirect" href="https://www.irijobs.com"><font color="blue"><< Click here to go back to irijobs.com homepage <<</font></a>
There has been absolutely no change in size... any pointers? I'm sure it's a simple syntax error.
Edit: Most of my styling errors were from the prior developer wrapping CSS in HMTL tags, which was not only unnecessary but confused the browser.
Font size 1em is equal to the current font size. You have to increase the em to see the changes, for example 1.5em or 2em to double the size.
.redirect {
font-size: 1.5em;
}
Do not use <font> tag as it is deprecated since HTML 4. Just do the following and apply any size to font-size:
.redirect {
font-size:1em;
color:blue;
}
<a class="redirect" href="https://www.irijobs.com"><< Click here to go back to irijobs.com homepage << </a>
First, you should change < in << Click here to go back to irijobs.com homepage << to <. It is because browser thinks that < sign starts a new tag, like <a>.
Second, font-size: 1em means that font size is equal to default. 2em is 2 times bigger, and 0.5em is half of original size.
I suggest you to change <font> tag to CSS rule color:blue;. <font> tag is deprecated in favor of CSS color property.
Also, multiple spaces are displayed as single one.
CSS:
.redirect {
font-size: 2em; /* or some another value, may be also in pixels (like 20px) or points (like 16pt)*/
color: blue;
}
HTML:
<a class="redirect" href="https://www.irijobs.com"><< Click here to go back to irijobs.com homepage <<</a>
Related
I have used css to indent every parapgraph in wordpress by 30px. This was going great until I noticed that it also indented my centered aligned text by 30px. That makes this centered text off centered. It's even more noticible when I look at it on mobile and I want the text to be easy and professional to read on the go. So, I want to exclude "text-align:center;" from the 30px indents for every center aligned text.
I don't have access to the entire code of my theme with my wordpress premium account. I can only edit the css using a blank css editor in a menu option. Is this possible without being able to see the whole code?
I have tried looking this up on stackoverflow before posting and using this code...
#article p {
display: block;
text-align:center;
text-indent:0!important;
}
I now know that this "#workskin p.chapter" ID selector will not work because I have not added it to my code because I do not have access to the full themes code.
This is the css code that I am using to make the indents and the only code that I have in my css editor for wordpress "p" paragraph element...
article p {
text-indent: 30px;
}
I could not get any changes in making my indents disappear for the text that was center aligned.
I'd like to make my center aligned text centered with my site and not indented an extra 30px from the center. For example:
Title-centered with no indents
Paragraph one-indented
Paragraph two-indented
Break in paragraph-centered no indents
Paragraph three-indented
Paragraph four-indented
Break in paragraph-centered with no indents...etc
This is the first time I am using css. Usually I have a full theme to look at the code and I am able to make small edits using color# and changing the src of images but that is the extent of my coding knowledge and I'm learning a little more with each google search and comment. This is the last code edit I need on my site and I appreciate everyones comments and help.
The specificity in CSS is in the order of
Type selector(h1, p ,div...) < Class selector(rules with a period .) < ID selector(rules with #) but the rules defined with ! important overrides any other declaration ofcourse ;)
As discussed above if different set of rules are added for a same element i.e rules targeting elements with same specificity then the CSS will use the rules defined later on (i.e the latest one)
Example:
p{
color : red ;
}
p{
color : green ;
}
In this example the color of the text in paragraphs will be green and not red as rule with green color is defined after the red one.
p{
color : red ! important;
}
p{
color : green ;
}
But here because of ! importantis added to red the color of text inside the p will be red.
So in your case you can go with either defining the text-align: center ! important or just define the rules overiding the ones you don't want in the specific p tag but this can be done by defining it's specific CSS rules after the rules for normal p tags
first define the normal or default rules as
article p {
text-indent: 30px;
}
After this add the specific rules
#worskin p .chapter {
display: block;
text-align:center;
text-indent:0;
}
Thanks AuxTaco for your suggestion.
you can put class on the p that you want to exclude from it like:
article p {
text-indent: 30px;
}
// try changing it to this remember exclude is class on p tags you want to exclude
// Dont forget the dot (.) before exclude
// and the !important is after the value
article .exclude {
text-indent: 10px !important; // you put !important here
color: red !important; // like this
padding: 10px !important; // like this
}
MAKE SURE TO MAKE EXCLUDED P UNDER THE NONE EXCLUDED TO REWRITE IT
LOOK AT CODE COMMENTS CAREFULLY
Hope it was hepfull
This question already has answers here:
What's so bad about in-line CSS?
(20 answers)
Closed 6 years ago.
I see this happening more and more often.
I was always taught to keep html, css and javascript separate (with html linking to the sources/scripts of course).
I understand sometimes if you're sending an email then using the style attribute in html is sometimes ok and preferred.
However when constructing a website, or application is it considered bad practice to use the style attribute?
<div style="margin: 0 auto; width: 114px; height: 32px; text-align: center; font-family: arial; padding: 25px; border-radius: 50px; line-height: 32px; background: rgb(46, 154, 255);">Hello world</div>
Yes, it is bad practice. Here are a few reasons:
You cannot reuse css code if it is inline (it only applies to the element it is on) so you land up writing extra code that does the same thing (e.g. you have two paragraphs of text that need to be styled the same - if you use the style attritibute you now have to copy and paste the style for each paragraph.)
Your code will be harder/impossible to maintain - imagine if you had to change the font on your page. If it is declared inline like this it means going to each place to find and change the code.
You cannot easily override the CSS styles. Properties that are declared inline have the second highest priority. The only way to override a property declared inline in a CSS stylesheet is by using the !important keyword.
In a post of mine in wordpress I'm posting source code as described here.
An example of the code goes like this:
[code language="csharp"]
// Code goes here
[/code]
The result looks like this:
What I want to do is change the font size and make it smaller.
I've inspected the element of the code which gives the following:
I've tried adding custom css using the Simple Custom CSS plugin to change the font size but to no avail.
The CSS that I've tried is the following:
code {
font-size: 10px;
}
.csharp plain {
font-size: 10px;
}
.csharp keyword {
font-size: 10px;
}
How can I change the font-size of the code?
Your element seems to be part of the page therefore custom CSS should work. Most probably it is not working as the CSS rules of another stylesheet (probably the WordPress.com default) are stronger or more specific.
Try with the CSS !important rule:
code {
font-size: 10px !important;
}
.csharp plain {
font-size: 10px !important;
}
.csharp keyword {
font-size: 10px !important;
}
If this still does not work use more specific CSS selectors with the important rule.
If this still does not work your custom stylesheet is not applied yet and you have to check your configuration.
You are trying to style elements based on their css classes, but your code doesn't have the "." before their names. Based on the example of the link:
.syntaxhighlighter { font-size: 10px; }
should do the trick.
Changing the font size of your code on WordPress is pretty easy. This is what you need to do.
1. Switch from the Visual tab to the html tab in the editor
2. Surround your codes with these tags:
<pre><code><span style="font-size: small;"> YOUR CODE GOES HERE</span></code></pre>
for example:
That's it.
This was what my code looked like in preview mode BEFORE I used those tags (While I used [language= "java"])
And this is what it looks like AFTER using the tags:
The available font sizes are xx-small, x-small, small, medium, large, x-large, xx-large.
If you are not familiar with html, it is advisable to switch back to the visual tab. Hope this was helpful
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Recently when I right clicked on the cross icon and saw the background image in the Tags section of Ask Question page I saw that it consisted of multiple icons other than the cross. I searched it on google and came to know that its done using html and css. The search results didn't help.
I am new to html and after searching I am introduced to this new language css. This may be a simple question to answer for experts like you but headache for beginners like me. Please I really want to know how its done.
Thanks in advance.
1. Its done using background-image,background-position for an element with set width and height.
See this fiddle(It contains a Facebook Image instead) :
http://jsfiddle.net/axF59/
2. These CSS queries can be solved urself by using Inspect Element. Like you saw the background image by Right Click > View Background Image , in similar way you can see CSS of web page by Right Click > Inspect Element in browsers like Mozilla ,Chrome ...
It's called a spritesheet. You'll find vast of amounts of info, tips and tutorials if you search the internet for spritesheet + js/css
This is done using the CSS background-position and background-image property. It allows all of the sprites to be loaded using a single image.
The background-position CSS property sets the initial position [...] for each defined background image.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Example
HTML
<span class="sprite sprite1"></span>
<span class="sprite sprite2"></span>
<span class="sprite sprite3"></span>
CSS
.sprite {
display: inline-block;
/* Replace this with a live image. */
background-image: url("http://www.example.com/example.jpg");
height: 16px;
width: 16px;
}
.sprite1 {
/* This doesn't actually need to be here, because this is default. */
background-position: 0 0;
}
.sprite2 {
/* Move 16 pixels to the left. */
background-position: -16px 0;
}
.sprite3 {
/* Move 16 pixels up. */
background-position: 0 -16px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to apply styling to just one anchor in a html document. However, I have tried a[title] to try and apply css styling to just that one element, but nothing happens. Why would this not work. I would appreciate some feedback as to how style using this type of format. Thanks
html code
<div class="col_2">
<img src="img/blueman.png" width="70" height="70" class="img_left imgshadow" alt="" />
<p class="newsSpace">Signout</p>
</div>
css code
a[title] {
font-size: 24px;
font-family: Verdana, Geneva, sans-serif;
/* border-bottom:1px solid #777777; */
}
main menu code
#menu li a {
color: #000000;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
outline: 0 none;
text-decoration: none;
}
The selector you've written should work, and indeed as you see from the other comments and answers, it does work when used in isolation.
The most likely reason why your CSS wouldn't work is if something else in your CSS is being applied in preference over it. CSS has a strict order of precedence for selectors, and it would be quite easy to write a selector that was considered higher precedence than a[title].
I suggest taking a look at the element in your browser dev tools (ie Firebug, etc) to determine what styles are being applied to it, and by what selectors.
If I'm right, you will see the a[title] styles are there, but are crossed out because other styles have been applied as well that have higher precedence.
Here's an article that describes the CSS order of precedence.
There are four ways I can suggest to get around this problem:
Adapt your a[title] selector so that it has higher precedence than the other selectors. This would typically mean making it more precise, eg .newsSpace>a[title].
Adapt the other selectors so that they have lower precedence.
Add !important to the end of your styles, to force the browser to give them maximum precedence. (this is the "quick win" option, but should be considered a last resort; using !important typically means you're doing something wrong elsewhere)
Change your HTML to give the element its own class or ID, and use that for your selector instead of a[title].
Hope that helps.
[EDIT]
OP has commented below with an updated fiddle link, and I can now see the problem:
Okay, thanks for the updated link. I can now see #menu li div a[title] in the CSS code.
Looking at the element in question using Chrome Dev Tools (F12), I can see that all the styles for that are being applied successfully to your Signout element. However, the font-size property is being overridden by #menu li:hover div a, which is classed as being more specific due to the :hover.
Since the element is only visible when it's being hovered, the solution would seem to be simple: just add the same :hover property to #menu li div a[title] as is applied to the other selector.
So change it to #menu li:hover div a[title]
Here's your fiddle again, with that simple change made to it: http://jsfiddle.net/TrScN/3/