CSS style doesn't apply
Question
So i was trying a template css style for a form ( Style 6)
But the first element of my CSS doesn't apply if i use it through external css file. If i insert it directly into html page, it does work as usual. I use chrome for testing but also have tried with ie.
My html is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8"></meta>
<title>CVS upload page</title>
<link rel="stylesheet" type="text/css" href="static/css/app.css"/>
</head>
<body>
<div class="form-style-6">
<h1>Upload your cvs files</h1>
<form method="POST" enctype="multipart/form-data" action="/dcollect/upload" name ="uploadForm">
File one:
<input type="file" name="fileLastWeek"
accept=".csv, application/vnd.openxmlformats- officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/><br />
File two:
<input type="file" name="fileNew"
accept=".csv, application/vnd.openxmlformats- officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/><br />
<input type="submit" value="Upload"/>
</form>
</div>
</body>
</html>
And my CSS is as follows:
<style type="text/css">
.form-style-6 {
font: 95% Arial, Helvetica, sans-serif;
max-width: 400px;
margin: 10px auto;
padding: 16px;
background: #F7F7F7;
}
.form-style-6 h1{
background: #43D1AF;
padding: 20px 0;
font-size: 140%;
font-weight: 300;
text-align: center;
color: #fff;
margin: -16px -16px 16px -16px;
}
.form-style-6 input[type="file"],
.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select
{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 3%;
color: #555;
font: 95% Arial, Helvetica, sans-serif;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus
{
box-shadow: 0 0 5px #43D1AF;
padding: 3%;
border: 1px solid #43D1AF;
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
background: #2EBC99;
}
</style>
The strange thing is that if i insert a dummy element at the beginning of the css it works like charm:
.dummy {
}
Any idea why it happens? Thanks.
3 answers
solution1
3 ACCPTED 2016-06-08 09:15:26
Your CSS file should contain CSS and only CSS.
<style type="text/css"> is HTML, not CSS and should not appear in the CSS file.
The CSS parser is trying to treat it as a selector, hitting a syntax error and then ignoring (correctly) the invalid, first rule-set.
solution2
2 2016-06-08 09:18:20
If your CSS example is in .css file. Your first letter is not need ( <style type="text/css"> ). Remove this code from your css file.
solution3
1 2016-06-08 10:12:57
See the link here this is your code
your code is ok but if you want to write your code in external css file this you only need to tag you have to link your css file in tag like
<link rel="stylesheet" type="text/css" href="mystyle.css">
and you don't need to write your css code in
<style type="text/css">code...... </style>
if you want to link to internal css file you will write you css code in
<style type="text/css">css code....... </style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.