I am trying to inherit the global font-family in a variable. However this does not work.
:root {
--special-font: sans-serif;
}
html {
font-family: serif;
}
.highlight {
font-family: var(--special-font);
}
.special {
--special-font: inherit;
}
/* .special {
--special-font: serif;
} */
/* .special .highlight {
font-family: inherit;
} */
<html>
<body>
<div>
<p>
Standard Font: Serif
</p>
<p class="highlight">
Highlight Font: Sans Serif
</p>
</div>
<div class="special">
<p class="highlight">
Special Highlight: should be Serif
</p>
</div>
</body>
</html>
Both the commented out rules would work. But I would prefer to not repeat myself. Is there something I am missing?
Figured out what is happening, thanks to a comment, this question and this answer. I am not actually setting the variable to contain the value inherit but rather tell the variable to inherit its value.
In order do make my font-family inherit the documentwide font, I can set the variable to initial.For a variable this is an empty string, thereby setting the font-family property of my paragraph to its default behaviour, which is inherit.
Related
I downloaded two custom fonts for my website, and I am trying to make one of them the default font for almost everywhere in the website, and the other one for some certain areas. So my code look something like this:
function App() {
return (
<div className="App">
<nav>
<ul className="Navbar">
<li className="link1"><Link to="/">Home</Link></li>
<li className="link2"><Link to="/AboutMe">AboutMe</Link></li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/AboutMe" element={<AboutMe />}/>
</Routes>
</div>
);
}
CSS:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 18px;
font-family: 'Montserrat-VariableFont_wght';
}
#font-face {
font-family: 'BowlbyOneSC-Regular';
src: url('../fonts/BowlbyOneSC-Regular.ttf') format('truetype');
font-weight: bold;
}
#font-face {
font-family: 'Montserrat-VariableFont_wght';
src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
.link1{
font-family: 'BowlbyOneSC-Regular';
}
Both link1 and link2 are now in the font of Montserrat-VariableFont_wght, and when I remove font-family: 'Montserrat-VariableFont_wght';from the * selector. Link1 will then be BowlbyOneSC-Regular and then link2 become some random default font provided by browser, which is not what I want. So, how should I do it?
You can make the
.link1{
font-family: 'BowlbyOneSC-Regular' !important;
}
notice ! important this will override the link1 css and link2 will be default one defined.
You can do something like a utility class with the font face. I usually do .ff-roboto .ff-arial and implement font family there.
.ff-BowlbyOneSC';{
font-family: 'BowlbyOneSC-Regular';
}
now you can use link2 as ff-BowlbyOneSC
<li className="link2 ff-BowlbyOneSC"><Link to="/AboutMe">AboutMe</Link></li>
* is not a good way of defining css property as it apply this font family to all the html element.
body{
box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 18px;
font-family: 'Montserrat-VariableFont_wght';
}
you can also see I have removed regular from the name. It means you can also have font weight related utility functions like .fw-300 or fw-bold fw-black this how you can create reusable classes.
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";}
Context:
I'm trying to do a basic thing:
<container>
<div class="row">
<div class="col-3">
...
</div>
<div class="col-4">
...
</div>
<div class="col-5">
...
</div>
</div>
Each column is dedicated to its own module. Let's say that first column is a vertical menu, middle column is a list of things and the last column is the detail of a thing selected in the second column. I'm using Angular4 and Bootstrap4 (with the help of ng-bootstrap). I'm new to both of them.
Issue:
First column is ok, it displays the menu with the expected size. An issue arise when trying to set the second column. This is the resulting code:
<div class="container-fluid">
<div class="row">
<div id="sidebar" class="col-md-3">
...
</div>
<router-outlet></router-outlet>
<list-of-things ng-version="4.0.3">
<div class="col-md-3">
...
</div>
</list-of-things>
...
</div>
</div>
The problem is that the component selector <list-of-things ng-version="4.0.3"> has a determined width and I don't know where this width comes from. Consequently, when I set the width col-md-3, 3 is relative to the size of <list-of-things ng-version="4.0.3"> and not the page width. So I end up with a very norrow list... Setting the value of the inner div to col-md-12 fills the <list-of-things> box.
Additional information:
Below is the CSS stack for the <list-of-things> straight from the web developer tool.
element {}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
font-family: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, sans-serif;
font-size: 0.9375rem;
font-weight: normal;
line-height: 1.5;
color: #373a3c;
}
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
I found the answer by my self by trial and error.
The best thing to do is to add the class "col-md-3" to the <list-of-things> tag. The hard part is that this tag is injected by angular via the component selector definition. The documentation about that selector is rather poor for the time being.
Basically, all example shows you to set the selector like this:
#Component({
selector: 'my-posts',
templateUrl: './../templates/posts.component.html',
providers: [PostService]
})
Apparently, if you put the selector value into brackets [ and ], the tag will be a <div> tag with whatever is in between the brackets.
The following example:
#Component({
selector: '[id=my-posts]',
templateUrl: './../templates/posts.component.html',
providers: [PostService]
})
generates the following tag:
<div id="my-posts" ng-version...>InnerHTML Here </div>
I want to set a css class on this div to specify the bootstrap col-md-3. But my selector can't be set on css class (that lead to an error related to recursion). It has to be set at least on an css id. With a bit of luck, I found that the following gives me what I want:
#Component({
selector: '[id=all-posts][class=col-md-6]',
templateUrl: './../templates/posts.component.html',
providers: [PostService]
})
Output:
<div class="col-md-6" id="all-posts" ng-version="4.0.3">
...
</div>
See also Can an angular 2 component be used with an attribute selector?
I have a well boostrap component containing some text
<div class="well well-sm" id="well_job">
<p>
<h5><%= "#{job.job_description}" %></h5>
</p>
<p>
<h6><%= "#{job.from_date} -" %></h6><h6><%= "#{job.to_date}" %></h6>
</p>
</div>
when I try to select it by one of its classes to change the font family it doesn't change(I tried to select it by .well-sm but nothing changes as well):
.well{
font-family: 'Rock Salt', cursive;
}
How can I select the well and change the font-size to its inside text?
First of all, your syntax is incorrect as you cannot place a header tag inside a paragraph tag. The following syntax
<p>
<h1>Some Header</h1>
</p>
will be interpreted by the browsers as
<p></p>
<h1>Some Header</h1>
</p>
and you will end up having an unexpected </p> end tag. Validating your html will lead to this error:
No p element in scope but a p end tag seen.
Back to your question, in case of using header tags you also need to specify a style targeting that specific header tag.
.well {
font-size: 14px;
}
.well h5 {
font-size: 24px;
}
Have you import the font into the tag <head>?
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
Then for change the font size:
.well{
font-family: 'Rock Salt', cursive;
}
.well p h5{
font-size:30px;
}
.well p h6{
font-size:20px;
}
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.