I am a begginer in HTML and CSS, and I am wondering if there is an equivalent of <style media="screen"></style> for .css files ?
I have my main HTML that call :
<style media="screen">
.bg-red{
background: red;
</style>
I am trying to add this part in my style.css file. I tryed to add #media properties, but did not succeed, and don't see my mistakes.
#media screen and (min-width: 0px){
.bg-red{
background: red;
}
}
And
#media screen {
.bg-red{
background: red;
}
}
I tried min-width, max-width, etc but without results.
Thank you for your advice !
Here is my code:
https://codepen.io/arthurdraws/pen/gOYJwRL
body, html{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.btn {
font-weight: 800;
font-size: 2rem;
line-height: 4rem;
background-color: gainsboro;
text-transform: uppercase;
padding: 1rem;
margin: 5rem;
color: black;
text-decoration: none;
}
.btn:hover{
background-color: red;
}
p{
padding-left: 20%;
padding-right: 20%;
font-weight: 400;
font-size: 1.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- animsition.css -->
<link rel="stylesheet" href="https://unpkg.com/animsition#latest/dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="https://unpkg.com/animsition#latest/dist/js/animsition.min.js"></script>
<style media="screen">
.bg-red{
background: red;
}
</style>
</head>
<body>
<h1>This is a test page</h1>
<div class="animsition-layer" data-animsition-overlay="true">
<a href="#" class="animsition-link btn" data-animsition-out-class="overlay-slide-out-left bg-red" data-animsition-out-duration="300">
Button
</a>
</div>
<p>How to transfer the "style media="screen" { .bg-red{background: red} }" from my HTML sample to my CSS file ?
</p>
<script>
// OVERLAY
$(document).ready(function() {
$(".animsition-layer").animsition({
inClass: 'overlay-slide-in-top',
inDuration: 0,
outDuration: 420,
linkElement: '.animsition-link',
loading: false,
loadingClass: 'animsition-loading',
loadingInner: '',
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : true,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
})
});
</script>
</body>
</html>
you need to increase the specifity of your selector :
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
#media screen {
body > .bg-red{
background: red;
}
}
Snippet demo below :
$(document).ready(function() {
$(".animsition-layer").animsition({
inClass: 'overlay-slide-in-top',
inDuration: 0,
outDuration: 420,
linkElement: '.animsition-link',
loading: false,
loadingClass: 'animsition-loading',
loadingInner: '',
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: ['animation-duration', '-webkit-animation-duration'],
overlay: true,
overlayClass: 'animsition-overlay-slide',
overlayParentElement: 'body',
transition: function(url) {
window.location.href = url;
}
})
});
#media screen {
body>.bg-red {
background: red;
}
}
body,
html {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.btn {
font-weight: 800;
font-size: 2rem;
line-height: 4rem;
background-color: gainsboro;
text-transform: uppercase;
padding: 1rem;
margin: 5rem;
color: black;
text-decoration: none;
}
.btn:hover {
background-color: red;
}
p {
padding-left: 20%;
padding-right: 20%;
font-weight: 400;
font-size: 1.5rem;
}
<!-- animsition.css -->
<link rel="stylesheet" href="https://unpkg.com/animsition#latest/dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="https://unpkg.com/animsition#latest/dist/js/animsition.min.js"></script>
<h1>This is a test page</h1>
<div class="animsition-layer" data-animsition-overlay="true">
<a href="#" class="animsition-link btn" data-animsition-out-class="overlay-slide-out-left bg-red" data-animsition-out-duration="300">
Button
</a>
</div>
<p>How to transfer the "style media="screen" { .bg-red{background: red} }" from my HTML sample to my CSS file ?
</p>
If you want the link to have .bg-red, then you need to add it to the class attribute instead of your data-animsition-out-class.
#media screen {
.bg-red: {
background-color: red;
}
}
<a href="#" class="animsition-link btn bg-red" data-animsition-out-class="overlay-slide-out-left" data-animsition-out-duration="300">
Related
I am having a rough time with a strange problem related to background-color. Upon viewing the html file in a browser like chrome or firefox the background-color is not applying to the shop link(in the .header__shop selector). But when I inspect it and hover over the element, the background color suddenly appears in chrome and firefox.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.cdnfonts.com/css/helvetica-neue-9?styles=49034,49031,49033,49035,49032,49036,49038,49040,49042,49044,49037,49039,49041,49043,49045,49046"
rel="stylesheet"
crossorigin
/>
<link rel="stylesheet" href="style.css" />
<title>Assignment 4</title>
</head>
<body>
<header class="header">
<div class="header__top-ribbon">
<a href="#" class="header__logo margin-left-small margin-right-small"
><img src="./images/logo.png" alt="Motorolo logo"
/></a>
Explore
<a class="header__shop" href="#">Shop</a>
Customer Hub
</div>
</header>
</body>
</html>
CSS:
:root {
--header-active-background: #f2f2f2;
--header-link-color: #00000099;
--black: #000000;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
font-size: 62.5%;
}
header a:link,
header a:visited {
display: block;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: var(--header-link-color);
font-size: 1.2rem;
padding: 0 1.2rem;
letter-spacing: 0.03125rem;
}
header a:link {
transition: all 0.5s;
}
header a:hover {
color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
margin-left: 2rem !important;
}
.margin-right-small {
margin-right: 2rem !important;
}
/* header */
.header__logo img {
height: 45%;
}
.header {
position: fixed;
top: 0;
}
.header__top-ribbon {
height: 6.4rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header__shop {
background-color: var(--header-active-background);
font-weight: bold;
color: var(--black) !important;
}
.header__logo {
padding: 0 !important;
}
I have tried putting !important in
background-color: var(--header-active-background);
in the
.header__shop
selector and it didn't work. Tried taking screenshot and snipping tool but the taken screenshot shows up the background color even if it is not there as seen by eyes!
The background color showed up first time for me. Browsers cache pages and content (including CSS) and sometimes it helps to force refresh (Ctrl+Shift+R, or Ctrl+Click on refresh button) instead of normal refresh. Inspecting may have made the browser reload the files.
I have created a html page where the header navigation is created on a separate html navigation.html and linked to the index page. While I designed and developed the navigation bar with header tag and run it, its works perfectly and is even totally responsive.
But one I connect the navigation.html to index.html, the header navigation is broken and doesn't work. I tried every fix available and nothings working.
Please Help.
Thanks in advance.
Here's my code.
Here's the css file.
header {
font-family: "Poppins", sans-serif;
display: flex;
background-color: #5459ff;
padding: 1rem 0;
align-items: center;
}
header a {
text-decoration: none;
}
.logo {
margin: 0 0 0 3%;
}
nav {
margin: 0 6% 0 auto;
right: 0;
}
.nav_list {
display: flex;
align-items: center;
}
.nav_item {
margin: 0 8px;
}
.nav a:link,
.nav a:visited,
.nav a:active,
.nav a:hover {
color: #fff;
text-decoration: none;
}
.nav_link {
padding: 10px;
color: #fff;
font-size: 14px;
border-radius: 5px;
}
.nav_link:hover {
border-bottom: 1px solid #f9f070;
}
.header_toggle,
.header_close {
display: none;
}
#media screen and (max-width: 768px) {
header {
height: 80px;
justify-content: space-between;
padding: 0 28px;
}
.header_toggle {
display: inline;
font-size: 32px;
color: #f9f070;
}
.header_close {
position: absolute;
right: 24px;
color: #f9f070;
display: block;
font-size: 32px;
border-radius: 50%;
}
.nav {
position: fixed;
top: 0;
right: -100%;
margin-right: 0%;
background-color: #5459ff;
color: #fff;
width: 60%;
height: 100vh;
padding: 24px 0;
z-index: 100;
transition: 0.5s;
}
.nav_list {
display: flex;
flex-direction: column;
margin: 30% 10% 0 0;
}
.nav_item {
margin: 30% 0 0 0;
}
.show {
right: 0;
}
}
.main-page {
display: grid;
width: 100%;
height: 100%;
background-color: #000241;
font-family: "Roboto", sans-serif;
}
.headp {
display: grid;
grid-template-columns: 2fr 2fr;
}
.headp-head {
color: #f9f070;
font-size: 90px;
font-family: "Secular One", cursive;
line-height: 1.1;
margin: 4% auto auto 6%;
}
.head-desc {
color: #f9f070;
font-size: 18px;
font-weight: 600;
font-family: "Roboto", sans-serif;
word-spacing: 4px;
margin: 10px 0 0 50px;
}
.exp-button {
border: 1px solid #f9f070;
border-radius: 10px;
color: #f9f070;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 30px 0 0 50px;
padding: 10px 20px 10px 20px;
cursor: pointer;
transition: all 1s;
}
.headp a:link {
color: #f9f070;
text-decoration: none;
}
.headp a:visited {
color: #f9f070;
text-decoration: none;
}
.headp a:active {
color: #f9f070;
text-decoration: none;
}
.headp a:hover {
color: #f9f070;
}
Index.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/css?f[]=nippo#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js">
</script>
<script>
$(function(){
$("#mainnav").load("navigation.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div class="page-container main-page">
<div class="page-wrap">
<div class="cursor"></div>
<div id="mainnav"></div>
<div class="headp">
<div>
<p class="headp-head">Heading</p>
<p class="head-desc">Subheading</p>
</div>
<div id="footer"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js">
</script> f
<script src="js/vendor/modernizr-3.8.0.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js" type="module">
</script>
<script src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js">
</script>
<script src="js/plugins.js">
</script>
<script src="js/main.js">
</script>
</div>
</body>
</html>
navigation.html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0" name="viewport">
<link href="css/main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="./img/logo.svg" style="pointer-events: none;" draggable="false" ondragstart="return false;" alt="logo_main">
</div>
<nav class="nav" id="nav-menu">
<ion-icon name="close-outline" class="header_close" id="close-menu"></ion-icon>
<ul class="nav_list">
<li class="nav_item">Link1</li>
<li class="nav_item">Link2</li>
<li class="nav_item">Link3</li>
<li class="nav_item">Link4</li>
</ul>
</nav>
<ion-icon name="grid-outline" class="header_toggle" id="toggle-menu"></ion-icon>
</header>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<script src="js/main.js"></script>
</body>
</html>
main.js
const navMenu = document.getElementById("nav-menu"),
toggleMenu = document.getElementById("toggle-menu"),
closeMenu = document.getElementById("close-menu");
toggleMenu.addEventListener("click", () => {
navMenu.classList.toggle("show");
});
closeMenu.addEventListener("click", () => {
navMenu.classList.remove("show");
});
I am writing an HTML Document. I am trying to make no space between a p and a div. There were no error messages included.
I have already tried:
adding 0px margin, padding to the p element and div element
making no whitespace between them in the code
Code:
#IO-out {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings";
}
.t.normal {
color: white;
background-color: black;
}
html
<head>
<title>
ivyghostkit
</title>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
<!-- p elements with class "pn" are added here using javascript -->
</div>
<p id="VoidKeyboard"></p>
</div>
<script src="g.core.js"></script>
</body>
</html>
For clarification, the problem is that noticeable space is inbetween #VoidKeyboard and all p elements in #IO-out.
Add this in your css file
p{
margin: 0;
padding: 0;
}
And add some text in your markup..
Here is the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#IO-out {
width: 100%;
height: 100%;
/** make void keyboard work **/
margin: 0px;
padding: 0px;
}
p{
margin: 0;
padding: ;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
color: white;
background-color: black;
}
</style>
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
p elements with class "pn" are added here using javascript
</div>
<p id="VoidKeyboard">Remove Spacing</p>
</div>
</body>
</html>
I am trying to generate a PDF using ThymeLeaf. I'd like to apply style to my PDF using CSS. I've already done it by linking a CSS file in the html file, but this time I'd like to put the CSS in the html file in a <style></style>.
Here is the HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css" media="print"/>
<title>PDF Report</title>
</head>
<style type="text/css">* {
font-family: Calibri, sans-serif, Arial, sans-serif;
text-align: justify;
}
h4{
color : darkblue;
}
h2{
color : #262626;
}
img {
width: 400px;
display: block;
margin-left: auto;
margin-right: auto;
}
div.header {
display: block; text-align: center;
position: running(header);
background-color: gold;
}
div.footer {
background-color: #262626;
color: white;
display: block; text-align: center;
position: running(footer);
}
div.content {page-break-after: always;}
#page {
#top-center { content: element(header) }
}
#page {
#bottom-center { content: element(footer) }
}</style><body>
<div class='header'>my first report header</div>
<div class='footer'>my first report footer</div>
<h1>[[${reportTitle}]]</h1><h2>[[${docTitle1}]]</h2>
<h4>[[${docUrl1}]]</h4>
<div>[[${docContent1}]]</div>
<br/>
<img src="document1.jpg"/><h2>[[${docTitle2}]]</h2>
<h4>[[${docUrl2}]]</h4>
<div>[[${docContent2}]]</div>
<br/>
<img src="document2.jpg"/>
</body>
</html>
Actually, it just read the CSS as plain text and it doesn't apply the style. Is there anything I am doing wrong or is this just not possible to apply CSS without an external file?
I am using the polymer paper-slider in my application, however, it always stays stuck in the initial position and does not drag on user action. The progress bar is also not visible. It looks like the following at the moment :
I am using the following code for this :
<!doctype html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../components/font-roboto/roboto.html">
<link rel="import"
href="../components/core-header-panel/core-header-panel.html">
<link rel="import"
href="../components/core-toolbar/core-toolbar.html">
<link rel="import"
href="../components/paper-tabs/paper-tabs.html">
<link rel="import" href="post-card.html">
<link rel="import" href="components/paper-button/paper-button.html">
<link rel="import" href="components/paper-slider/paper-slider.html">
<style shim-shadowdom>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
paper-slider{
width:800px;
}
core-toolbar {
background: #03a9f4;
color: white;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
.container {
width: 80%;
margin: 50px auto;
}
paper-button[raised].colored {
background: #03a9f4;
color: white;
margin-top: 30px;
text-align: center;
vertical-align: middle;
}
.slider-markers, #sliderBar, #sliderKnob {
-webkit-user-select: none;
-webkit-user-drag: none;
}
paper-slider::shadow #sliderKnobInner
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderKnobInner::before
{
background-color: #0f9d58;
}
paper-slider::shadow #sliderBar::shadow #activeProgress {
background-color: #0f9d58;
}
#media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}
</style>
</head>
<body fullbleed vertical layout unresolved>
<core-header-panel flex mode="normal">
<core-toolbar>
<span flex>Flow</span>
</core-toolbar>
<div class="container" layout vertical center>
<post-card>
<img width="70" height="70"
src="../images/venturimeter.jpg">
<h2>Venturimeter</h2>
<br/>
<div>In order to</div>
<br/><br/>
<paper-slider pin value="50"></paper-slider>
<br/><br/>
</post-card>
<paper-button span raised class="colored" onclick="window.open('Page3.html','_parent');" layout center horizontal>Next</paper-button>
</core-header-panel>
</body>
</html>
What is the mistake I am making here? How do I fix this ?
Thanks !