I want to add the smooth scrolling effect so users can go straight to the bottom of the page to fill out a form. I need to add the smooth scrolling effect using inline CSS. I used the code below but I'm not sure why is not working?
/* added by edito for visualization purpose */
a {
display: block;
margin-bottom: 400vh;
}
<div>
REGISTER NOW
<div id="quick-contact" class="quick-contact pad-bottom-30">
<h4>REGISTER NOW</h4>
</div>
</div>
scroll-behavior: smooth needs to bet applied to the scrolling element which by default would be html:
/* added by edito for visualization purpose */
a {
display: block;
margin-bottom: 400vh;
}
<html style="scroll-behavior: smooth;">
<body>
<div>
REGISTER NOW
<div id="quick-contact" class="quick-contact pad-bottom-30">
<h4>REGISTER NOW</h4>
</div>
</div>
</body>
</html>
I would suggest using the latest scrollIntoView() or scrollTo() function using JavaScript. You can check [MDN Doc][1]s, because scroll-behavior:smooth doesn't have all browser support plus we can't make customisations.
LOGIC YOU NEED :.
let link = document.querySelector('a');
let targetElement = document.querySelector(".quick-contact");
link.addEventListener('click', function(){
targetElement.scrollIntoView({behavior: "smooth"});
});
MAKE THE FOLLING CHANGES IN HTML AND TRY THIS, CODE, I FIND IT THE SIMPLEST
let link = document.querySelector('.link');
let targetElement = document.querySelector(".quick-contact");
link.addEventListener('click', function(e){
e.preventDefault();
targetElement.scrollIntoView({behavior: "smooth"});
});
.main {
height:290vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
a {
flex:1;
}
<div class="main">
REGISTER NOW
<div class="quick-contact pad-bottom-30">
<h4>REGISTER NOW</h4>
</div>
</div>
body {
scroll-behavior: smooth;
}
I'm building a website that uses images which must all be scaled down by a consistent factor (0.25). Like others have pointed out here and here, scaling is an operation that is done after the page elements are rendered, resulting in whitespace surrounding the scaled image. I need to get rid of that extra space.
I've read every solution and still can't figure this out. I'm totally fine with a javascript solution—which I still can't figure out—but I can't help but feel there is an alternative to using the scaling element and bypassing javascript altogether.
I could scale all of the original images down using imagemagick, but that's a last resort for a number of reasons.
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
background: #555;
}
img {
display: block;
transform: scale(0.25);
}
</style>
</head>
<body>
<p>Here's my first paragraph.</p>
<div class="image-container">
<img src="https://live.staticflickr.com/65535/51806458206_1e7ba12389_o.png"><img>
<img src="https://live.staticflickr.com/65535/51805498867_57abd12b23_o.png"><img>
</div>
<p>Here my second paragraph</p>
</body>
</html>
Here's a fiddle: https://jsfiddle.net/drfk7xz9/31/. Thank you in advance 🙏
Figured it out (with javascript)
window.onload = function () {
resizeImages();
};
function resizeImages() {
var images = document.querySelectorAll("figure > img");
var originalWidth = 0;
for (var i = 0; i < images.length; i++) {
originalWidth = images[i].naturalWidth;
images[i].style.width = (originalWidth * 0.25) + "px";
}
}
Traditionally, you can add CSS in three ways:
External CSS via <link rel="stylesheet" href="foo.css">
Internal CSS via <style> h1 { ... } in the <head> element
Inline CSS via the style="..." attribute on specific elements
Inline CSS has the drawback that I can't use CSS classes, which is something I need to do. Is there a way to define internal CSS (e.g. a <style></style> fragment in the <body> element?
This would be much easier for me because I could create a self-contained HTML snippet with a method in my server code. This kind of method is necessary because I don't control the <head> section. It is owned by a commercial product. I can only insert content inside the <body>.
Example:
<div>
<style>
.myclass {...}
</style>
<div class="myclass">...</div>
</div>
Related: https://htmx.org/essays/locality-of-behaviour/
I have seen other websites (like https://amazon.com) where they appear to have several style tags inside the <body>.
There is a huge gap between theory and practice. Many sites use <style> in the body.
The editors decided against it. But maybe there will be a change in the future: https://github.com/whatwg/html/issues/1605
Under the premise, you don't care about invalid HTML in relation of <style> inside <body> (which is not that uncommon), you can assign unique identifier i.e.:
<style>
.my-class-1 {
color: gold;
}
</style>
<div class="my-class-1">Fragment Content</div>
<style>
.my-class-2 {
color: tomato;
}
</style>
<div class="my-class-2">Fragment Content</div>
<div class="my-fragment-1">
<style>
.my-fragment-1 .my-class {
color: teal;
}
</style>
<div class="my-class">Fragment Content</div>
</div>
<div class="my-fragment-2">
<style>
.my-fragment-2 .my-class {
color: hotpink;
}
</style>
<div class="my-class">Fragment Content</div>
</div>
<style id="my-style-1">
#my-style-1 + div {
color: orangered;
}
</style>
<div>Fragment Content</div>
<style id="my-style-2">
#my-style-2 + div {
color: indigo;
}
</style>
<div>Fragment Content</div>
the simpler answer to your question is "Yes" and I'll elaborate on this with several examples below. A <style> tag will work wherever you place it within either the <head> or the <body>.
A style tag placed in the <body> tag technically does violate HTML syntax rules, it's surprisingly common in practice, even among some larger corporations.
There are several different methods for including <body>-level <style> tags in your project.
1. Pure HTML <style> tags (the static method)
If you have all the styles you need already written up and there are no dynamic pieces needed, you can simply write those styles into a <style> tag statically and include those in the code, as seen in this example below:
<html>
<head></head>
<body>
<div class="custom-widget">
<h1>This is a title</h1>
<p>This is some text.</p>
<style>
.custom-widget {
display: block;
padding: 20px;
border: 5px double red;
}
.custom-widget h1 {
text-transform: uppercase;
}
.custom-widget h1::first-letter {
font-size: 150%;
}
.custom-widget p {
font-style: italic;
}
</style>
</div>
</body>
</html>
2. Writing the styles into a <style> tag as text using JavaScript
If you need to load the styles into your <style> tag dynamically and you simply need plain text styles that you will not need to change much after creating them. You can create the <style> block and then inject the CSS styles as plain text as desired, as seen in this example below:
const counter = document.getElementById('counter');
let count = +counter.dataset.count;
const customWidgetStyle = document.querySelector('.custom-widget style'),
countdown = setInterval(() => {
if (count--) {
counter.innerText = `Importing CSS in ${count}…`;
} else {
clearInterval(countdown);
counter.remove();
customWidgetStyle.innerHTML = `
.custom-widget {
display: block;
padding: 20px;
border: 5px double red;
}
.custom-widget h1 {
text-transform: uppercase;
}
.custom-widget h1::first-letter {
font-size: 150%;
}
.custom-widget p {
font-style: italic;
}
`;
}
}, 1000);
<html>
<head></head>
<body>
<div class="custom-widget">
<h1>This is a title</h1>
<p>This is some text.</p>
<style></style>
</div>
<span id="counter" data-count="3">Importing CSS in 3…</span>
</body>
</html>
3. Creating cssRules styles into a <style> tag using the JavaScript CSSStyleSheet.insertRule() method
If you need even more flexibility with how you add your styles, you can use the CSSStyleSheet.insertRule() (MDN docs), which will dynamically allow you to add and manage the styles more granularly. This may be overkill for your specific need but there's a lot of power, flexibility, and control when working with the CSSOM.
Here is an example of this method, in which I use an addStylesheetRules function example defined on the MDN docs page for insertRule under the heading Examples, here:
const addStylesheetRules = (rules, stylesheet) => {
if (stylesheet === undefined) {
const style = document.createElement('style');
stylesheet = style.sheet;
document.head.appendChild(style);
}
for (let i = 0; i < rules.length; i++) {
let j = 1,
propStr = '';
rule = rules[i];
const selector = rule[0];
if (Array.isArray(rule[1][0])) {
rule = rule[1];
j = 0;
}
for (let pl = rule.length; j < pl; j++) {
const prop = rule[j];
propStr += prop[0] + ': ' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
}
stylesheet.insertRule(selector + '{' + propStr + '}', stylesheet.cssRules.length);
}
}
const customWidget = document.querySelector('.custom-widget'),
customWidgetStyleTag = document.createElement('style');
customWidget.appendChild(customWidgetStyleTag);
const customWidgetStylesheet = customWidgetStyleTag.sheet;
addStylesheetRules([
['.custom-widget',
['display', 'block'],
['padding', '20px'],
['border', '5px double red']
],
['.custom-widget h1',
['text-transform', 'uppercase']
],
['.custom-widget h1::first-letter',
['font-size', '150%']
],
['.custom-widget p',
['font-style', 'italic']
]
], customWidgetStylesheet);
<html>
<head></head>
<body>
<div class="custom-widget">
<h1>This is a title</h1>
<p>This is some text.</p>
</div>
</body>
</html>
Please let me know if there is any more context I can add to better answer your question.
It is going to work in html5, even if it's regarded as invalid in html4.
I have an example from where I work now.
We are adding a slideshow for some books in a library catalogue and because this is done with a plugin the only possible way to style this is to include a <style> block with the html, as this plugin doesn't and shouldn't have access to <head> of the CMS it is designed for.
However, this solution is a last resort because of limitations of how the CMS is built and should be avoided.
Couldn't you target the head element with Javascript and insert a style programmatically?
<script>
var head = document.querySelector('head')[0];
var css = 'div { background: red; }',
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
head.appendChild(style) ;
</script>
As far as I can understand from the description you gave, you don't have the access to the <head>...</head> element, but you are free to edit the body. Also, you want to use CSS3 Classes, but with inline CSS, you can't.
I can't find a way in pure HTML/CSS, so I suggest you to use JQuery.
<script async src="https://cdn.statically.io/libs/jquery/3.6.0/jquery.min.js" />
<script>$('head').append('<style>/*Your styles here*/</style></script>');
Now, add classes to the html elements and edit the content between the <style /> tag. Also, place this script at the end of <body> so that you can avoid the probable weird problems caused by placing this in between. XD
But remember, this will change the head after the user has loaded the page. So, theoretically, the users will first see an ugly html page without styles, then styles will be loaded and they'd see the page with styles.For more explanation, check out the official documentation: https://api.jquery.com/append/
Your example should work. I work with WordPress using custom html where all the custom code goes into a <body> tag, and styling like so should work within each page (added more divs just to show an example that one style tag can hold classes for all divs within a div):
<div>
<style>
.className { ... }
.classNameTwo{ ... }
.classNameThree{ ... }
</style>
<div class="className"></div>
<div class="classNameTwo">
<div class="classNameThree"></div>
</div>
</div>
I'm trying to make a double rollover link.
When rolling over 'foto'; I'd like to make 'fotografie' appear and 'grafisch' disappear (same thing: when rolling over grafisch, 'foto' to disappear). I've found that it'd be easiest with opactiy, but I can't seem to figure out the code.
Any help highly appreciated.
HTML
<a class="fotografie" href="URL">
<div class="foto">foto</div>
<div class="fotografieh">fotografie</div>
</a><a class="grafischontwerp" href="URL2">
<div class="grafisch">grafisch</div>
<div class="grafischontwerph">grafisch ontwerp</div>
</a>
CSS
.masterplan .fotografie {color: #ff6666;}
.masterplan .fotografie .fotografieh { display: none; }
.masterplan .fotografie:hover .foto { display: none; }
.masterplan .fotografie:hover .fotografieh { display: inline;}
.masterplan .grafischontwerp {color: #33cccc; }
.masterplan .grafischontwerp .grafischontwerph { display: none; }
.masterplan .grafischontwerp:hover .grafisch { display: none; }
.masterplan .grafischontwerp:hover .grafischontwerph { display: inline;}
Seeing no easy answer using just CSS, I'd like to suggest adding simple few lines of jQuery:
$(document).ready(function() {
$(".foto").hover( function() { // Assign 'hover' action to all elements with 'foto' class
$(".grafisch").toggle(); // 'toggle' display on 'hover' event trigger for all elements with 'grafisch' class
});
$(".grafisch").hover( function() {
$(".foto").toggle();
});
/* insert other jQuery code, if any */
...
});
I hope that helps, IF you're using jQuery.
EDIT:
Michael, I suspected that you may not be familiar with JavaScript/jQuery. There are tons of examples and tutorials on the web you can easily find. Also, be sure to search StackOverflow as well.
If you expect to continue to work with html and css at all, I'd suggest learning at least the basic concept behind JavaScript and jQuery, which is one of the most widely used JavaScript framework/libraries.
To get you started, check out the following links:
Setting up jQuery
How jQuery Works
Notice that I also added some comments to the code I wrote earlier. Let me know if you have any other questions on this topic.
Check out this demo --> DEMO
Is there a way to reset a background-color property of a :hover rule?
I have a list of elements which are highlighted when mouse goes over. I want to apply an additional CSS rule that will disable highlighting. Here is a demo:
http://jsfiddle.net/vqLuU/1/
What should I put in the second appearance of the "style1:hover" rule in order to disable highlighting at all? The result must be the same with case when all "style1:hover" rules are removed.
I do not want to redefine all styles ("green" and "blue") again. My goal is to disable the "style1:hover" rule.
HTML:
<div class="style1 green">AAA</div>
<div class="style1 blue">BBB</div>
CSS:
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.style1:hover {
background-color: red;
}
.style1:hover {
/* How to disable highlighting from here? */
}
Thanks!
Since the first appearance of the .style1:hover rule cannot be changed or removed, the only way to achieve that is by adding the following rules:
.green:hover {
background-color: green;
}
.blue:hover {
background-color: blue;
}
I feel the need to add a disclaimer: this solution is not very elegant, and I don't think of it as the best solution, I think it's the only possible solution given the requirements.
Note: this may not be a viable solution as you have not mentioned whether you can use JavaScript.
You can remove the CSS rule by editing the stylesheets with JavaScript. However it doesn't feel right to me, so I can't fully recommend this =) Maybe other SOers can comment on this method (see jsFiddle).
for (var i = 0; i < document.styleSheets.length; i++ ) {
var done = false;
var sheet = document.styleSheets[i];
# Some browsers use rules (Chrome) others use cssRules (Firefox)
var rules = sheet.rules || sheet.cssRules;
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
var selectorText = rule.selectorText;
if (selectorText.indexOf(".style1:hover") != -1) {
sheet.deleteRule(j);
done = true;
break;
}
}
if (done) break;
}
.style1:hover {
background-color: red;
}
.style1:hover {
background-color: transparent !important;
}
Easiest way I can think to achieve what I think you want is to add an extra class to the elements. I've chosen 'hoverEnabled'
You can simply add or remove the class hoverEnabled to an element to have a different :hover style attached.
CSS
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.style1.hoverEnabled:hover {
background-color: #FFAAAA;
}
.style2.hoverEnabled:hover {
background-color: #AAAAAA;
}
HTML
<div class="style1 green">AAA</div>
<div class="style1 blue">BBB</div>
<div class="style1 hoverEnabled green">AAA</div>
<div class="style2 hoverEnabled blue">BBB</div>