Skip to content

Adding styles

Jump to bottom
suntong edited this page Sep 25, 2022 · 5 revisions

Adding styles to the html output

The way cascadia adds styles to the html output is via the -y/--style option string. The consideration behind such design is that the styles should be simple enough to be passed as a single string. Else, it is better to be put into a separated .css and be included as css link.

The following are two ways of doing it, with the result of /tmp/out.html for each case.

Adding styles via single string

$ echo "$style"
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>

$ cascadia -i /tmp/cascadia.xml -c 'input[name=Sex][value=F]' -o /tmp/out.html -w -y "$style"
1 elements for 'input[name=Sex][value=F]':

$ cat /tmp/out.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="">
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
<input type="radio" name="Sex" value="F"/>
</body>

And here is a real-life example:

$ cascadia -o -i https://gaswizard.ca/gas-price-predictions/ -c ".gwgp-cities > tbody > tr:first-child, .gwgp-cities > tbody > tr:first-child + tr" -y "<style>.pd-down {color: #17cb46;} .pd-up {color: #ff0000;}</style>"  -w | sed 's|<body>|&<table>|; s|</body>|</table>&|; s/⮟ *//' | tee /tmp/gas.html
$ cat /tmp/gas.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="">
<style>.pd-down {color: #17cb46;} .pd-up {color: #ff0000;}</style> 
</head>
<body><table>
<tr class="city">
			<th class="gwgp-cityname">City</th>
			<th class="gwgp-price">Regular</th> 
			<th class="gwgp-price">Premium</th> 
			<th class="gwgp-price">Diesel</th>
		</tr>
<tr class="city">
		<td class="gwgp-cityname">Toronto: </td>
		<td class="gwgp-price">148.9 <span class="price-direction pd-down">-5</span></td> 
		<td class="gwgp-price">178.9 <span class="price-direction pd-down">-5</span></td> 
		<td class="gwgp-price">180.9 <span class="price-direction pd-down">-5</span></td>
	</tr>
</table></body>

Check out its result here.

Adding styles via css link

$ cascadia -i /tmp/cascadia.xml -c 'input[name=Sex][value=F]' -o /tmp/out.html -w -y '<link rel="stylesheet" href="styles.css">'
1 elements for 'input[name=Sex][value=F]':

$ cat /tmp/out.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="radio" name="Sex" value="F"/>
</body>

For a real example produced by cascadia using css link, take a look at this.

It's all about styling

The -y/--style option is not only for CSS styling. It's a fix-all option that you can put all kind of styling control into the header:

$ echo "$style"
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="myscripts.js"></script>

$ cascadia -i /tmp/cascadia.xml -c 'input[name=Sex][value=F]' -o /tmp/out.html -w -y "$style"
1 elements for 'input[name=Sex][value=F]':

$ cat /tmp/out.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="myscripts.js"></script>
</head>
<body>
<input type="radio" name="Sex" value="F"/>
</body>
Clone this wiki locally