Live site.
I'm trying to style the content currently in black under the Upcoming Events heading. I've tried every combination of .vevent-item odd event-1 .description .event-time .event-label I thought might work to no avail. Any ideas?
It should match my other <p> content.
If you are looking to style the following parts: http://i.imgur.com/BW4NR.png
Why not add a new class to those div's? For example:
<div class="event-time foo">...</div>
<div class="foo">...</div>
And in your .css file:
.foo {
background-color: red;
}
For me, just adding the following code into the <head> style tag does the job.
#main div.content div.event-item {
color: #fff;
}
Related
I'm having trouble overriding bootstrap's css code.
I have included my own stylesheet AFTER bootstrap's code, but it doesn't seem to be working.
I know that a soft override like simply having a style.css that reads:
a {
color: #c54bb7; (it's a sort of red)
text-decoration: none;
}
probably won't work as bootstrap has more specific css that has priority over that one. However, you can see in this picture the link text is green because of the simple a{} config in bootstrap, and that's it. Which means mine should have priority, as it is after the bootstrap css, correct? I'm not sure what i am doing wrong here. I want all links to be red.
https://i.gyazo.com/bf06b0a3990927ed019bf65873a84d42.png
You can use '!important' to force overriding.
a {
color: #c54bb7 !important; (it's a sort of red)
text-decoration: none !important;
}
Try !important. !important emphasizes that this specific css should be applied and overrides the bootstrap css.
a {
color: #c54bb7; !important
text-decoration: none;
}
Hope it helped :)
use a wrapper div for your entire html code
like
<body>
<div class="wrapper">
<div class="content_area">
content goes here...
</div>
</div>
and style using the wrapper class,
.wrapper a{
color: #c54bb7;
text-decoration: none;
}
I am learning CSS and I am having a bit of trouble recognizing properties and understanding some of the syntax. in the CSS below.
.tabs nav li.tab-current:before,
.tabs nav li.tab-current:after {
}
I understand that tabs is a class and the nav li with the class tab-current within the tabs class in html will be applied with the same CSS.
Example:
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
However I'm not quite sure what :before and :after represent. Could someone provide me with an example? Thank you
They set something after and before the element you are selecting. For example:
p:after {
content: 'hi! im after';
}
p:before {
content: 'hi! im before';
}
You will understand it better if you see this fiddle.
:before and :after create pseudo elements as 'children' for the element they are applied to. They are often used for certain stylings, or error messages.
Fiddle: http://jsfiddle.net/XjUM8/1/
div:before {
content: "Before";
background: red;
}
div:after {
content: "After";
background: blue;
color: white;
}
You can also set them up to show up on hover
Fiddle : http://jsfiddle.net/XjUM8/2/
div:hover:before {
content: "Before";
background: red;
}
div:hover:after {
content: "After";
background: blue;
color: white;
}
Also, take a look at MDN :
Before & After
:before and :after are CSS Selectors that allow you to add content before or after the element in question. An example is of adding an arrow after a link to show progress:
HTML
<div class="testAfter"><a>Arrow After this link</a></div>
<div class="testBefore"><a>Arrow Before this link</a></div>
CSS
.testAfter:after{
content:"\25B6"
}
.testBefore:before{
content:"\25C0"
}
Fiddle to show:
http://jsfiddle.net/yPkVL/1/
You can add all kinds of things; images, text, etc. You can style them and add different positionings. You can do all kinds of things. It's like adding an extra div before or after the div in question without having to change the HTML markup.
Reference:
Before
After
:after and :before are called pseudo-elements. They're used to inject some content to your DOM through the CSS.
For instance, say you want to add an icon after every link that targets external websites (we'll assume that these links href all begin with "http://"). This would be a real pain in the neck to try and append this manually. Using the CSS pseudo-element :after, you can simply do something like this :
a[href^="http://"]:after {
content:url('href.png');
}
and bam ! You're good to go.
:after and :before allow you to simply inject some text or image, but they can also be used in many creative ways.
Beware though, they can be applied to anything except "replaced elements" : this means that you won't be able to use those pseudo-elements on tags such as <input>, <textarea>, <object>, <img>, etc.
The W3School explains it pretty well, did you read that up and not understand something?
Essentially what it means is you're going to insert whatever is in the :before area before what content is already in there, and the :after after the content.
:before and :after are selectors, they're used to select what you want to style.
The example on w3schools is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
p::before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<p><b>Note:</b> For ::before to work in IE8, a DOCTYPE must be declared.</p>
</body>
</html>
What this does is print out:
Read this - My name is Donald and Read this - I live in Duksburg
After will esentially do the same thing.
There are
I'm trying to use a CSS :first-letter pseudo-element in a web page to enlarge and colorize the first letter of a paragraph (W), the only thing is that it's in a DIV tag and it's not displaying correctly. I have been to W3C schools and looked at the following here at Stackoverflow (css selector: first paragraph's first letter inside a div and css first-letter exclude other tags), but these don't seem to resolve my problem (more than likely I don't have the CSS setup correctly is my guess). Any help will be appreciated. Thanks.
Here is the CSS I'm using:
div homepara:first-letter {
font-size: 36px;
color: darkblue;
}
Here is the HTML I'm using:
<div class="homepara">Welcome to This Test Page.
</div>
Try this: div.homepara:first-letter. When you want to address a div with a class add a . between then.
Example
Your CSS selector isn't written correctly. Should be:
div.homepara:first-letter {
font-size: 36px;
color: darkblue;
}
div.homepara:first-letter
you just missed a '.' before the class name and there should not be space between the .classname and the div
i.e.. div.classname
DEMO
This is my block of code in the HTML part
<header>
<div class="top_line"></div><br/>
<div class="container">
<div class="abcd">Über<span style="color:#2773AE">Tech</span></div>
<div class="top_line"></div>
</div>
</header>
I am using Twitter Bootstrap and I have a custom CSS file linked after the Bootstrap CSS files to apply specific styles to certain parts of my page. Here is my custom css file code:
.top_line {
background-color: #2773AE;
height: 5px;
}
.abcd {
font-size:50px;
line-height:25px;
}
Whenever I try applying style to the abcd class inside the container, the default size of 14px and line-height of 20px mentioned in the bootstrap body tag only comes up. However, the top_line class works fine. I tried .container .abcd, .container>.abcd and many other things, but still I didn't get the font-size and line-height I wanted to achieve as I have given in my CSS code. Inline stylings work though. Can anyone please tell me where I am going wrong?
Thank You
You should verify the depth of the declaration made in the boostrap css file to be sure to write a stronger rule for your abcd class.
Another way is to use not recommended hacks such as : !important , to make sure your declaration is stronger.
for example :
.abcd {
font-size:50px !important;
line-height:25px !important;
}
Twitter bootsrap put a particular class at the label span, you should be put the class abcd inside the label span
So I have been pondering about this and I don't think this exists. I also understand that my logic my be counter with what stylesheets are trying to accommodate, but let's give it a go:
Take the following example:
// Example "template style"
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
So let's say I want to add that to my footer I would in my HTML go:
<div class="blue_bold" id="footer">
// Content goes here
</div>
This is perfect, but what if I want to add that element to a number of my elements. Say I want to add it to my navigation as well, I would then have to add that class to each element:
<div class="blue_bold" id="navigation">
// Content
</div>
....
<div class="blue_bold" id="footer">
// Content
</div>
My question is, as appose to declaring it via a class or style, is there no way to "attach" the style to another style within my stylesheet? (as example:)
#navigation, #footer {
attach_style(".blue_bold");
}
That way I can minimize my code by creating "base styles" and then attach those styles to individual styles within my stylesheet? This is again just a question, not something I wish to impliment, but I figure that given the above it would be a "nice to have" for people working with say brand guideline documents and want to attach specific styles to individual styles without going to the html to do it.
Any ideas? Does this exists?
You can't do it with pure CSS. You'll need to use LESS, or SASS/SCSS to generate your CSS.
Syntax examples here :
LESS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
.blue_bold;
}
SCSS
.blue_bold {
color: blue;
font-weight: bold;
}
#navigation,
#footer {
#extend .blue_bold;
}
you will need to have a look on sass or less they are your best options.
sass here
less here
You can use sass or less but a more basic slight workaround is just to list the elements in your css like so:
#navigation,
#footer,
.some-other-element,
.another-element
{
// css styles go here that you want to apply to each element listed above
}
Can't see any benefits. What you're asking for is not a standard CSS.
You can define this for all elements with class blue_bold
.blue_bold {
color: blue;
font-weight: bold;
/* other styles can go here */
}
For this block
<div class="blue_bold" id="navigation"></div>
You can simply add another declaration like this:
#navigation, #footer {
background: black;
color: red;
}
Everything from .blue_bold will be used unless overwritten. What's wrong about it?