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;
}
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 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
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.
In the following HTML/CSS, why is the link color green and not blue, i.e. why does "p.description" override "#nav" but "p.description a" does not override "#nav a"?
<!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=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#nav {
color: black;
}
#nav a {
color: green;
}
p.description {
color:red;
}
p.description a {
color:blue;
}
</style>
</head>
<body>
<div id="nav">
<p class="description">This is a test and this is a link.</p>
</div>
</body>
</html>
Because an id selector plus a type selector is more specific than two type selectors and a class selector. See the specification on specificity.
So it does cascade, but the rules for the order in which the cascade happens are not what you thought they were.
Its green because the css rule #nav a {color: green;} stipulates it.
To make it blue do this #nav a {color: blue;}
I have two divs. I want one with id "hor_rule" to appear beneath the other with id "header".
I was under the impression that this should happen automatically. I must be making some silly error.
--- The HTML file ---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ARCS <~~ the title ~~></title>
<style type="text/css" media="all">#import "css/styles.css";</style>
</head>
<body>
<div id="container">
<div id="header">
<span id="header_title"><~~ the title ~~></span>
</div>
<div id="hor_rule"></div>
</div>
</body>
</html>
--- The CSS File ---
#charset "utf-8";
/* CSS Document */
#header {
float:left;
width:64%;
vertical-align:top;
margin:12px;
}
#header_title {
font-family: Arial;
font-size:xx-large;
font-weight: bold;
}
#hor_rule{
height:1px;
background-color:#999;
}
your "header" div is floated and has a width of 64%... this means that something (without a width applied to it, or of a width less than 36% of the container) below it will slide up and fill that spot. set the width of "hor_rule" to something higher than 36%.
alternatively, you can set your "container" div to a greater width or have your "container" div clear: both;