HOW TO USE CSS IN PHP ECHO

In this article, you will be learning “How to use CSS in PHP echo”.

You might know already that the PHP echo method can be used to return html to the browser.

But have you ever wondered if it can return CSS? The answer is yes but you will be learning in detail to all of the possibilities in this article.

As our article titled “How to use CSS in Php echo”, we will be telling you how to do that but we will also be telling you the alternative methods.

So, let`s first see the CSS used directly inside the echo and then the alternative methods. As we know, CSS may be either embedded in the html document, in an external stylesheet, or within the tag which is called inline CSS.

So, let`s see how can we do all of these using Php echo.

Embedding CSS in an html document

As we return some html code with PHP echo, can we return CSS along with it? Please note that currently, we are not talking about inline CSS which would be our third method. See the below example

<!DOCTYPE html>
<html>
<body>
<?php
echo "
<html>
<head>
<style>
h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>
<h1>How to use CSS in Php echo</h1>
</body>
</html>
";
?> 
</body>
</html>

What are we doing is returning the whole html document source inside the Php echo statement.

We will not debate whether is it a good practice or bad but you can simplify it by omitting head and body tags. See the same code below.

<!DOCTYPE html>
<html>
<body>
<?php
echo "
<style>
h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
<h1>How to use CSS in Php echo</h1>
";
?> 
</body>
</html>

Linking to an external Stylesheet within PHP echo

Now the second option whether is it possible to link html code returned by echo to an external stylesheet. The answer is Yes. Below is an example.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
echo 
"
<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.w3schools.com/w3css/4/w3.css\" >
<h1>How to use CSS in Php echo</h1>
";
?> 
</body>
</html>

You can see that we have linked to an external public Stylesheet just for learning purposes. You can also see \ before double-quotes. As quotes are mostly part of Php so we have used slash before it to tell Php to ignore it.

Adding inline CSS to the html tags within echo

This is the third possibility we have listed. I hope this has been straightforward. Let`s write the above code in inline CSS.

<!DOCTYPE html>
<html>
<body>
<?php
echo "
<h1 style=\"color: maroon;margin-left: 40px\">How to use CSS in Php echo</h>
";
?> 
</body>
</html>

Please note we have also added \ before double quotes inside echo.

ALTERNATIVE METHODS

Add your desired CSS in the html document or main external stylesheet of your website. If html elements are specifically being targeted using Classes and ids: They can also be added to the elements inside the echo method. Just take care of the \ before double or single quotes.

That`s all for today. I hope you have been able to learn “How to use css in php echo”. As always, comments and suggestions are welcome. I wish you all the best and good Bye.

Marcel Iseli

Hey guys! It’s me, Marcel, aka Maschi. On MaschiTuts, it’s all about tutorials! No matter the topic of the article, the goal always remains the same: Providing you guys with the most in-depth and helpful tutorials!

Embedding CSS in an html document

Linking to an external Stylesheet within PHP echo

Adding inline CSS to the html tags within echo

ALTERNATIVE METHODS

Related posts: