I am having a three internal style sheets and one external style sheet in my web page. Simplified output looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Some title</title>
<!--This is a NORMAL external stlesheet-->
<link rel="stylesheet" type="text/css" media="all" href="http://localhost/wp-content/themes/My_Theme/css/style.css" />
<!--Will display SINGLE COLUMN instead TWO COLUMNS if no JS enabled-->
<noscript>
<style type="text/css">
.col1{
width:100%;
margin:0px;
display:block;
position:relative;
}
</style>
</noscript>
<!--This is MY DYNAMIC stylesheet generated by SOME PHP-->
<style type="text/css">
#blogwrapper{
width: 530px;
margin-left:6px;
}
</style>
<!--This is also DYNAMIC stylesheet BUT generated WORDPRESS PHP-->
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #1e73be; }
</style>
</head>
</body>
</html>
My page passes HTML and CSS Validation ,but I am still having doubts is it a right way for implementing my CSS this way.
So my question is: am I doing this right or not (because I am developing a Wordpress theme and I want to make it publicly available , so don't want my theme being rejected by Wordpress Review Team ) ?
writing inline style sheets on the HTML/PHP page is always unwelcome even if it works. It has following disadvantages:
The page code gets lengthy
The style sheet becomes available only for the specific page.
Its tedious to change the style sheet for designer in future purpose.
Therefore, even if it works, please remove the inline style sheets and move them to separate CSS files. Same for JavaScript file.
Thanks.