I’m working on an app for Windows 8 written in HTML, CSS, and JavaScript. I’m struggling with the CSS formatting part. I was able to get my app formated so it appears the way I want it to look somewhat but I would like to know how I can cleanup my CSS? I “Googled” and experimented until I got the layout I wanted but I would like to know the right, preferred way to format with CSS?
Below is my code:
<style type="text/css">
.quiz p {
margin-left: 120px;
}
.quizDiv2 {
margin-top: 220px;
width: 320px;
margin-left: auto;
margin-right: auto;
}
.cenDiv {
text-align: center ;
}
.cenDiv2 {
text-align: center ;
font-size:250%;
}
.alignleft {
float: left;
width:33.33333%;
text-align:left;
}
.aligncenter {
float: left;
width:33.33333%;
text-align:center;
}
.alignright {
float: left;
width:33.33333%;
text-align:right;
}
.alignleft2 {
float: left;
}
.alignright2 {
float: right;
}
.container {
width:320px;
}
.first,
.second {
width:100%;
text-align:right;
display:table;
font-size:250%;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:100%;
text-align:right;
border-top:2px solid black;
border-color:black;
}
.correct {
font-size:250%;
}
</style>
</head>
<body>
<div class="quizDiv2">
<div id="textbox">
<p class="alignleft" id="statQuestionDiv">1/10</p>
<p class="aligncenter" id="statTimerDiv">02:27</p>
<p class="alignright" id="statScoreDiv">100%</p>
</div>
<div style="clear: both;"></div>
<div class="container">
<div class="first" id="mathProblemDiv1">1,483</div>
<div class="second">
<div class="plus">+</div>
<div class="number" id="mathProblemDiv2">4,573</div>
</div>
<div class="third">
<div class="result"></div>
</div>
</div>
<div class="cenDiv">
<!-- Fill in the blank div -->
<div id="fillBlankDiv">
<input id="userAnswer" type="text" />
<p>
<button id="btn7">7</button>
<button id="btn8">8</button>
<button id="btn9">9</button>
</p>
<p>
<button id="btn4">4</button>
<button id="btn5">5</button>
<button id="btn6">6</button>
</p>
<p>
<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
</p>
<p>
<button id="btn0">0</button>
<button id="btnNeg">+/-</button>
<button id="btnOk">OK</button>
</p>
</div>
</div>
<div class="cenDiv2">
<div id="checkDiv">CORRECT!</div>
</div>
</div>
</body>
</html>
You can use this easy CSS Cleaner. This site is amazing and will be great for cleaning up future css styles.
You can just copy and paste your styles in the CSS Input and select the size of the output. I recommend High.
http://www.cleancss.com/
Hope this helps!
Here is your code after cleaned up:
UPDATE: For best practices in css, If you have a style you are going to be using similar styles a good bit. For example text-aligning and font-sizes, and Columns. Make class in your css like this:
Then on your html just add the classes, for example:
That way use can apply the styles that you use over and over without having to add the to each css class. And then if you want to change a specific one, be more specific in calling your css and it will override the default styles. For example:
.container .onethird { width:100%; }will override
.onethird { width:33.33333%; }This is how I work in css, and its helped me so much. Hope this helps!