The question is to use css to position and coloring the articles.
Question description screenshot here
The original code provided:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<style>
/* Write your CSS solution here (do not edit the surrounding HTML) */
</style>
</head>
<body>
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
</body>
</html>
Is it really possible to solve the question without distinguishing this four article tags? the only solution I came up with is to add 'class' attribute and position & coloring each of them accordingly, but this violates the rule that we cannot edit the surrounding HTML.
Thanks in advance!
If you cannot edit your html you could use nth-child selector like this:
body article:nth-child(1){background: red;}
body article:nth-child(2){background: blue;}
body article:nth-child(3){background: green;}
body article:nth-child(4){background: orange;}
body article{float: left; width:50%; padding-bottom: 50px;}
https://jsfiddle.net/Lczrmb0k/2/
Yes, you can use the nth-child attribute and reference each article by its position relative from parent. Meaning:
if you want to set a redcolor to first article your rule should be:
article:nth-child(1){color:red}
For second sibling:
article:nth-child(2){color:blue}
They all can be referenced by a number :)
You can even do more crazy stuff without editing your HTML, take a look this article
You can use :nth-child
article:nth-child(2n){
background-color: red;
}
article:nth-child(2n+1){
background-color: yellow;
}
article:nth-child(3n){
background-color: lightblue;
}
article:nth-child(4n+3){
background-color: lightgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<style>
/* Write your CSS solution here (do not edit the surrounding HTML) */
</style>
</head>
<body>
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
</body>
</html>
Here is a solution:
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
article {
display: inline-block;
box-sizing: border-box;
width: 50%;
height: 50%;
float: left;
}
article:nth-child(1) {
background: red;
}
article:nth-child(2) {
background: orange;
}
article:nth-child(3) {
background: tomato;
}
article:nth-child(4) {
background: teal;
}
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
You should use nth-child css function.
body {
margin: 0px;
}
article {
width: 50%;
float: left;
height: 50vh;
}
article:nth-child(1) {
background: red;
}
article:nth-child(2) {
background: yellow;
}
article:nth-child(3) {
background: blue;
}
article:nth-child(4) {
background: green;
}
<head>
<meta charset="utf-8">
<title>Articles</title>
</head>
<body>
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
</body>
Related
I want to color the unordered list differently as the body background but it does not work
<html>
<head>
<style>
body {
background-image: url("img.png");
{
ul{
background-color: blue;
}
</style>
<title>
Dragon baby
</title>
</head>
<body>
<ul>
<li>Recipe1: cookies</li>
<li>Recipe2: bakery</li>
</ul>
</body>
</html>
You have a syntax error in your style.
<style>
body {
background-image: url("img.png");
{
ul{
background-color: blue;
}
</style>
After your background image, you have an open curly bracket instead of a closing bracket. I tested the following and it works:
<style>
body {
background-image: url("img.png");
}
ul{
background-color: blue;
}
</style>
When I apply a linear gradient to the body in CSS like below
body
{
background: linear-gradient(#10416b, black);
}
It doesn't apply it to the entire web page, instead what happens is it is applied to the first half of the page, and then starts over from blue to black for the second half, (#10416b is a blue color). Adding in height:100%; to the body doesn't change anything.
I fixed the problem by doing the below in CSS
.background {
background: linear-gradient(#10416b, black);
height: 100%;
}
and this in HTML
<!DOCTYPE html>
<html class="background">
// lots of unrelated code in between the tags
</html>
But I still don't understand why setting the background with the linear gradient in the body didn't work. If somebody could explain this to me that would be great.
Use 100vh instead of 100%
body {
height: 100vh;
background: linear-gradient(#10416b, black);
}
https://jsfiddle.net/r77r0cco/1/
body in and of itself doesn't have a height, so it looks to its parent element <html> which, because it has no content, also has no height.
vh uses the viewport dimensions instead of a parent element's
The body has no height of it's own as such without the HTML having a height or the body containing content.Then the gradient will repeat because repeat is the default in the background shorthand property.
html {
height: 100%;
}
body {
background: linear-gradient(#10416b, black);
}
Firstly, I'd like to thank #Paulie_D who inspired me to come up with this answer.
Below you can see 2 methods to get your body have a gradient background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
html {
min-height: 100%; /* Unlike 'height', which is used by
#Paulie_D, this will make your webpage
automatically resize when it exceeds
the 100% height, thus it won't start the
gradient over
*/
}
body {
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">Hover and scroll!</div>
</body>
</html>
This method will automatically resize the gradient to fit the whole content.
If you want the gradient to be the size of the window height, you can use a `::before` pseudoelement on `body`, to draw a fix-positioned gradient with a `z-index` of `-1`. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
body::before {
content: "";
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -1;
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">
Hover and scroll!
</div>
</body>
</html>
Sorry, I don't usually answer Stack Overflow questions, but this was a top result of a Google query, so I couldn't resist. If you can improve this answer, please request an edit.
So i am working on a fluid responsive design and the text size on the website works based on %.
Just realized that if i try to print(cmd+p) the website design breaks on chrome.
Looks like a pretty old and known issue and was not able to find a hack online to make this work?
Can you please suggest something on this?
Issue mentioned here: https://code.google.com/p/chromium/issues/detail?id=382313
Here is the html you can try putting on a local html page and try printing on chrome:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.vmin {
font-size: 10vmin;
}
.px {
font-size: 20px;
}
.vw {
font-size: 10vw;
}
.vh {
font-size: 10vh;
}
.box {
width: 10vw;
height: 10vh;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="vmin">
using vmin - font-size: 10vmin;
</div>
<div class="px">
using px - font-size: 20px;
</div>
<div class="vw">
using vw - font-size: 10vw;
</div>
<div class="vh">
using vh - font-size: 10vh;
</div>
<div class="box">
inside box - box size: 10vw x 10vh;
</div>
</body>
</html>
Also was thing if there is a way i can pass a view size hardcoded when the print is called?
<style media="screen">
.vmin {
font-size: 10vmin;
}
.px {
font-size: 20px;
}
.vw {
font-size: 10vw;
}
.vh {
font-size: 10vh;
}
.box {
width: 10vw;
height: 10vh;
border: 1px solid #000;
}
</style>
<style media="print">
/* Here be CSS applied exclusively when the page is printed */
</style>
http://htmldog.com/references/html/tags/style/
I have this really weird problem. I just want to draw two simple lines that are a little bit spaced out between one another.
Here's the html:
<div class="hline">
</div>
<div class="hline">
</div>
And the CSS:
html, body {
background-color: white;
}
.hline {
background-color: black;
height: 2px;
margin: 50px;
}
When the background color is of the body is white, it works flawlessly, but when it's black, and the background color of my divs is white, there just seems to be one big white line in the black background. Why is that?
Thanks a lot in advance,
Luke :D
it's working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
background-color: black;
}
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline">
</div>
<div class="hline">
</div>
</body>
</html>
I tried your code and this is what I got for a black background and a white line
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { background-color: black; }
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline"></div><div class="hline"></div>
</body>
</html>
Can someone please help me with the css syntax for having multiple css rules for an html node with data attributes.
Here is some code that does work:
<html>
<head>
</head>
<div class='Css_Rule_red Css_Rule_size'>
Test text
</div>
<style>.Css_Rule_red {
color: red;
}
.Css_Rule_size {
font-size: 500px;
}
</style>
</html>
Here is my current code:
<html>
<head>
</head>
<div data-custom-css='Css_Rule_red Css_Rule_size'>
Test text
</div>
<style>[data-custom-css='Css_Rule_red'] {
color: red;
}
[data-custom-css='Css_Rule_size'] {
font-size: 500px;
}
</style>
</html>
Both the 'Css_Rule_red' and 'Css_Rule_size' work individually, however, the above code does not display either of the 'Css_Rule_red' or 'Css_Rule_size' css rules when combined together.
How is it possible to have multiple css rules, when using data attributes?
https://amcss.github.io/
More info about Attribute selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
[data-custom-css~="Css_Rule_red"] {
color: red;
}
[data-custom-css~="Css_Rule_size"] {
font-size: 500px;
}
You probably want something like this :
.Css_Rule_red {
color: red;
font-size: 500px;
}
Because data-custom-css is a separate tag than class, and you should use [data-custom-css='Css_Rule_red Css_Rule_size']..
<style>
[data-custom-css='Css_Rule_red Css_Rule_size']
{
color: red;
font-size: 500px;
}
</style>
or
<div data-custom-css='Css_Rule_red' data-custom-css2='Css_Rule_size'>
Test text
</div>
<style>[data-custom-css='Css_Rule_red'] {
color: red;
}
[data-custom-css2='Css_Rule_size'] {
font-size: 500px;
}
</style>
You will have to use different data attributes for each data entry.
With data attributes it's the same as with IDs. if you use multiple, none of them will work. If you want to have both of the classes as data attributes you could set them like
<html>
<head>
</head>
<div data-custom-css-colour='Css_Rule_red' data-custom-css-size='Css_Rule_size'>
Test text
</div>
<style>
[data-custom-css-colour='Css_Rule_red'] {
color: red;
}
[data-custom-css-size='Css_Rule_size'] {
font-size: 500px;
}
</style>
</html>