We Keep Coding

Is there anyway to apply letter and word spacing to a "font" using css?

I have a custom font with code like this -
#font-face {
font-family: 'classylight';
url : 'some path';
font-weight:normal;
}
I want to set some values exclusively for this font everywhere on the site like letter spacing, word spacing, and other styles. I wanted to reduce unneccessary process, and looked for attribute=style property.
I tried -
body [style="font-family:classylight"] {
letter-spacing:50px;
word-spacing:-20px;
}
It's not working. Can anyone help? I would like to use only css for this. If there's no possibility in css, please refer with javascript, jquery.
PS - I'm not looking for answers which adds styles directly to body part like
p {
font-family: classylight;
letter-spacing:50px;
word-spacing:-20px;
}

Unike text color and size, You can't change letter spacing and word spacing using attribute=style property. You should either change them while creating by changing pen width or you should change them in body of css.

Use rem and em for all the letter spacing, word spacing, etc.
And for the font-weight, it is because the initial declaration is overwriting your own font-weight.

you might find this useful i guess.. this are the common most use css text property
<h1 style="
text-align: center;
font-size: 25px;
color:#FF0000;
font-family: Arial Black,Arial,Helvetica,Verdana,Trebuchet MS,Comic Sans MS,sans-serif;
font-style: normal;
font-weight: 1000;
background-color: #D3D3D3;
line-height: 3;
">TEST 123</h1>
also about your question "font-weight:bold" not working perhaps it being overwritten by other value such as < h1 > which make text already huge...

So you can't really use letter-spacing in font declarations. What you could do however, is create a class which has the letter spacing you want, and then add the class to the HTML element. Like so:
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#400&display=swap';
font-weight: normal;
}
#font-face {
font-family: 'Open Sans';
url : 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap';
font-weight: normal;
}
.roboto-norm{
font-family: 'Roboto';
font-weight: normal;
}
.roboto-norm-ltr-spc{
font-family: 'Roboto';
font-weight: normal;
letter-spacing: 0.25em !important;
}
.opensans-norm{
font-family: 'Open Sans';
font-weight: normal;
}
.opensans-norm-ltr-spc{
font-family: 'Open Sans';
font-weight: normal;
letter-spacing: 0.25em !important;
}
<label class="roboto-norm">Normal roboto letter spacing</label>
<br><br>
<label class="roboto-norm-ltr-spc">Custom roboto letter spacing</label>
<br><br>
<br><br>
<label class="opensans-norm">Normal open sans letter spacing</label>
<br><br>
<label class="opensans-norm-ltr-spc">Custom open sans letter spacing</label>
As for the font-weight: normal part, what you're doing with the #font-face rule is that you're declaring the font. It's basically a variable of sorts, which you'd then be referencing when styling the HTML elements. The weight of the font is part of that.
The snippet below should make it clearer. What I've done is that I've imported 2 styles of the Roboto font, the first being of regular weight, aka 400, and the other of bold weight, aka 700.
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#400&display=swap';
font-weight: normal;
}
#font-face {
font-family: 'Roboto';
url : 'https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap';
font-weight: bold;
}
*{
font-family: 'Roboto';
}
#normal{
font-weight: normal;
}
#bold{
font-weight: bold;
}
<label id="normal">normal font</label>
<br><br>
<label id="bold">bold font</label>

React fill remaining height without scroll in

I want to fill the remaining area on the screen but the height:100% property effect is not working.
Notice the red outlined area which is the radius of the border. The highlighted yellow area is the remaining space on the screen which should have been filled:
Here is the render method of the page. The first Box container is responsible for showing components for the form inputs. The second Box container is not having the desired effect to fill the full page:
render() {
console.log("state: ", this.state);
const {symbol, fromDate, toDate} = this.state;
this.updateAPIData();
return (
<>
<Box display='flex' flex='1' justifyContent='space-around'>
<IndexSelector
id='index'
value={symbol}
onChange={this.onSymbolChange}/>
<SeriesSelector
id='series'
seriesList={Form.seriesList}
onChange={this.onSeriesChange}/>
<DateRange fromDate={fromDate} toDate={toDate} onChange={this.onDateChange}/>
</Box>
// The below container properties are not having any effect
<Box height='100%' border='1px solid red' marginTop='50px'>
<Graph instructions={this.getInstructions()} apiData={this.apiData} />
</Box>
</>
)
}
One approach I have tried is setting the Box height to 100vh:
<Box height='100vh' border='1px solid red' marginTop='50px'>
<Graph instructions={this.getInstructions()} apiData={this.apiData} />
</Box>
But this creates a scrollable page. 75vh fills the remaining area without creating scroll-bar. But this is a manually calculated value. Adding a custom viewport size to each page is not scalable. What is the right way to deal with this issue?
EDIT:
Here is the index.css file:
html, body, #root, #root > div {
height: 100vh
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

Body is not 100vh by default
It happens because you body tag by default use as little height as possible:
You need to add height: 100vh on your body tag in order to change that. After you may use height: 100% to stretch your inner elements

Is there a cross platform, cross browser keyword I can use that refers to the system font?

Is there a cross platform. cross browser keyword I can use that will refer to the users system font in CSS?
Apple provides a -apple-system that refers to the operating system font.
.myStyle {
font-family: -apple-system; /* works on OSX */
font-family: -system;
}
More info:
Using the system font in web content
System fonts

No, Not in my knowledge but there is a solution
/* System Fonts as used by GitHub */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
or
/* Define the "system" font family */
#font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
/* Now, let's apply it on an element */
body {
font-family: "system";
}
Source: https://css-tricks.com/snippets/css/system-font-stack/

For chrome and safari there is font-family: system-ui.1

adjust font size when print

How can i adjust the font size of the text when i'm gonna print it ? i tried to put font size property but it's no used when i'm gonna click the print button , it will just go back to the default font size.
function print1(strid)
{
var values = document.getElementById(strid);
var printing =window.open("");
printing.document.write(values.innerHTML);
printing.document.close();
printing.focus();
printing.print();
printing.close();
}
<div id="print2">
Ex : My data table 1
</div>
<input type="button" value="Print" onclick="return print1('print2')">

You can use a CSS media query. In a style section add something like the following to increase the font size for the entire body. You can use any other CSS selector instead of body, so for just your div use #print2.
<style type="text/css">
#media print {
body {
font-size: large;
}
}
</style>
Add that to your HTML document after the <head> tag.
Of course you can set any other CSS properties in the block.
Here's a complete example:
<!doctype html>
<html>
<head>
<style type="text/css">
body {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12pt;
}
#media print {
body {
font-size: 48pt;
}
}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
This is a sample document with normal size text that should print large.
</body>
</html>

How can I get links to stay active?

I'm making a site with a lecture on. The lecture is divided into chapters. Each chapter has it's own link and when clicked a new video loads an external html get loaded into a text window. I need these links to stay active, so that ppl know what chapter they're on.
Here's my current html:
<li>chapter1</li>
<li>chapter2</li>
..and so on..
Now, this works perfectly.. As I said, I need the links to stay active, and tried adding an addClass(this)
I.E:
onclick="javascript:loadContent('#pres','chapter2.html');changeVideo('chapter2');addClass(this)">...
function addClass(obj)
{
obj.className="active";
}
This doesn't work. I've also tried removing everything but the addClass function with no luck.
Any ideas?

function clickChapter(type, page, chapter){
loadContent(type, page);
changeVideo(chapter);
removeAllClass();
addClass(ocument.getElementById('id_'+chapter));
}
function removeAllClass(){
var aAnchor = document.getElementsByTagName('A');
for(var i=0; i<aAnchor.length; i++){
aAnchor[i].className = '';
}
}
<li>chapter1</li>
<li>chapter2</li>

You could try this...
first create a Cascaded style sheet(CSS) and in it write the code like :
a:active {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:visited {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
or
a:link {
color: #006600;
font: 12px Verdana, Arial, Helvetica, San-serif;
text-decoration: none;
}
then paste this code in the head of your html page:
<link type="text/css" href="<Path of the CSS>.css" rel="stylesheet"/>