I am trying to combine some of my CSS and it is kind of an easy questions but I am kind of having some trouble, i have this code:
h2.post-title, h2.post-title a{
display:block;
background-color:#000;
padding:3px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font:lighter 130% Georgia, Arial;
}
Do I need to have both of those selectors there? The only time I will be using the h2.post-title it will be a link. Any suggestions, I tried removing the first one, but it made it HUGE.
Thoughts?
If you remove the h2 font styling, it will revert to its default font size which is pretty big. You could set it up separately:
h2.post-title {
font-size:130%;
}
But it will take up more space than simply setting both selectors to the same style. My advice — leave it as it is unless you have a good reason to change it.
The thing is that "h2.post-title a" only applyes to the <a>-element of your code. The browser uses standard css on the <h2>-tag!
Lets have a look on your HTML:
<h2 class="post-title">Clickable title</h2>
You need rules to both the <h2> and the <a>-tag. To do that, you need do include both h2 and a in the stylesheet (as you described).
A solution might be to remove the default styling of <h2>, by some of the many reset css-rules you'll find on the Internet.
An other solution would be to move the class-spesification from "h2" over to "a" (and style just the "a.post-title" attribute in CSS):
<h2><a class="post-title" href="#">Clickable title</a></h2>
Or maybe you can remove the <h2>-tag completely, just print out <a>. But this might break your semantic.
Related
This question is haunting in my brain for a long time. Seem like all glyph icon libraries provide icon by this way, such as Font Awesome. Is this the only way to put glyph in css? or is this the best way?
a:before {
font-family: FontAwesome;
content: "\f095";
}
I feel this question can be divided into two separate ones:
Why use fonts for icons?
Why use :before pseudo-elements to display them?
For the first part, reasons are many, but it boils down to being easy to work with (as they are vectors, have transparent backgrounds by nature, can change colours easily) and had very good support even on older browsers.
For the second part, using pseudo-elements means that your icons can fully "live" in your CSS file. Apart from it being easier to edit there, that's also where they belong - they are not part of your content, but are rather something that affects the appearance of it and thus shouldn't be in your HTML. Think of it as the same distinction as between img tag and background-image CSS property (once again - design vs content).
In addition, this prevents some strange side-effects, for example, pseudo-elements can't be selected and thus can't be copied. If this weren't the case, all icons would, when copied, result in strange characters in the destination where you copy them.
You can also use them as 'i' tags. we can apply much more creative css that way. Here's a codepen:
http://codepen.io/anon/pen/gLdYqj
<script src="https://use.fontawesome.com/2d1d8af5b4.js"></script>
<div><i class="fa fa-user"></i></div>
div{
font-size:50px;
}
i{
color:blue;
}
i:hover{
color:red;
cursor:pointer;
}
EDIT #3, and finall:
Ok, so i actually made it happend. Idiotically, however. In case someone will need the same, i'll post a solution here:
What i've did is, basically defined the global style as below:
a:link,a:visited
{
color:#000000;
text-decoration:none;
}
a:hover,a:active
{
color:#000000;
text-decoration:none;
}
That was the very basic parameters i could insert at the global style. The next move is makin' the same inside the link and customize it for ur need as like as u want, hover, make sure u're doin' the copy of that customization of ur div, and insert the :hover thing into it, as following:
.some-div-cutomization
{
text-decoration:none!important;
blabla
}
.some-div-cutomization:hover
{
text-decoration:none!important;
blabla
edit if needed the hover function
}
That's about it. Have fun :)
I've got some source links, that i can't touch, even to insert the class element, so i would be able to change the style of the links, but i do need somehow to change they style.
So, let's say tag of this link would be [link][/link], so what i did is, put inside it div element with full customization and it's worked, however there's two moments:
1) I don't really know if it's may work properly on all browsers, 'cause i need it cross-browser version actually.
2) i can't get rid of the text-decoration line. i've tried text-decoration with none, and even mad a copy style of that specific div with :hover and put inside it text-decoration none, and still, it's not working.
Also, if there's some another trick to avoid such a thing, please share.
EDIT:
I've tried all below, didn't work as i wanted to. BUT, i've made it, but with very, very ugly coding, and i'm not sure it's goin' to work at all browsers:
I've inserted the link-element with underline none inside the one() i can't touch, so now it's link inside another link, witch very ugly.
[link-i-cant-touch]<div class="style_test"><a id="no-textdecoration" href="#">somecooltext</a></div>[/link-i-cant-touch]
.style_test
{
text-decoration:none!important;
font-family: 'qsc';
text-align:left;
padding-top:0px;
color:#000000;
}
#no-textdecoration{
text-decoration:none!important;
color:#000000;
}
#no-textdecoration:hover{
text-decoration:none!important;
color:#1982d1;
}
EDIT Num2
That didn't work as well, because the link is changed to the second one, so it's redirect for "#"... :/
Make sure you target the a tag for the text-decoration, rather than applying it to the div
.my-div-class a { text-decoration: none; }
I don't know what you did wrong, as you haven't posted any code.
But this is the correct way of removing text-decoration on links.
HTML:
Link with text decoration
<a id="no-textdecoration" href="#">Link without text decoration</a>
CSS:
#no-textdecoration {
text-decoration:none;
}
Output: (In image format)
JSFiddle demo: Removing text-decoration from a link
There is a weird gap appearing between the elements here. I would prefer to have them flush together. Any idea how to fix this?
LINK
That's because you haven't provided any css for the tags h1,p. So, browser is adding default margin bottom and top. So, add this to css -
p, h1 { margin: 0 }
It's because you haven't styled those elements which leave it up to the browser to decide. Chrome for instance decide to input margins on the p-element.
p { ...
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
... }
Use a css reset file and you will both fix this particular problem but problably many many similair situations in your future as a web developer.
It is a margin/padding issue as stated by others. What I suggest if you are just getting started and haven't developed any habits yet is to always include a reset.css file. This will get rid of all the browser defaults and allow you to start fresh.
fixes for inline elements are:
vertical-align:top;
or
vertical-align:middle;
display:block;
for images
I found my mysterious white spaces.
Don't do this:
echo "<div>
blah blah blah
</div>"
Instead:
echo "<div>"
."blah blah blah"
."</div>";
Just clean up your code of whitespaces.
I am not quite sure, as to which kind of /gap/ you are referring, but a simple CSS rule like margin:0; padding:0; might help you out.
It's a good idea to use a CSS reset file, like the one you can find on YUI:
http://developer.yahoo.com/yui/reset/
If you do end up using the YUI CSS Reset, make sure you set your background color on the HTML tag as well since YUI's CSS Reset turns it white.
html {
background:black;
}
body {
margin: 0px;
font-family: helvetica;
background: black;
}
I'm not sure what to call this, but basically let's say I have a style that I use a lot,
.somepattern{
font-size:16px;
font-weight:bold;
border:2px solid red;
}
but sometime I want to change the font-size and the color for border. Is it possible to treat this code as a library, where I can set the style to a div
<div class="somepattern">Text</div>
but still control the 16px and red like we do with functions?
I know I'm late to the party but the selected answer IS NOT the right answer since it's deferring it to CSS preprocessors.
To answer the specific question "Do CSS functions exist?", the answer is: Yes.
However, CSS functions work completely different than the OP's concept initially is.
cuixiping's answer seems the most correct answer.
Examples of CSS functions are:
url()
attr()
calc()
rotate()
scale()
linear-gradient()
sepia()
grayscale()
translate()
A detailed, comprehensive list can be found here:
CSS functions on MDN Updated link 18/9/20
You can't programatically control CSS from your markup, but you can use one of the many CSS extensions to make CSS work more like a compiled language.
http://lesscss.org/
http://sass-lang.com/
If we wrote your example in LESS, we'd get something like this:
.somepattern(#color: red, #size: 16px) {
font-size:#size;
font-weight:bold;
border:2px solid #color;
}
And then you could use it in your LESS file like so:
.myclass {
.somepattern(green, 20px);
}
Nope. No CSS functionality like you require. At least not directly.
But there are at least two rather generic ways for you to use to accomplish what you need:
Class combining
You can of course combine as many classes as you like in any element like:
<div class="heading run-in">
Some heading
</div>
Lorem ipsum dolor sit amet...
and you'd have CSS defined as:
.heading {
color: #999;
font-size: 16pt;
font-weight: bold;
border-bottom: 2px solid red;
display: block;
margin: 1.5em 0 .5em;
}
.run-in {
display: inline;
margin: 0;
font-size: 1em;
}
LESS CSS
And there is of course LESS CSS project that lets you define variables (and has other sugars as well) and use them in other classes.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
If your server platform is .net there's a project DotLessCSS with a library in .net as well. And there's also T4 template by Phil Haack.
Mind that there are many CSS preprocessors/enhancers like LESS CSS as well:
SASS
xCSS
HSS
CleverCSS
And probably some others that I didn't mention. Some support nesting CSS3 selectors as well others don't. Some are aimed at particular server-side technology some don't. So choose wisely.
you can redefine style by adding the style tag to your HTML:
<div class="somepattern" style="font-size:5px">Text</div>
or by applying multiple classes like class="somepattern small".
HTML
<div class="somepattern small"> Text </div>
CSS
.small {
font-size:5px;
}
the small class will be applied after the somepattern class and will therefore override any properties set in the some pattern class.
Even later to the party!
You can now do this with css custom variables.
In our css using the var() function:
.some-pattern {
font-size: var(--font-size);
font-weight: bold;
border: var(--border);
}
Then in our html defining the custom variables inline:
<div
class="some-pattern"
style="--border: 3px double red; --font-size: 16px;"
>
test
</div>
What you described is actually done with style attribute.
<div class="somepattern" style="font-size:10px;">Text</div>
I think this is exactly what you want. And it is not recommended, because it breaks the usual (good) pattern of spitting content and its visual style. (Although, honestly, I do use it a lot. ;-))
its a css class. It cannot be used like functions if that's what you are asking. There is no code library as its not a compiled. CSS is just presentation semantics (formatting) of a document written in a markup language. You can include all css classes in a .css file and use it where ever you want instead.
I've come to realize through the comments of others that this solution overcomplicates the problem at hand. This solution works but there are easier and better alternatives that do not depend on server-side scripting.
You can actually control your stylesheet if you make it a php file stylesheet.php?fontsize=16 and then inside your stylesheet you can retrieve the variable
<?php
header("Content-type: text/css");
$fontsize=16;
?>
.somepattern{
font-size: $fontsize;
font-weight:bold;
border:2px solid red;
}
Yes, it's possible. But you have to make it on your own with the help of Recatjs(u don't have to go deeper, basic is enough for this). Actually, think like that If bootstrap can make such things where we just have to define the class name and it automatically designes HTML files, then why we cannot do it.
Here's the image of my code(https://i.stack.imgur.com/hyePO.png)
and this is how I used it in my jsx code (https://i.stack.imgur.com/yK6VD.jpg)
Do you mean inline styles ? <div class="somepattern" style="border-color:green">Text</div>
I don't make anything particular. I use Safari, and when I use <strong>blabla</strong> it doesn't work, but <b>blbla</b> does. any idea about what can be the reason?
Regards...
I use Yahoo Reset.css, if it may cause the problem.
sample code:
<p><strong>Address:</strong> bla bla bla blaabllb</p>
Yes, the Yahoo! CSS reset removes formatting from STRONG tags (as well as all other tags).
You'll need to explicitly declare the formatting as noted in the other answers...
strong { font-weight: bold; }
The Firefox plugin Firebug will let you right-click on an element and say "Inspect Element", which among other things displays what CSS has been applied to that element and from what stylesheet that CSS comes. Very helpful for running down what's causing an issue like this.
Yahoo's reset.css has this:
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
This indeed means that it won't be bold.
It can be that the browser has somehow lost default settings for the "strong" element.
Try to make it "recall" by specifying it explicitly in your CSS:
strong
{
font-weight: bold;
}
You shouldn't use the tags "strong" and "b" to achieve just bold text. Instead use stylesheets to make text appear bold and only use strong if you want to emphasize something. You can also use stylesheets to make strong appear bold in safari.
Well it all depends on what the CSS is doing.
strong {
font-weight:bold;
}
will make it appear bold. Some browsers will have that set as a default CSS rule, others might not. Have you set anything that says explicitly that strong or <b> will result in bold text?
Generally you shouldn't rely on the browsers to style elements on their own. For example, Safari might say:
strong {
font-weight:bold;
font-size: 1.2em;
}
while Firefox may have:
strong {
font-weight:bold;
color: #000000;
font-size: 18px;
}
or something like that. So when different users view your page, it may or may not look the same.
Investigate reset.css files (maybe here) and think about telling the browser WHAT you want it to look like via CSS.
Do you have strong declared in your css file? if you have a declaration:
strong{}
then nothing will happen.
You need to have:
strong{
font-weight:bold;
font-style: italic;
}
<strong> is a semantic element used to emphasize the enclosed text, while <b> (though "deprecated") is more of a typographic convention.
strong {font-weight:bold}