CSS
CSS
HTML
HTML
PHP
PHP

Css codes are visible in source codes of page,why?

Hello;

I use DW 2015 cc for creating webpage and above php file added the link of css file as:

<link  href="css/home-stylesheet.css" rel="stylesheet"/>

Open in new window

My css file also start with:

@charset "utf-8";
/* CSS Document */

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	display: block;
    }

Open in new window

But when i see the source codes of php page i see that all css codes are included in the source codes,please let me know where is the problem?
Thanks

MOSTAGHASSIAsked: 2016-08-06

Who is Participating?

Improve company productivity with a Business Account.Sign Up

Solutions

Advertise Here

LVL 111

Ray PaseurConnect With a Mentor Commented: 2016-08-06

CSS can be placed in external files that are loaded by the browser, or internal files inside the HTML document, enclosed in <style> tags. Either way works fine, and respects the "cascade" of styles. It can also be placed "inline" with the affected HTML tags, but I do not recommend that since it leads to maintenance headaches.
http://www.w3schools.com/css/css_howto.asp

When I'm developing a style sheet, I like to put the styling into internal files inside the HTML document. It helps avoid browser caching which is to be avoided during development.

Here's an example from another question where we use PHP to prepare HTML elements, including internal style sheets.

<?php // demo/temp_edavo.php
/**
 * https://www.experts-exchange.com/questions/28961750/Javascript-change-Body-Background.html
 */
error_reporting(E_ALL);


// USE PHP TO CREATE VARIABLES FOR OUR HTML
$dat = date('r');
$xyz = "This page was rendered at $dat";

// USE PHP TO CREATE THE CSS CLASS NAMES
$r_class = "r";
$b_class = "b";

// USE PHP TO CREATE THE CSS IMAGE LINKS
$r_image = "red_square.png";
$b_image = "blu_square.png";


// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
.$r_class {
    background-image:url("images/$r_image");
}
.$b_class {
    background-image:url("images/$b_image");
}
</style>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#make_red").click(function(){
        $("body").removeClass("$b_class");
        $("body").addClass("$r_class");
    });
    $("#make_blu").click(function(){
        $("body").removeClass("$r_class");
        $("body").addClass("$b_class");
    });
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<p>$xyz</p>
<input id="make_red" value="Make Body Red" />
<input id="make_blu" value="Make Body Blue" />

</body>
</html>
HTML5;


// RENDER THE WEB PAGE
echo $htm;

Open in new window

LVL 84

Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented: 2016-08-06

Why would that be a problem? PHP produces HTML pages when it sends the data to the browser. Unless you're not being clear...

LVL 31

Olaf DoschkeConnect With a Mentor Software DeveloperCommented: 2016-08-06