How to change page title text in different colours?

Hi there techyshaala,

and a warm welcome to these forums. :winky:

Here is one possible way to achieve that result…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    font: normal 1em / 1.5em  sans-serif;
 }
h1 {
	color: #342424;
	text-transform: capitalize;
}
h1::after {
	content: ' touch';
	color: #28a255;
}    
</style>
</head>
<body>
 <h1>get in</h1>
</body>
</html>

…and here is another…

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    font: normal 1em / 1.5em  sans-serif;
 }
h1 {
	color: #342424;
	text-transform: capitalize;
}
h1 span {
	color: #28a255;
}    
</style>
</head>
<body>
 <h1>get in<span> touch</span></h1>
</body>
</html>

coothead

1 Like