I am trying to have 2 different colours/styles for each word of my website name, something like this:
I currently use:
James<strong>.</strong><span>Wood</span>
("STRONG" and "SPAN" tags inside "A" tag).
And then do the rest with CSS.
Is this the right method to do it with CSS if we can't use images?
Very similar to Gianps answer, but with a bit simpler CSS:
Working Demo:
http://www.cdpn.io/wvCou
HTML:
<a href="#" class='title'><span class='green'>James</span>.<span class='orange'>Wood</span></a>
CSS:
.title {
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
color: red;
text-decoration: none;
}
.title .green {color: green;}
.title .orange {color: orange;}
That html code is not readable. It's right to do it with css but in a way like this:
<a href="#" class="f18 b">
<span class="green uc">james</span>.<span class="orange uc">wood</span>
</a>
and define css classes:
.f18 {font-size: 18px;}
.b {font-weight:bold;}
.uc {text-transform:uppercase;}
Related
In the following code I expected the title inside the wrapper to be blue but it stays red, I was hoping #custom-selector would act like regular css custom-property?
html
<div class="wrapper">
<h1 id="title">Title</h1>
</div>
css
#use postcss-cssnext;
#custom-selector :--heading h1, h2, h3;
:--heading{
color: red;
}
a:active{
color:hotpink;
}
.wrapper{
:--heading{
color: blue;
}
}
I realised nesting was not suported so
.wrapper :--heading{
color: blue;
works! Duh
I'm trying to apply this css:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
this works well, the problem is that the web app can set a class on the body called white-content, if the white-content class is setted, then I can't see the text of h2, because the color is white.
Is possible tell to css that the css above must be applied only when the white-content class is not availble on body?
Thanks in advance.
I've condensed the HTML for the sake of this example.
Test 1: Class does exist on body. h2 text should be default black.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body class="white-content">
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
Test 2: Class does not exist on body. h2 text should be white.
body:not(.white-content) #calendar-page h2 {
font-size: 22px;
color: white;
}
<body>
<div id="calendar-page">
<h2>My Header</h2>
</div>
</body>
if you use
body.white-content
that means "body and white-content" class at the same time.
So you can use:
#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
font-size: 22px;
color: white;
}
body.white-content #calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 {
color: black
}
So when body has .white-content it add that css rule.
See more on
https://www.w3schools.com/cssref/css_selectors.asp
yes it's possible by using DOM manipulation with javascript:
html:
<div id="div01" style="background-color: white">abc</div>
javascript:
if(div01.style.backgroundColor == "white")
{document.getElementById("div01").style.color = "black";}
I would like to make it so that all of my tags look plain when they show up on the screen also after I visit them or if I hover over them. I put all of my divs in a wrapper and tried to refer to them but it didn't seem to work. I don't really need the wrapper if I could just refer to everything using a:hover ... that would be fine.
here is my HTML
<div id="wrapper">
<div id="settings_button">
<span class="settings_text">
Settings
</span>
</div>
<div id="posts_button">
<span class="one_bar_text">
Posts
</span>
</div>
<a href="#" alt="posts">
<div id="posts_button_dark">
<span class="one_bar_text">
Posts
</span>
</div>
</a>
<div id="profile_button">
<span class="one_bar_text">
Profile
</span>
</div>
<div id="profile_button_dark">
<span class="one_bar_text">
Profile
</span>
</div>
</div>
Below is my CSS
#wrapper a:link {
color: none;
text-transform: none;
}
#wrapper a:visited {
color: none;
}
#wrapper a:hover {
color: none;
text-transform: none;
}
I will be making most of my divs into links i just haven't yet. and i would like to avoid having to reference each div's tag on my CSS page
so i changed my CSS to this
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none;
}
a:hover {
color: none;
text-transform: none;
}
but the link is still being underlined on hover over
a {
color: black;
text-decoration: none;
}
This is highly questionable, but it addresses the question you asked. You don’t need any fancy selectors, since any setting in a page style sheet that applies to an element will override browser defaults.
You just need to set an explicitly color (or use inherit, but IE does not support it), and to kill underlining, you need to set text-decoration, not text-transform.
You should use either links or buttons, not <divs>.
If you do decide to go with the current markup:
div[id*=button] {
...
}
If you decide to sober up (seriously, don't use divs!)
Just a or button will do.
a {
color: red;
}
Will color all links in red.
Note that it will catch all links, as in in the content area, the nav, the footer. Everywhere.
a{
color:#fff;
}
Is this what you meant?
Just use a
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none; }
a:hover {
color: none;
text-transform: none; }
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}
Can we write selectors by only name
For example,
<div name= "outer-name">
<img name="inner-image" src="images/ine.jpg" alt"" />
</div>
I want to take style of inner-mage in css file like [outer-name] [inner-image]
In CSS file
[outer-name] [inner-image] {
/*styles*/
}
I cant take selector as [outer-name] img etc .. only selecting by name
You can use attribute selectors:
[name="outer-name"] [name="inner-image"]
But keep in mind that name is not a valid attribute for <div> or <img>, even though the above selector will work. It's best that you either change them to classes, or if you're using HTML5, add the data- prefix to them, so it looks like this:
<div data-name= "outer-name">
<img data-name="inner-image" src="images/ine.jpg" alt"" />
</div>
Then use this selector:
[data-name="outer-name"] [data-name="inner-image"]
Given the following html:
<div data-name="something">
<p>Content in 'something'</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name] [data-someAttribute] {
display: block;
background-color: #ffa;
}
This is perfectly valid (or, at least, it's implemented in Chromium 14/Ubuntu 11.04). I've changed from using name attributes (since they're invalid for div elements, or other non-form elements), and used, instead, data-* prefixed custom attributes, which are valid in HTML5 and, while perhaps not 'valid' in HTML 4, they seem to be understood by those browsers still.
JS Fiddle demo.
It's worth noting that you can also use attribute=equals notation, to select only certain elements based on the value of their data-* attributes:
<div data-name="something">
<p>Content in data-name='something' element.</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name="something"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
Also, if CSS3 is an option for you, it's possible to use attribute-begins-with (^=) notation:
[data-name] {
background-color: red;
}
[data-name^="s"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
And attribute-ends-with ($=) notation:
[data-name] {
background-color: red;
}
[data-name$="ing"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
References:
data-* attributes (W3.org).
data-* attributes, (HTML5 Doctor).
attribute-equals selector (W3.org).
attribute-starts-with, and attribute-ends-with selectors (W3.org).
As #Bolt said, name isn't valid there (yet it still works on my browser). You can use the HTML5 data- properties. Here's a fiddle showing how it's done.
The real solution here would be to use classes, but I assume you have a reason for not using them.