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
Related
I have written a CSS file to style a div with ID, inside another div with Classes. It looks like this
div.class1.class2 > div#ID1{
Styling Rules
}
But nothing is happening to DIV with ID1. Would appreciate any help and I can't change the structure of HTML or apply other IDs or classes to the elements.
<div class="class1 class 2">
<div id="ID1"></div>
</div>
IDs should only be used once, so if you followed that convention then you would simply target the ID in your selector and not concern yourself with the parent container it's in...
#id1 {
// code
}
But because of what you're asking implies that you have an ID being used more than once, I would suggest changing this to a class before moving forward; however, if you still wanted to keep your HTML the way it is, then you need to do this...
.class1 #id1 {
// code
}
I know that css if for styling looks of buttons etc... but what about when I position elements? Each page has different element positions/elements. Does it make sense to create an id for each element on every page and position in main css file?
When designing a page it is very important to separate the content (e.g. HTML) from the style (e.g. CSS). A well-structured webpage should be able to be read out loud and still make sense.
In this context, the position of the elements should be defined in relevance to other elements and not to the whole page. These elements can also be assigned to a class (e.g. <div class="announcement">).
This gives you a lot of power, since you can define a different behavior not only for the class (or id) but also for the class in respect to the parent classes. Take these scenarios for example:
Scenario 1:
<div class="post-content">
<div class="announcement">
Some text
</div>
</div>
Scenario 2:
<div class="special-content">
<div class="announcement">
Some text
</div>
</div>
The main css rule for the "announcement" can be the same. But you can have a special rule for the "announcement" that is inside a "special-content" area. So, you can just add another rule for the properties that should be different. Not only position, but anything:
.announcement {
color: red;
}
.post-content .announcement {
padding-left: 5px;
}
.special-content .announcement {
padding-left: 20px;
}
Of course you can build similar relations with classes, ids or standard elements. Read more about selectors in the MDN.
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?
Just wondering, is it a bad idea to say create css classes for text tags.
Lets say the h1 tag is 24px font-size, but I want bigger font size of 36px for some reason and create a css class for the h1 tag like below.
<h1 class="special-title">
or
<h1 id="special-title">
Is there a rule of thumb for this ? As in when it's considered appropriate ?
First: HTML is all about semantic. CSS is all about styling.
This means:
<h1> is a very important headline
<h2> is a less important headline
<h6> is a very very less important headline
If I understand you right, you want to style your headline <h1> on different ways. Please think about, why you want to style it on different ways. Are they on the same level of importance?
If not, you can give the less important headline the <h2> tag, and the important one the <h1> tag.
CSS:
h1 { font-size:36px; }
h2 { font-size:24px; }
If they have the same level of importance, your approche of special-headline is the right way to handle this. You should do this as a Class. Id means it is a unique object. But I assume, you have more then one special-headline.
The ID value should be unique and used only one time for one element on the page. The class can be reused for many H1 as in your example.
Your CSS would then be
#special-title {
/* style for this one element only */
}
.special-title {
/* style for all elements using this class*/
}
A good rule of thumb is use IDs for unique single elements and classes for repeating styles for many elements.
Putting it in practice, you could do something like this:
<style>
#special-title { /* a unique ID selector for one element */
color: red;
font-size: 3em;
.special-title { /* a class selector for many elements */
color: blue;
font-size: 1.5em;
}
</style>
<h1 id="special-title">one unique style</h1>
<h1 class="special-title">more uniform styles</h1>
<h1 class="special-title">more uniform styles</h1>
<h1 class="special-title">more uniform styles</h1>
The first header is different than the rest because we wrote a CSS rule for its unique ID.
Modifying heading for some reason can be done by using class or Id.
for me, it is okay as long as you use classes for the same uses and Id selector for unique ID (once uses).
There is no general rule of thumb to say you should use an id or a class to do that. However, I always tend to go with class. Here's why!
Classes are lighter than ids. an id adds much more weight than a class does.
Id's are prone to collision since they should be unique and if you duplicate them, you may end up with unwanted results.
For the reason above, classes are re-usable and ids are not.
For more reasons, you should give this a definite read.
http://css-tricks.com/the-difference-between-id-and-class/
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.