I'm wondering if I can somehow "inherit" a class property to some elements such as body, like:
.playfont{font-family: 'Play', sans-serif;}
body{.playfont}
I know I can do this with JavaScript or LESS, or even adding the class in HTML markup, but is there any pure css way for this?
Thanks.
The closest you can come with pure CSS is like this:
.playfont,
body { /* .... rules here */ }
Other than that, you'll need a preprocessor. And the way I described above gets messy pretty fast.
No, but you can do like this:
<html>
<head>
<style type="text/css">
h1, .test {
color: red;
}
</style>
</head>
<body>
<h1>Test</h1>
<h2 class="test">Test</h2>
</body>
</html>
Related
I'm a real noob at CSS/HTML, so please forgive me.
I tried to change the background page color on the CSS file linked to my html file, and it doesn't work. Whereas when I just flat out change it between the style tags in my HTML file, it works. What gives?
Plain and simple:
Ex1.css
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
SamplePage.html
<!doctype html>
<html>
<head>
<title> Sample Page </title>
<link rel = "stylesheet" href="Ex1.css">
</head>
<body>
Hello. This is a sample Page.
</body>
</html>
Your HTML is correct, and links to your CSS correctly (assuming Ex1.css is in the same folder as your HTML).
Your CSS is almost correct; the only problem is that you shouldn't include any HTML tags in your CSS document. Ex1.css should only contain the actual CSS declarations themselves (body { }).
body {
background-color: lightblue;
}
<body>
Hello. This is a sample Page.
</body>
If in doubt, you can validate your CSS with W3's CSS Validator.
Hope this helps! :)
Reduce the contents of your Ex1.css file to this:
body {
background-color: lightblue;
}
(no HTML code in CSS files!)
your css file will just have. Plain and simple
body {
background-color: lightblue;
}
change your css file to this:
body {
background-color: lightblue;
}
I have a CSS file with some div styles and this CSS has a body, like this:
css1.css
body{
background-color:#000;
}
#div1{
...
}
#div2{
...
}
in a page I want to use some divs that are in css1.css but with a different body color.
So I create another css for this:
css2.css
body{
background-color:#fff;
}
so in this page I have:
<link rel="stylesheet" type="text/css" href="css1.css">
<link rel="stylesheet" type="text/css" href="css2.css">
css1.css has a body and css2 too, is it right? Can I have any problem doing this?
You don't need all that, you can simply set different background colours to the divs. You can give them different IDs or classes and work your css around that.
HTML:
<div id="one">this is div one</div>
<div id="two">this is div two</div>
CSS:
div#one { background-color: blue; }
div#two { background-color: red; }
You could also change your body with different classes on different pages that consume the same CSS. I hope this solves your problem.
It is OK. The last declaration will take precedence over the first, assuming the selectors are the same.
Yes you can!
Although you may need to look at css selector specificity:
https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm. Here is a more illustrated resource:
from https://css-tricks.com/specifics-on-css-specificity/
The specificity depends on the number of tags, ids, classes, pseudo-classes etc that are contained in your selectors. If there is a tie between selectors then the order matters.
Those two selectors (for body) have the same specificity (=0001) so the second one will override the common properties of the first.
Or in other words the body background-color will be #fff :). If that is useful to you is a different question.
I want to make the head and body different things, independent from each other. Because of this, I want different background colors, but I've not been able to achieve that.
If anyone knows how I can make the styling for the head and body show up and make the sections look different, please let me know. I've included the code I used on the site below.
<html>
<head>
<p>Hi there!</p>
</head>
<body>
<style>
body {
background-color: lightblue;
}
head {
background-color: lightgreen;
}
</style>
<p>Hi there!</p>
</body>
</html>
Image of the output:
the page output
The head tag is used to describe metadata and important information about your document. What shows up there is not visible.
Your p tag should be under the body tag, not the head tag.
What you are thinking of is probably the header section of your webpage, which is included under your body tag.
Also, your css declarations should take place in their own separate file.
Here is what your code should look like
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<p>Hi there!</p>
</body>
</html>
Styles.css
body {
background-color: lightblue;
}
header {
background-color: lightgreen;
}
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I am trying to setup a page on our site to work properly with printing, the issues I am hitting is that, to test it I need to keep printing to file.
What I would prefer would be if there was a way to display the page as it will be printed.
Is this possible? (Chromium).
You can specify different CSS for different needs. Look at this style of coding CSS...
<html>
<head>
<style>
#media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
#media print
{
p.test {font-family:times,serif;font-size:10px;}
}
#media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>
<body>
....
</body>
</html>