I've write some HTML data-attribute code and added HTML tag inside. But I can't design them without adding any class name.
For example; this is my data-attribute;
<div data-box="<h1 class='my-div'> A Simple Heading</h1>"> This is a tag that have a data-attribute with html tag. </div>
If I want to design this , I can design it without any problem. Just declare the class in css stylesheet and design it. But if I want to Design the same h1 tag without any class, how can I do it ...?
<div data-box="<h1> A Simple Heading</h1>"> This is a tag that have a data-attribute with html tag. </div>
Look at the h1 tag, in this time How can I design it without adding any class name ?
You would need to select the attribute in your CSS:
[data-box="<h1 class='my-div'> A Simple Heading</h1>"] {
color: red;
}
This should turn the text of your div red. You can add whatever CSS properties when selecting the attribute.
Related
changed "div" tags into more semantic html tags to make a webpage more user friendly but unsure how to change CSS to make these new semantic tags inline on the webpage as well as change other styling aspects of the code. How do i make sure the right elements in my html is linked to the right css code. Sorry if im not using the terms correctly new to coding.
I tried changing the class names to the corresponding more semantic tags so that i could change the webpage style
In HTML we can link css to the html file in the header like so:
<link rel="stylesheet" href="styles.css">
Where styles.css is the stylesheet file.
On your html tags for example
<div></div>
You are able to add classes which links these tags/containers to a specific style in your style sheet.
For example In HTML:
<div class="myclass"></div>
the class "myclass" is the linker towards this in your stylesheet:
.myclass:
color: red;
the full stop signifies that you are linking this to a class in the html, you can also do this with id="myid" and using a # instead of full stop, however i prefer to keep my ID purely for scripting use and classes for styling
Read more and learn a bit more about this at w3: https://www.w3schools.com/html/html_css.asp
Html elements and class attributes are two different things. Both can be targeted using CSS.
For example:
<html>
<body>
<div class=“name-of-class”></div
</body
</html>
There are three html elements (html, body and a div). And the div has a class attribute of “name-of-class”.
You can target the elements as well as the classes with css:
body {
background-color: black;
}
.name-of-class {
width: 200px;
height: 200px;
background-color: yellow;
}
To target the elements simply write the name of the tag without brackets. And to target the element with the class add a period before name of the class.
If you change an element or class name on your HTML, make sure to update your CSS styles or file to match.
Hope this helps, if you still have doubts paste some of your code to give it a check out.
So basically I want to make a tag, such as , that when placed into an h element or a p element will turn the text inside the color red.
<p>Hello <r>World!</r> I'm a sentence!</p>
such as that. the "World!" would be red, while the rest would be the default text color that I set for the p tag. I know HTML and CSS.
Try adding this attribute to your HTML tags as needed:
style="color:red;"
Note that this is not the best practice. The best way to do this is to create a class that sets all of its elements' style properties to red. Also, instead of using a custom element like r, try using a span (thanks to Bryan in the comments). For example:
CSS:
.redText {
color:red;
}
HTML:
<p>Hello <span class="redText">World!</span> I'm a sentence!</p>
I have created some CSS classes that simply declare certain hex colors that will be used in my web app. In HTML I am trying to apply these colors to specific text. For some reason I am having trouble getting the styles to be applied.
CSS
.custom-orange-color {
color: #F58B30;
}
.custom-pink-color {
color: #ED178F;
}
HTML
<p>This is the custom <style class="custom-orange-color">orange</style> color and this is the custom <style class="custom-pink-color">pink</style> color.</p>
In fact when I use this, the text within the style tags disappears all together?
You are misusing the css classes. Instead of <style> tags use <span>. Style tags are used to put css in it, not use classes or whatever css rules.
The span tag is used to group inline-elements in a document.
The span tag provides no visual change by itself.
The span tag provides a way to add a hook to a part of a text or a
part of a document.
In your case you can assign the desired colors by assigning the correct class to corresponding span element. It would be something like this:
.custom-orange-color {
color: #F58B30;
}
.custom-pink-color {
color: #ED178F;
}
<p>This is the custom <span class="custom-orange-color">orange</span> color and this is the custom <span class="custom-pink-color">pink</span> color.</p>
The <style> element is designed to hold a stylesheet. It is not designed to hold content.
The <body> of your document should contain text and the HTML elements which best describe the semantics of that text.
The <style> element should appear in the <head> and contain only CSS.
Replace <style class="custom-orange-color"> which something that best describes what it is you want to convey by making the text orange. For example:
<em>
Then write CSS for it.
em {
color: #F58B30;
font-style: normal;
}
strong {
color: #ED178F;
font-weight: normal;
}
<p>This is the <em>emphasised</em> color and this is the <strong>strongly emphasised</strong> color.</p>
Add HTML classes (CSS has class selectors, other kinds of selector, rules, rulesets and various other features, but not classes) only if you need them.
Your syntax for a class selector was correct (although the names were poorly chosen: They should describe meaning not presentation), it was the HTML that was wrong. This would have been picked up if you had used a validator.
Here is working code for you. You need to use HTML tags, in order to have the style render for you. tag is used to define the CSS for your HTML. It basically holds a stylesheet and not the content.
.custom-orange-color {
color: #F58B30;
}
.custom-pink-color {
color: #ED178F;
}
<p>This is the custom <span class="custom-orange-color">orange</span> color and this is the custom <span class="custom-pink-color">pink</span> color.</p>
I don't know if this will make sense and excuse me for the bad terminology (just started learning) but what I'm trying to do is keep a piece of code separate from another so its tags don't affect the code I don't want to be affected.
I changed up some code in codepen to make a carousel for a page. I typed up the page code in another project. I tried importing that carousel code into the main page's code, but as some tags from the carousel code are the same as the main page's, it isn't laid out as I want it to be as it's interfering. I would change the tags, but they're "universal" ones such as img or a.
Is there a way of separating that CSS code from the main code? Like assigning it a separate div and applying that div to the container for the carousel in the HTML?
Here's the carousel
and the main code (trying to add the carousel underneath the about sections).
Well it is very simple, the best approach in styling with CSS is to:
Never apply styles to HTML tags directly because this will affect all the pages where your style is included, so it would be better to:
Use classes and ids to style some specific elements in your pages, this way including your css in the page will only affect these specific elements:
#myElementId{
...
...
}
.myElementsClass{
...
...
}
Note:
Use id for a unique element in the page and a class for more than one elements in your page.
Nested CSS classes:
To answer your question about using nested classes, you can't do it with CSS only, you should use SASS or LESS
References:
For further reading you may take a look at :
The answer to Nesting CSS
classes question on Stackoverflow
Nested selectors: the inception rule
This is called CSS conflicts, you better never apply much styling attributes on tags directly, use namespace with your classes, like-
If you want to apply/change predefined attributes classes, then you can define classes like-
// same classes with a parent Css class,
// to show it's effects only for that partcular section
.home .carousel{
// your css goes code here
}
OR
.someOther .carousel{
// your css goes code here
}
// Then few more nested classes
OR, if you gotta define whole of bunch new classes for your project, you can do something like-
.home-carousel{
// your css goes code here
}
Hope solves your query!
In that case, you would need to create assign a class or id to the tag you want customised and in your css, identify that class or id. For example:
<div class="myheader">
<p>hello</p>
</div>
<div id="myfooter">
</div>
<style>
.myheader{
/*ur css for myheader*/
}
.myheader > p {
/*css for <p> tag in myheader class*/
color:blue !important;
}
#myfooter{
/*ur css for myfooter*/
}
p {
color:red;
}
</style>
if you noticed, class in css is identified with a . and ids are identified with a #. Classes and id can be applied to any tag you need.
Should you have overlapping css as shown above, just use an !important to specify which takes precedence.
For more info: w3s Does that answer your question?
So I want to have this:
In association with Company Name
What I'm getting right now is this:
In association with
Company Name
The company name is a link, but I have my links be red with no underlining by setting them to a class in CSS.
This is the html I have:
<a>In association with <div id="bodylinks" class="bodylink">Company Name</a></div>
Here is the CSS associated with bodylink
.bodylink a
{
font: 14px Helvetica;
color: red;
text-decoration:none;
}
So the company name gets thrown to the next line because it is a different div, how can I avoid this and still use the .bodylink a class to format the link?
Thank you
div's are used to create new sections (divisions) in your page. If you don't intend the link to be in a new section, you should remove it and give the tag the class attribute like this:
<a class="bodylink" href="www.example.com">link text</a>
You'll also need to change your CSS so it applies to tags with class bodylink like this:
a.bodylink {
/* styling */
}
No one bothered to mention that his markup is syntactically incorrect. You can't have the opening anchor tag outside the div, and the closing anchor tag inside.
The div tag is a block level element. You need an inline element, such as a span tag, as others here have suggested.
<div class="bodylink">In association with Company Name</div>
Why do you ahve the whole line anchored? If you use the code above the line in in a div with the class formatting and the Company Name is linked.
Ryan
Try using a span instead, or give the anchor (<a>) itself the class.
Use <span> instead, an inline element that doesn't break the text flow. <div> is a block element that creates a "line break" so to speak.
Also, you've got the nesting of your elements all wrong. That's not valid HTML.
First of all the HTML code should be corrected, as steve_c said.
And to make a div appear inline with other content use the display: inline; CSS code on the div you want to appear inline.
Example:
the text before div <div style="display: inline;">the link in the text</div>