HTML 5 & CS3 , Advice From Someone Who Knows What Their Doing? Good Or Bad Practice?

Question

0.00/5 (No votes)

See more:

, +

Hey guys,
Thanks for taking the time to read this question, i started programming my own html5 or web pages a while back and learned some of the basics i needed to ... you know make my own page... I was wondering if it would be a good practice or a bad practive to put all of my CSS code in my .HTML home page For Example :

XML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
#loading { position:absolute; top:0px; left:0px; height:100%; width:100%; background:#000; color:#fff; text-align:center; }

    .loader {
    text-align: center;
    position: absolute;
    top: 50%;
       
}
.loader span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 0.9s infinite alternate;
    -moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -webkit-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -webkit-transform: translateY(-21px);
  }
}
@-moz-keyframes loader {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0.9;
    -moz-transform: translateY(0);
  }
  100% {
    width: 24px;
    height: 24px;
    opacity: 0.1;
    -moz-transform: translateY(-21px);
  }
}
    .SplashScreen { 
        width: 1200px;
        height: 2000px;
        text-align: right;
        background-color: red;
    }
    <style>
</head>
<body>
</body>
</html>

Instead of putting it on a different .CSS file & linking to it in the html file or page... ?
Would it impact the speed at which my page loads ?
Would it confuse Google Bots or something ?

Thx Again in Advance.

Posted 7-Sep-13 11:49am

Someone_Amazingly_Awesome

Updated 7-Sep-13 11:51am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-09-07T16:12:00

This problem has nothing to do with HTML5 or 4 (or any HTML version, as soon as it can use CSS). I think there is absolutely nothing wrong with embedding CSS style in the page and it won't confuse anything, whatsoever.

As to the performance, it will be somewhat improved compared to the case of different HTML and CSS files, just because one file referenced in another file means initiation of two separate HTTP requests, which of course has certain overhead (initiation of request/response time, sending the package envelope with all the headers again, things like that). However, you cannot say that it improves the performance twice, especially if you compare average performance, when the user loads several HTML files. It depends on several different factors, so it's hard to estimate real performance gain, I don't think it can be considerable.

The CSS in files separate from HTML is used for reuse and better supportability of the site (if you need to change the styles for a set of similar pages, you don't want to retouch each file, and it would be error-prone, you really want them to share the same CSS files), and to be able to provide consistent styles common for the whole sites. In most cases, these qualities are more important than performance.

—SA