How do I make this style an external CSS/SCSS file?
Question
I have a peculiar code here for a Javascript dropdown menu, but I think it uses some kind of dynamic CSS.
After much tinkering I got the darn thing working. The thing is, I need the CSS to be a seperate file to import into the HTML document. This is where things get tricky. I have no idea what kind of code this is as I've never worked with it before. Does anyone have any idea how I can link this CSS to my HTML document externally?
<style class="cp-pen-styles">@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900"); @import url(http://fonts.googleapis.com/css?family=Pacifico); body { font-family: "Lato", Helvetica, Arial; font-size: 16px; } .text-center { text-align: center; } *, *:before, *:after { -webkit-border-sizing: border-box; -moz-border-sizing: border-box; border-sizing: border-box; } .container { width: 350px; margin: 50px auto; } .container > ul { list-style: none; padding: 0; margin: 0 0 20px 0; } .title { font-family: 'Pacifico'; font-weight: norma; font-size: 40px; text-align: center; line-height: 1.4; color: #2980B9; } .dropdown a { text-decoration: none; } .dropdown [data-toggle="dropdown"] { position: relative; display: block; color: black; background: #E6E6E6; -moz-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset; -webkit-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset; box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); padding: 10px; } .dropdown [data-toggle="dropdown"]:hover { background: #C0C0C0; } .dropdown .icon-arrow { position: absolute; display: block; font-size: 0.7em; color: #fff; top: 14px; right: 10px; } .dropdown .icon-arrow.open { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow.close { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow:before { content: '\\25BC'; } .dropdown .dropdown-menu { max-height: 0; overflow: hidden; list-style: none; padding: 0; margin: 0; } .dropdown .dropdown-menu li { padding: 0; } .dropdown .dropdown-menu li a { display: block; color: #6e6e6e; background: #EEE; -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); padding: 10px 10px; } .dropdown .dropdown-menu li a:hover { background: #f6f6f6; } .dropdown .dropdown-menu li ul li a { display: block; color: #6e6e6e; background: #EEE; -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); padding: 10px 10px; } .dropdown .dropdown-menu li ul li a:hover { background: #f6f6f6; } .dropdown .show, .dropdown .hide { -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .dropdown .show { display: block; max-height: 9999px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); animation: showAnimation 0.5s ease-in-out; -moz-animation: showAnimation 0.5s ease-in-out; -webkit-animation: showAnimation 0.5s ease-in-out; -moz-transition: max-height 1s ease-in-out; -o-transition: max-height 1s ease-in-out; -webkit-transition: max-height 1s ease-in-out; transition: max-height 1s ease-in-out; } .dropdown .hide { max-height: 0; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); animation: hideAnimation 0.4s ease-out; -moz-animation: hideAnimation 0.4s ease-out; -webkit-animation: hideAnimation 0.4s ease-out; -moz-transition: max-height 0.6s ease-out; -o-transition: max-height 0.6s ease-out; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; } @keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-moz-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-moz-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } </style>
What do I need to keep in the HTML document to link it to the CSS document, and what do I need to save in the CSS document? You can't put the imports in a CSS document.
I already tried to save everything strating from body (..}; til </script> and then making the code in the HTML:
<style class="cp-pen-styles" src="dropstyle.">@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900"); @import url(http://fonts.googleapis.com/css?family=Pacifico); </style>
But that did not work for me. Any suggestions?
3 answers
solution1
1 2015-09-08 15:55:17
Taking Darren's comment and adding it here, put the link to your style sheet inside the head section like this:
<link rel="stylesheet" type="text/css" href="/path/to/the/file.css"/>
My part: To link your fonts add this to your head section:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
Just so wee can close this question :)
solution2
1 2015-09-08 16:03:29
To link the CSS code you have posted here to a HTML document you need to do a few things.
1: Create a file with the name main.css (make sure you put it inside the same folder as the HTML file you want to link to).
2: Paste the CSS code into the main.css document you have just created
3: Go to the top of the HTML document you wish to link it to and do the following inside the head of the HTML doc.
<link rel="stylesheet" href="main.css">
solution3
0 ACCPTED 2015-09-08 16:05:49
Actually, your fonts imports can stay in you css file. However, in the CSS file you should NOT have the <style class="cp-pen-styles"> and </style> tags. Put everything in between them in the CSS file and then like the others mentioned, add the line below to the header:
<link rel="stylesheet" type="text/css" href="/path/to/the/file.css"/>
So your CSS file will look like this:
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,900");
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
font-family: "Lato", Helvetica, Arial;
font-size: 16px;
}
.text-center {
text-align: center;
}
*, *:before, *:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font-family: 'Pacifico';
font-weight: norma;
font-size: 40px;
text-align: center;
line-height: 1.4;
color: #2980B9;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: black;
background: #E6E6E6;
-moz-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
-webkit-box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
box-shadow: 0 1px 0 #EDEDED inset, 0 -1px 0 #C0C0C0 inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #C0C0C0;
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .dropdown-menu li ul li a {
display: block;
color: #6e6e6e;
background: #EEE;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li ul li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
@keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
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.
Related Question
How do I include an external CSS file as a rule for a class inside a .scss file?
How do I style ShadowDOM elements using external CSS in Firefox?
How do I make my style.scss(@import “variables “, @import “globals”, and @import “header”) to communicate with my stylesheet?
How do I style one HTML file with two CSS files?
How do I link all pages to the same css external file?
How do I view an external CSS file in Devtools?
CSS style are not applying when I import them from an external file
SCSS to Style.css
How to dynamically style a Styled Component that stores all the css in an external file
How to override style in imported scss file
Related Tags