I have a HTML of
<span> Day Month </span>
and for CSS I want to target Day seperately and Month seperately (apply different styles to them) without changing the HTML.
How can I do it?
Yeah its possible. You can follow this method.
Here font-word is not posible, that have no option in css. But we use content css property
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: orange;
}
span:before
{
color: red;
content: "Day";
position: absolute;
}
</style>
</head>
<body>
<span>Day Month </span>
</body>
</html>
Updated: Here the fiddle Demo
Related
I was just wondering how to view p.intro::first-letter in the following code. Does this mean that only in a p element can the intro class be used?
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
Yes
The selector p.intro::first-letter means "Style the ::first-letter of a <p> element with the class intro.
When there is no space between the selectors p, .intro, ::first-letter (these are called selectors) it is like an "AND" statement
div.RedText means div element AND RedText class
It's worth reading up on the different types of selectors, W3Schools has a really good interactive example too!
Here's a little more:
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
div {
color: #0000ff;
}
div.RedText {
color: #ff0000;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
<div>This text is blue</div>
<div class="RedText">This text is red!</div>
</body>
</html>
I'm starting to learn Sass and started to check some nesting examples. This is the first one I tried and it's not working:
body {background:#eee;}
.blog .entry {
p{
color:#ff0;
}
}
This is my markup:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.scss">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body class="blog">
<div class="entry">
<h1>My blog post</h1>
<p class="blue">Text <a>link</a></p>
</div><!-- .entry -->
</body>
</html>
The background of the body does change to #eee, but the paragraph stays the same (unless I un-nest it to just p{} ).
First you cannot link an SCSS file just like CSS, you have to compile it to CSS then link the compiled file.
In order to nest properly in SCSS you can do the following:
.blog {
.entry {
p{
color:#ff0;
}
}
}
Your markup and Sass work as you can see here: https://jsfiddle.net/6pa0r48g/
Please check the compiled CSS directly if you are overloading your css rule by another one (i. e. by formatting .blue).
Also this would be more readable:
body {
background: #eee;
}
.blog {
.entry {
p {
color: #ff0;
}
}
}
I would recommend to not go any deeper with your nesting in Sass.
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.
I'm confused with the way CSS is cascading, I thought if you did something like
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.small p {
color: red;
font-size: 10px;
}
.big p {
color: green;
font-size: 50px;
}
.blue p {
color: blue;
}
</style>
<title>Insert title here</title>
</head>
<body>
<div class="small">
<p>Small</p>
<div class="big">
<p>Big</p>
<div class="small">
<div class="blue">
<p>Blue inside Small</p>
</div>
</div>
</div>
</div>
</body>
</html>
My problem is with the "Blue inside Small" , I thought this will be small text as it has an upper class with "small" class. How can I achieve that.
Please don't tell me to change any thing because I'm building a complex template system that you can have containers(divs) inside containers(divs) and I want the bottom-up style to apply !
You specified .big p's rule after .small p's rule in your CSS, so the font size will be 50 pixels, not 10, because both selectors are of equal specificity.
CSS cascades its equally-specific selectors top-down (for both CSS rules and the DOM). You can't change that unless you do any of these:
Make one or more selectors more specific
Use !important
Modify your HTML
I know you said not to suggest any changes, but I'll do it anyway for the benefit of others — the simplest to make to achieve what you want would be to use the child combinator > in the second selector (as suggested by a now-deleted answer):
.big > p {
color: green;
font-size: 50px;
}
Here is my HTML.
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.png');
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<img class="button" src="images/1.png">
</body>
</html>
The files are present but it still doesn't work. What am I doing wrong?
The standard method is CSS:
input.mybutton { background-image: url('button.jpeg'); }
input.mybutton:hover { background-image: url('selectedButton.jpeg'); }
Using JavaScript, you can overwrite the .src of an image:
imageElement.src = 'selectedButton.jpeg';
<img src="button.jpeg" onmouseover="this.src='selectedButton.jpeg'" onmouseout="this.src='button.jpeg'"/>
Probably the best way is to use css and set the background image of the element based on the hover property.
If you can use jQuery in your application then it will be fairly simple.On mouseover event of the button just swap the background image.Following sample code does it for a div element :-
<div class="title"/>
$(document).ready(function () {
$('div.title').mouseover(function () {
$(this).css("background-image", "url('Forest Flowers.jpg')");
});
});
Use javascript to do this. Use onmouseover and onmouseout events to handle this.
If you can use jQuery then you can use the hover event.
$("img.button").hover(function(){
$(this).attr("src","path of image on mouse over");
},
function(){
$(this).attr("src","path of image on mouse out");
});
Use a tag to wrap the image.
<hmtl>
<head>
<style type="text/css">
a.button{
background: url('images/1.png');
display:block;
width: *width*;
height: *height*;
}
a.button:hover{
background: url('images/2.jpg');
}
</style>
</head>
<body>
<a class="button"></a>
</body>
Edit: I just realize that you are trying to replace the background image under your image....
one option that you have is to use javascript. but if you want to use only CSS and alse want to use this image as control, the above edited solution is good.
I used an h1 tag. I have tested the following code in IE8,Firefox,GoogleChrome and it is working, we just need to add the doctype correctly:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.jpg');
height: 400px;
width: 400px;
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<h1 class="button"></h1>
</body>
</html>
Images don't generally have background images. Use a different element, and non-relative paths would probably be a good idea, too.
Buttons do not have a hover state. You might want to try A (link) tags, and set the background there.