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>
Related
Novice here.
I'm creating a button however when I upload it onto the webpage it affects every other button by changing the styling to match the new button.
I don't know how to make the styling specific to only that button and have it not affect anything else on the website. Thanks!
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
you can make specific id (using #) or class (using dot . can be used multiple times in html dom if you will use button many times)
<html>
<head>
<style>
a#someId:link,
a#someId:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a#someId:hover,
a#someId:active {
background-color: #810001;
}
</style>
</head>
<body>
<a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>
</html>
You can keep class or id to resolve this issue.
<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>
Add CSS to this particular id element.
Check this : http://jsfiddle.net/wzfs238L/
You can define the styling for a class, this snippet uses class name mybutton and shows one with the class added and one without.
<html>
<head>
<style>
a.mybutton:link,
a.mybutton:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a.mybutton:hover,
a.mybutton:active {
background-color: #810001;
}
</style>
</head>
<body>
<h2>With mybutton class</h2>
<a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
<h2>Without mybutton class</h2>
Want to explore how to integrate<br>these projects into your classroom?
</body>
</html>
This is what you use 'classes' or 'ids' for. They help class a type of element for your page or identify a specific one you want to target in CSS. As #Rana suggested, w3schools has a page for this which might be helpful
Use id on your HTML element, and add # on the style. An id must be unique. Further reading about id click here.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #E31837;
color: white;
width: 300px;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
line-height: 1.3;
}
a:hover,
a:active {
background-color: #810001;
}
#fabulous{
background-color: yellow;
color:maroon;
margin-top:1rem;
}
#fabulous:hover,
#fabulous:active {
background-color: #fcc726;
}
</style>
</head>
<body>
Want to explore how to integrate<br>these projects into your classroom?
<a id="fabulous" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">This one is fabulous</a>
</body>
</html>
I'm new to coding. So basically i'm doing an online web developers course before entering a bootcamp and i'm using Sublime Text for my code, i'm super stuck!
So in this exercise the styling is done in the html.
The problems are with:
John
body {my code
color: red;
The styling does not show!
<!DOCTYPE html>
<html>
<head>
<title>Specificity</title>
<style type="text/css">
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
.highlight {
color: yellow;
}
#special {
colour: pink;
}
</style>
</head>
<body>
<p>Hello!!!</p>
<ul>
<li id="special" class="highlight">John</li>
<li>Paul</li>
<li class="highlight">George</li>
<li>Ringo</li>
</ul>
</style>
</body>
</html>
There is an error in your style for id #special colour is not a css property, change this to color. Also you are missing a } after your li properties.
Try this
<style type="text/css">
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
}
.highlight {
color: yellow;
}
#special {
color: pink;
}
</style>
You used color that refers to text color.
The code you presented overrides the elements you set, there is a big confusion, that causes the code not to work.
Also missing } in li tag
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
}
.highlight {
color: yellow;
}
#special {
color: pink; /* no such thing colour in css */
}
Also why did you applied specail ID and highlight class in the same li tag, that caused one of the elements to be override the other.
<li id="special">John</li>
<li>Paul</li>
<li class="highlight">George</li>
<li>Ringo</li>
You're writing your css as if you were using sass. Vanilla css does not support nesting. In order to target an li with .highlight you should say li.highlight {...}. Or in this case you could just use .highlight.
For your special class you have spelled color as colour.
Here is your fixed code:
body {
color: red;
}
ul {
color: blue;
}
li {
color: orange;
}
li.highlight {
color: yellow;
}
#special {
color: pink;
}
<!DOCTYPE html>
<html>
<head>
<title>Specificity</title>
</head>
<body>
<p>Hello!!!</p>
<ul>
<li id="special" class="highlight">John</li>
<li>Paul</li>
<li class="highlight">George</li>
<li>Ringo</li>
</ul>
</body>
</html>
You also seem to have an additional closing style tag at the end of your html or some reason.
I'm attempting to break my html into separate php files and have an error I can't seem to crack. Here is the first file, index.php
.topheader {
background-color: #404040;
color: white;
padding: 16px;
}
.footer {
background-color: #404040;
color: white;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
As of right now, only .topheader is applying to the html. I understand that both classes are identical, I plan to expand on each once I confirm they are applying individually. Can someone please take a look and advise why .footer wouldn't be applying to the sheet?
Here is a sample of the output on my machine
Seems working for me, .topheader and .footer having different styles
.topheader {
background-color: #404040;
color: blue;
padding: 16px;
}
.footer {
background-color: #404040;
color: red;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
<h1>I AM RED</h1>
</div>
This is Applying to your file, both .topheader and .footer class contain same style. just change the style values, you can see the difference
.topheader {
background-color: #404040;
color: white;
padding:16px;
}
.footer {
background-color: #FFEE00;
color: Red;
padding:16px;
}
Check this code once and in your code check once href of your stylesheet.
<!DOCTYPE html>
<html>
<head>
<style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
As many on here pointed out, the code itself was fine. I did not realize that Chrome would cache the CSS file. I've spent all night updating the file without seeing any changes because Chrome was using an older version.
As you can see from the attached screencap, I disabled the cache and everything is working perfectly now.
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>
I'm a profane in CSS, I don't know anything about it. I need to put HTML code and the CSS formatting for it in the same string object for an iPhone program.
I have the HTML code and the CSS code, but I don't know how to mix them together. Could you help me?
The HTML code:
<html>
<head>
<link type="text/css" href="./exemple.css" rel="stylesheet" media="all" />
</head>
<body>
<p>
<span class="title">La super bonne</span>
<span class="author">proposée par Jérém</span>
</p>
</body>
</html>
The CSS styles:
.title {
color: blue;
text-decoration: bold;
text-size: 1em;
}
.author {
color: gray;
}
<html>
<head>
<style type="text/css">
.title {
color: blue;
text-decoration: bold;
text-size: 1em;
}
.author {
color: gray;
}
</style>
</head>
<body>
<p>
<span class="title">La super bonne</span>
<span class="author">proposée par Jérém</span>
</p>
</body>
</html>
On a side note, it would have been much easier to just do this.
You can include CSS styles in an html document with <style></style> tags.
Example:
<style>
.myClass { background: #f00; }
.myOtherClass { font-size: 12px; }
</style>
Is this what you're looking for? You place you CSS between style tags in the HTML document header. I'm guessing for iPhone it's webkit so it should work.
<html>
<head>
<style type="text/css">
.title { color: blue; text-decoration: bold; text-size: 1em; }
.author { color: gray; }
</style>
</head>
<body>
<p>
<span class="title">La super bonne</span>
<span class="author">proposée par Jérém</span>
</p>
</body>
</html>
Or also you can do something like this.
<div style="background=#aeaeae; float: right">
</div>
We can add any CSS inside the style attribute of HTML tags.
There's a style tag, so you could do something like this:
<style type="text/css">
.title
{
color: blue;
text-decoration: bold;
text-size: 1em;
}
</style>
Two options:
1, add css inline like style="background:black"
Or
2. In the head include the css as a style tag block.