I'm playing around with styling symbols and want to try to style this header by giving each of the dots between the letters the colors of the actual FRIENDS logo. I wanted to know what would be the best way to do this. Can symbol colors be changed in HTML? If yes, is making p tags with different ID's the only way to style the dots? Here is the header:
<header> F•R•I•E•N•D•S </header>
Note: I would only like to use HTML and CSS to do this not Javascript or JQuery
You can use span tags which have class attributes and according CSS rules for the classes (which can be reused)
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.yellow {
color: yellow;
}
.orange {
color: orange;
}
.brown {
color: brown;
}
<header> F<span class="red">•</span>R<span class="blue">•</span>I<span class="green">•</span>E<span class="yellow">•</span>N<span class="orange">•</span>D<span class="brown">•</span>S </header>
I'd recommend that you surround each symbol with a <span> tag and target it individually with an "id".
It'd look something like this:
<header> F<span id="red">•</span>R<span id="blue">•</span>I&<span id="green">#8226;</span>E<span id="yellow">•</span>N<span id="orange">•</span>D<span id="brown">•</span>S </header>
You wouldn't want to use <p> tags to style the symbols because they would create new lines between each letter.
Just put every later or desired sign into span tag and color it with class or inline style attributes as seen on last two latters in code.
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
.brown{
color: brown;
}
.orange{
color: orange;
}
<header> <span class="red">F</span>•<span class="green">R</span>•<span class="brown">I</span>•<span class="blue">E</span>•<span style="color:yellow">D</span>•<span style="color:gray">S</span> </header>
Related
Say I have this custom button:
<div class="button-container">
<p class="button-text">Click me</p>
</div>
I want the div to have a background color, and the text to have a color in SCSS.
But I also need a different background color and text color when I'm hovering the whole div (not just the p tag and div separate, only when hovering the div)
I could write something like this:
div.button-container{
background-color: white;
p{
color: black;
}
&:hover{
background-color: red;
p{
color: blue;
}
}
}
But this does not look like a good idea, since this will become very complex and hard to manage if there are more elements involved. What is the best solution here?
I don't know exactly what the code I want would look like since I'm pretty new to SCSS, but I am thinking it would look something like this: (ignore syntax here, just an idea of how much shorter I would like it to be)
div.button-container{
background-color: white, red;
p{
color: black, blue;
}
}
Based on the html you have provided the following scss will be just fine:
.button-container {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
If there are several items involved, you can create some mixins that can be reused. For example. if there are several button-container elements that share the same style in the app, I will make something like this:
#mixin btnContainerBlack {
background-color: black;
color: white;
&:hover {
background-color: gray;
color: black;
}
}
In this case, you will simply add the mixin name to the element style:
.button-container {
#include btnContainerBlack;
}
There are many ways to make scss more clean and reusable. This is just one of the ideas.
I was wondering when I worked on a project if I could achieve this, but assuming it does not seem currently possible to get this behavior without any change of structure (I would really like to keep the hover inside its own class declaration), to you, what would be the cleanest solution ?
LESS
#blue: blue;
#blue-darker: darken(#blue, 20%);
.text-blue {
color: #blue;
/* something like that */
&:hover when (element_reference == hyperlink) {
color: #blue-darker;
}
}
CSS
.text-blue {
color: blue;
}
/* something like that */
a.text-blue:hover {
color: #000099;
}
HTML
<p class="text-blue">Text in blue with no hover effect</p>
<a class="text-blue" href="#">Link in blue with hover effect</a>
This should do what you want:
.text-blue {
color: #blue;
a&:hover {
color: #blue-darker;
}
}
Fiddle
I would use a :link CSS pseudoclass, because <a> without href is not treated as a hyperlink. See at https://jsfiddle.net/jsqdom1s/
.text-blue {
color: #blue;
a&:link:hover {
color: #blue-darker;
}
}
I need some 'derivative' css which is a child of my parent css. I want to import all of attributes of 'parent' css to my 'child' css.
I can't find a solution.
E.g.
.red {
color: red;
}
.more_red {
color: red;
border: 2 px solid red;
}
Is it possible to do something familar my pseudocode?
.red{
color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
border: 2px solid red;
}
HTML
<p class='more_red'>texty text</p> <- this only I Need
<p class='red more_red'>texty text</p> <- not this
EDIT I need to create a css which consists of all of 'parent' css properties.
Only way to inherit/importing the styles defined in one rule to another in CSS is cascading. You cannot use extend as in LESS in CSS.
For inheriting the properties from other element, the parent-child hierarchy is necessary.
You can use direct child selector >
.red {
color: red;
}
.red > .more_red {
border: 2px solid red;
}
or descendant selector
.red .more_red {
border: 2px solid red;
}
By doing this, the styles of parent are inherited by children.
You can also use global selector *.
Ex. For setting the font-family across the site
* {
font-family: Helvetica;
}
You can also use element/type selector.
Ex. To set the style of all the anchors
a {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
}
I have hyperlinks that i want to change color on Mouse hover to show that they are responsive and get rich user interface but i am not able to achieve this..
Here is the fiddle..
Fiddle
And Here is the HTML...
<div id="footer" class="footer-shadow">
<div style="margin-left:auto; margin-right:auto; width:960px; ">
<div id="footerAboutUS" style="float:left; width:150px; position:relative; margin-left: 10px; margin-top: 7px;">
<label style="font-size:18px; color: #6c3f00;">About US</label>
<br/> Our Delivery Model
<br/> Solution Area
<br/> List of Industries
<br/> IT Management
<br/> Lines of Business
</div>
</div>
try to remove the a lement style attribute that overriding your css
then then use tag as below
<style>
a {
color: gray;
text-decoration: none;
font-size: 11px;
}
a:hover {
color: red;
}
</style>
You can set a different color on mouse over using 'hover' pseudo class of CSS.
Example:
.footer-shadow a:hover {
color: red;
}
Fiddle: http://jsfiddle.net/z45Xz/1/
Use class in place of style
like :
.class1{
color: gray;
text-decoration:none;
font-size: 11px;
}
and change color on hover like
.class1:hover{
color: blue;
text-decoration:none;
font-size: 11px;
}
First, remove color gray from your a elements (In you html file). Then insert this into your css:
a {
color: gray;
}
a:hover {
color: red;
}
With demo: http://jsfiddle.net/RubberPoint/d9n79/
First, Don't use inline style for <a> tag as color: gray;. because if you use inline style ,you can't override the another style (internal,external).
a{
color: gray; //you can add your more style here
}
and for mouse change over use this.
a:hover{
color: blue; //you can add your more style here
}
Otherwise, use some ID or class for html element to avoid generic changes for all <a> tag
Just add :hover selector and add !important rule to override the current style
Check this link: http://jsfiddle.net/z45Xz/4/
.footer-shadow a:hover{
color: red !important;
}
First thing as mentioned in above answers Don't use inline style.
And just
a{
color:grey;
text-decoration:none;
}
and for changing the color when u hover the mouse use psedo class "hover" like
a:hover
{
color:green;
}
I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round.
How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason.
Here's a fiddle I prepared to demonstrate:
http://jsfiddle.net/7n4Wy/
HTML
<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p>
CSS
.red {
background: red;
}
.blue {
background: blue;
}
.button {
border-radius: 6px;
}
.button:hover .red:hover {
background: pink;
}
What you have is trying to match .red:hover that is inside .button:hover, which implies a nested element in your markup.
Since you're selecting the same element, you need to combine both classes with a single :hover:
.red.button:hover {
background: pink;
}
Updated fiddle
You can apply a CSS-rule to multiple selectors (classes like «.button», or states like «:hover») by separating them with a comma.
therefore just add a comma:
.button:hover, .red:hover {
background: pink;
}
Use following code JSFIDDLE
.button.red:hover {
background: pink;
}
To apply multiple classes, don't add a space (just use another period):
CSS
p.button {
border-radius: 6px;
}
p.red {
background: 6px;
}
p.button.red:hover {
background: pink;
}
HTML
<p class="button red">Hover Here</p>
The space is used to denote a child element. i.e. p.button red:hover would affect all elements with class red on hover that are wholly contained in parent paragraphs with class button.