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>
Related
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.
I am new to front end development, especially the styling.
I find css classes written like shown below:
.Header-bar p {
font-size: 18px;
}
.Header-bar p span {
font-weight: bold;
}
.Header-bar p span span {
font-weight: normal;
}
I understand that this means to apply font-weight: normal; to the span element which is inside another span element which is in p under div where the class is mentioned.
This doesn't seem like a good practice. I want to create re-usable classes that I can use in my code.
How should I be changing this style to better align to my needs.
When we are talking about styling and CSS I think it's important to keep in mind the specificity levels of a CSS selector.
What is Specifcity ?
It's what defines how broad the scope of your stylying rule is.
Simply put :
The less specfific a rule is - the more abstract it is - and the more elements it will capture.
The more specific a rule is -less abstract it is - and less elements will capture.
More specific rules overwrite/replace less specficic rules.
In your example you have chosen a a rule style , which is applied to a very specific element , in this case .Header-bar p span span {font-weight: normal;} and ONLY that element.
However , if you had only written .Header-bar{font-weight: normal;} it would work aswell , except you would be applying that style to not ONLY that element but also ALL the other elements which are contained in that class.
When you want to be more specific and not write all the path to get to that element, you can simply give the HTML element an ID and use it then on CSS , like this , for example :
<footer>
<div>
<div>
<p id="IDsomething"></p>
</div>
</footer>
</div>
Then select on CSS :
#IDsomething { font-weight :
normal;
}
There are four categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.
IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.
You can easily create a particular unique class that's going to be for a particular styling or set of styling. For example creating a class called "normal" and then adding the font-size property of normal, it'll be easily re-usable that way i.e you can add it to any part of your code if you want the font-weight styling of that particular element to be normal.
Just apply a class to the span which you want to style, then create a CSS rule for that class. Selectors like .Header-bar p span span are rather used when you can't change the HTML code (or at least the structure) yourself.
Concerning reuseability of classes: That class can be used on as many elements as you like, and those elements can be divs, spans, headings or whatever.
I was wanting to know if there is anything wrong with writing the paragraph tags within the code body tags like this:
paragraph tag question
I'm very new to programming and HTML/CSS as well, but I have not seen any coding examples doing this. I do see people using h1, h2, h3, etc... but these text sizes are different by default where the p and p1 tags give the same exact size. Also, would writing the code like this cause any problems with commonly used browsers?
The reason I want to do this is because I can change each paragraph using the CSS style section of the code rather than setting each paragraph to the same paragraph tag and then the corresponding attributes affect all the paragraph text.
thanks and sorry if this has been asked before, but I couldn't find it on the web
Brian
Use <p class="first"></p> <p class="second"></p> <p class="third"></p> and so on.
These are called classes.
You can define classes in your CSS sheet and style them independently without affecting other elements which don't have the class.
Identifiers such as "first", "second" and "third" are arbitrary, you can choose your own class names.
.first {
color: red
}
.second {
color: blue
}
.third {
color: green
}
<p class="first">I am a paragraph</p>
<p class="second">I am a paragraph</p>
<p class="third">I am a paragraph</p>
Which is the right way to style different elements in a document:
Class:
<style>
.red {
color: red;
}
</style>
<h1 class="red">Hello, world!</h1>
<p class="red">This is some text.</p>
HTML tags:
<style>
h1,
p {
color: red;
}
</style>
<h1>Hello, world!</h1>
<p>This is some text.</p>
I'd say it depends. If the "red" class has a styling that is repeated many times across the site I would use the .red class (although that is not a good name for a class as it describes the aspect of the element, what happens if the graphic designer decides that the red elements are now green? your class won't make sense anymore)
This ultimately depends on what you feel more comfortable with.
Usually I would recommend using classes to style your content. This is because you will probably end up using HTML tags like p, div and the like all over your website for different purposes. And you will probably also want them to look different depending on where they are used for what purpose. While it is possible to define rules that will give you the desired behavior, it is not really easy to do so and a nightmare to maintain. Think of rules that look like this:
div p div div p h1 a { font-family:sans-serif; }
Nobody knows what is going on there. This would be much easier if you had just assigned classes to the elements that make up your document. For example:
.maincontent .quotebox .caption { font-family:sans-serif; }
It is up to you how much you want to drill down with those classes. You can either just assign a class to a top level element (like div) and then define rules for child elements or you can add a class to each element and then define rules for nested classes.
What you should do is think about what sort of CSS structure you would like to have. I like to think of different classes in terms of what I want elements to convey (in terms of information) rather than what I want them to look like. Making red a class name is somewhat beside the point as this does not tell you anything about the element that it is applied to. Also you might want to color it green at some point and then there would be elements of class red that are actually styled green. Better class names would IMHO be navigation or maincontent or infobox.
I think style using class is better than style using html tags.
class have more privilage than html tags while providing style. if we use both the style provided in class taken.
I was at w3schools.com learning html and their code examples included the word "class" such as <div class="page"> . They didn't explain it so i needed you guys to. So please define what class in <div class="page"> means.
A class is a non-unique identifier for HTML elements. It can be used in a variety of ways:
1. For styling of those elements with CSS.
To apply a group of CSS properties as a pack to all elements of the class.
.page
{
border: solid 1px #009900;
padding: 5px;
color: #000077;
}
You can apply it like this:
<div class="page">
<ul class="page">
Ans so on.
You can also restrict it to only be valid for a specific element type, for example, only for divs:
div.page
{
/* ... */
}
2. For accessing these elements with JavaScript.
To perform some manipulations with all elements of the class. Like this:
$('.advancedOption').attr("disabled", true);
3. For some internal operations in browser. Beyond the scope of this question.
A class is best thought of as a 'category' or 'type'. This is best demonstrated with an example.
Let's say you have an HTML page that will have a table of products. In that table, you will have the products name, description, etc. Now, suppose you wanted ALL the products name to be styled a specific way.
<p class='product-standard'>This is a product name</p>
Then with your CSS you can do something like this:
p.product-standard { color:gray; }
So now, all tags with the class 'product-standard' will be gray.
Now, if you want certain sale items to be red, you can do this:
<p class='product-sale'>Sale item</p>
and
p.product-sale {color:red}
Classes allow you have consistent styling across many html tags.
The attribute class refers to a CSS class.
For example, in HTML:
<div class="page">
will refer to the CSS code:
div.page {
some css properties
}
MSDN is the best place to look for -
CLASS Attribute - Basically its a string or attribute that specifies or receives the class or css style rule.
It's just a space-separated list of words you associate with the element that can be used to select it for styling or with a script. A class by itself doesn't do anything — it's like a tag on a blog post.
If you're familiar with the idea of a class in programming, it has nothing to do with that.
A class in html is an attribute you can add to any html element (like paragraphs, links). You can make up the name yourself (has to start with a letter though), and then stylesheets or javascript can do something with that specific element.
For instance:
<p>This is a paragraph with no class</p>
<p class="foo">This paragraph has a class named "foo"</p>
<span class="foo">This span has a class as well
Now if you apply CSS to style your html, you can use:
p { color: blue }
p.foo { color: red }
span.foo { color: green }
.foo { font-size: big }
This way all paragraphs have blue text, except the paragraph with the class 'foo'. The rule p.foo effects only paragraphs with the class foo. The rule span.foo applies only to span elements with the class foo, so that part will have green text. Then finally, the .foo rule applies to all elements with the 'foo' class, so the last two elements will have big-sized text.
You can also have multiple classes. <div class="foo bar"> has the classes foo and bar. You can access those separately in the CSS by using .foo or .bar
i know it is a very old question but i hope my answer helps any newbie who comes here searching for a simplified answer.
in brief,
you may consider the class as a set of names for the element.
those names you may use any of them to call the element anytime on the same page.
it can be used to select the element to style it, change it, add some behavior for it, and/or remove it.
example:
<div class="sara"></div>
this sara element can be selected in css like the following ex:
<style>
.sara{color:red}
</style>
or in javascript like the following ex:
<script>
document.querySelector('.sara').remove()
</script>
I hope this simplified answer helps