everybody!
Reading this topic:
Change background color of HTML <area> tag
I saw the part of a CSS code:
area{
sharedAttr: 'attribute';
}
I wonder what is this sharedAttr. What is amazing Google search:
css sharedAttr
gives only 8 (eight!) results. I can not find any documentation mentioning anything about usage of sharedAttr in css sheet. Can anybody shed some light on the topic?
Thank you in advance!
The example you referenced is alluding (albeit rather poorly) to the fact that you can define one or more CSS properties using a fairly generic selector and then use a more restrictive selector to define specific additions/overrides.
area{
/* matches all instances of the area element, so properties
that should be applied to all area elements go here */
}
#one {
/* properties which should only be applied to the element
with the ID "one" go here */
}
In context of the original question, such a technique is commonly used to reduce the number of styles that must be declared. If 100 area tags all need the same background color, it would be silly to define a selector for each one. However, additional selectors can be defined to override that color and/or define additional properties on certain elements.
Related
This question already has an answer here:
Difference in applying CSS to html, body, and the universal selector *?
(1 answer)
Closed 3 years ago.
I would like to ask what is the difference between *{} and body,html{}. It changes the view in the html and I want to have a broad knowledge about this. Thanks.
The wildcard (*) will apply the styling to every element found on your HTML page unless you give specific styling for that element. It overrides any possible inheritance for the set property because it is setting that default value for each individual element. If you want to change something in a section that has child elements then you will have to make that change for each child. This can be useful in a few cases (box-sizing is probably the most common use) but most of the time you will not want to use this. Depending on how heavily this is used, it can slow down your page load times.
Setting the styling with body/html allows for inheritance to still take place. Elements within the html/body will still show the styling found here if their default is set to inherit. This will still allow a closer parent to the child to override the styling. In CSS, the best option is to be more specific.
The *{} selector (Universal selectors) matches elements of any type. (MDN).
body,html{} select body and html elements.
Consider the following example:
* { /* Selects all elements */
color: blue;
}
html,
body { /* Selects html and body element */
color: green;
}
<html>
<body>Body</body>
<footer>footer</footer>
</html>
*{}
is a universal selector. It will implement the styling of all the elements. If you want to do some changes with styling of the particular element then you have to override it.
body,html{}
will do the same for you. But there is one scenario. If you want to inherit the properties from the parent then body,html{} is definitely going to play this role. It is used for the inheritance of properties
This will probably be an extremely easy question to answer, but I am trying to create a one-stop-shop for setting up property values from SQL and would like to know an answer to the issue that just came up in brainstorming:
If you set a parent (let's say a form) to be Read-Only but set an object (lets say a button) in that parent to NOT be Read-Only, will the button be read-only? Also, what If the parent or child had !Important included?
I am trying to set up a priority system so users can set up these kind of property values without running into issues where unexpected things do not happen.
readonly is not a css property, thus no style. It goes directly into the html tag.
The key buzzwords for you to search are css inheritance and css specifity.
For a quick overview: Yes, there are fixed rules. Not every property is inherited. You can look them up e.g. in the MDN CSS Reference.
Which css rule kicks in depends on where you place the style rules and how specific your selector is.
Cascading order (source):
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
Specifity is like a score system. The rule with the highest score (=highest specifity) applies.
ID, e.g. #paragraph {...} (100 points)
Class, e.g. .redparagraphs {...} (10 points)
Tag, e.g. p {...} (1 point)
So the rule div p span {...} would have a score of 3 points, because of three tag selectors.
#wrapper .centered #main .fancynews .withoutborder p {...} would have 231 points and so on.
If two rules have the same score (specifity), then the last one processed counts (stylesheets are processed from top to bottom).
The "quick and dirty" trick for applying a style is to add an !important to the rule like
.alwaysredtext { color:#F00 !important; }
This will override whatever color rule you made and whereever (as long as they do not also have an !important). This is not recommended due to later maintainability problems.
p.s.: Don't miss the Specifity Calculator where you can enter and compare several selector rules and see which one "wins".
Only <input> and <textarea> elements support the readonly attribute, so not, what you are describing is not possible.
I don't want to argue regarding the use of inline styles over external styles however I just want to know your ideas on certain situations wherein inline styling could be used.
For example I have 10 types of tables that have different width but always use the same border color, thickness and padding. What I currently think is I should declare a global CSS class that controls the border and the padding of the table and then use inline styling to specify the width of the table.
E.g
<table class="default" style="width: 320px;">
Is my approach applicable?
yes u can declare a global CSS class and use this in all table. it will work for all table.
I believe its a correct approach in your case. As you are making the correct use of external class "default", by using it in all the tables and specifying the different widths inline with the specific elements.
I think you're misunderstanding something here. If you take this:
<table class = "default" style = "width: 320px;">
Then this does not apply width: 320px; on all tables with class default. It only applies it on this specific element which has the style attribute.
If you're looking to specify such CSS without having to <link> external files, you can embed your CSS within <style> tags:
.default { //or table, or whatever your selector is
width: 320px;
}
If you want to style a particular table with the class default with a different width, give it another class (class = "default width320") and do:
.default.width320 { //selects element with BOTH default and width320 classes
width: 320px;
}
Read more about CSS selectors here, and selector specificity here.
Edit: if you only want to style that particular table, your approach is relatively-fine. But, I suggest using classes and merging your styles in one place (whether it's a .css file or an inline <style> definition) — it's much more maintainable and tidier than scattered style attribute definitions.
Edit 2: it's absolutely correct to use style attributes. It's more of a matter of personal choice. If you're sure that this won't cause maintainability issues ('Hey, why is my table 320 pixels wide? I don't see anything in my CSS file that does that'), then go for it. It's what the style attribute is for.
This is only a problem because, most of the time, if you've done it once then you're going to want to do it again. And now you have two identical style properties. And, well, they should both be red-bordered. Oh, and I need a third one of these tables somewhere. And, wait, they should be a little skinnier...
On the other hand, if you used a one-off class, you can just slap it on the next table. Or you can compare all ten tables and tweak them from one place, etc.
The problem with violating principles is that principles are often hard-earned. :)
I always was told to take out multiple properties in your css that you use more then once, and add them all in one rule. Like below. (please excuse the poor example)
I always seen this:
.button, .list, .items { color: #444; }
With multiple rules, can't that leave a lot of clutter?
Only in css tutorials and examples Ive seen this:
.someColor { color: #444; }
And in the css, just add another class of '.sameColor'. (div class="button someColor")
I've never seen this and feels like it would leave less clutter in your CSS. Would this be okay? Or do you think it could leave with more clutter in your HTML ?
Try to name your classes independently of their visual effect. It is a nature of CSS to play with the design and layout without having to change the HTML. Class names such as .someColor or .left-sidebar are a bad practice. Colors and position can change.
And also apply rules to semantic HTML elements rather than adding classes on all different divs and spans. It should be obvious, although many people get this wrong.
CSS is a limited set of rules and that makes it a perfect creativity stimulator.
It's all based on personal preference. I've tried both methods and prefer the second method you listed, except with more generic class names such as middleParagraph or headerGraphic so it applies to an area rather than a specific color because colors can change.
Good classnames and IDs are the first place you should optimize. THEN move onto multiple class names.
Multiple classnames can help out quite a bit though, consider:
<div class="leftColumn">Left</div>
<div class="rightColumn">Right</div>
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div>
<!-- alternatively, you could have -->
<div class="rightColumn">Right</div>
<div class="middleColumn hasRignt">I have padding right of 210px</div>
<!-- or -->
<div class="leftColumn">Left</div>
<div class="middleColumn hasLeft">I have padding left of 210px</div>
<!-- or -->
<div class="middleColumn">I have no padding</div>
and your css
.leftColumn { width:200px; float:left; }
.rightColumn { width:200px; float:right; }
.middleColumn.hasLeft { padding-left:210px; }
.middleColumn.hasRight { padding-right:210px; }
The result is floated right/left columns and the center area compensates for them with padding. This means you can style your middleColumn how you want to (e.g. .middleColumn .otherCoolSelector ).
It's perfectly acceptable to apply multiple classes to HTML elements. The trick is to be judicious; I usually find that when I do this, the additional classes are additions or exceptions to the basic styling being applied. For example, here are some classes I occasionally add to an element that already has a class:
error -- to style the current element if the user entered invalid data
first -- to style the first element in a list or in a table row, e.g. to suppress padding-left
last -- to style the final element in a list or in a table row, e.g. to suppress margin-right
even -- to apply zebra-striping to alternate elements
hidden -- to hide an element if it's not currently relevant
These extra classes are typically generated dynamically with a server-side language like ASP.NET or PHP. They can also be added or removed on the client side with JavaScript, esp. with a library like jQuery. This is especially useful to show or hide elements in response to an event.
There are a lot of good answers here. The trick is finding out which one fits your situation best.
One thing to consider is your markup size. In a high-traffic situation, your markup size is critical to the speed of your page loads...every byte counts. If this is the case for you, then you may want to create more CSS classes and put less in your markup. That way, the client is caching more and your website is serving up less.
What you're suggesting is a bit like an in-line style, e.g. style="color:#444". So if you want to change the color of your element you'd have to make a change to the html, which means you've defined style as part of your content. Which is exactly what css is supposed to avoid.
Imagine if you'd included 'someColor,' multiple times across multiple html files and you decide some of these elements shouldn't have 'someColor,' after all, you've got a lot of files to go through.
I'd probably avoid the list option too, if I'm making a component, say a button, I want to find .mybutton class in my css file and see all the rules for that component, without having to go through all sorts of unhelpful global classes. Also if someone comes along and changes the color in our global class he may break my button, where as if the button controlled it's own styles it can't be broken in this way.
I am finding it useful to define 'marker' css styles such as 'hidden' or 'selected' so I can easily mark something as hidden or selected - especially when using a tag based technology like ASP.NET MVC or PHP.
.hidden
{
display:none;
}
.newsItemList li.selected
{
background-color: yellow;
}
I don't especially feel like reinventing the wheel here and wanted to know what other things like this are useful or common - or if there are any pitfalls to watch out for.
Should I look at any specific css frameworks for other things like this? Plus is there a name for this type of css class that I can search by.
I agree with the other posters who say only to define what you need, rather than bloating your code with a bunch of unnecessary classes.
That being said, I find myself using the following on a constant basis:
.accessibility - visually hide elements, but keep them intact for screenreaders and print stylesheets
.clear - tied to Easy Clearing
.first-child and .last-child - easily assign styles to the first/last item in a container. This has been a lifesaver many times, and I prefer it over the poorly-supported :pseudo selectors
.replace - tied to Phark IR for transparent image replacement
Finally, I dynamically assign .js to the <html> element with
<script type="text/javascript">if(h=document.documentElement)h.className+=" js"</script>
This will allow me to define .js (rest of selector) styles to target only browsers with JavaScript enabled.
Let me give you an answer from a very novice web developer who has recently considered using CSS classes as "markers". Please don't take this as a definitive answer, as I may be completely wrong, but look at it as another point of view.
I was going to use some marker classes, too. I created one called .center to center the elements in a DIV tag. However, I was struck with the idea that I'm looking at CSS all wrong. I reasoned that CSS is supposed to define how an element is to be displayed without having to change the HTML page. By using marker classes, like .center for example, I would have to change BOTH the CSS and HTML if I wanted that DIV tag to be right-justified next month. So instead, I created a .latestHeader class (the DIV is to hold the "latest information" such as a news item), and in that class I set the text to align center. Now, when I want to change the justification of the text, I simply change the CSS for that DIV and I don't have to touch the HTML.
In regards to your question about CSS frameworks...
Personally I've always found the W3C has the most complex but also most accurate answer to any CSS question.
After many years of programming and playing around with CSS/HTML/PHP I agree with the above comment.
There is no harm in defining a marker for something to be centered or right-aligned using something along the lines of a '.center' or '.righths', but keep in mind as above that if you want to change a whole slab of text your work will be increased because you have to edit both CSS and HTML.
Defining the format for a whole section will mostly likely work out more logical, because if you want to change the section months down the trail, you just have to edit the format of one CSS declaration as opposed to editing each individual article.
CSS was however designed as the ultimate styling language which could allow an administrator to make a website look exactly what they want it to. Keep in mind though that excess CSS will increase the load on a server, will increase the time before your client sees your page and in line with the 'feng shui of web design' it is possible to go overboard with too much styling.
You should really grow this list on a need basis instead of soliciting a list of generic classes across the board--you'll only end up with bloat. If you want to avoid reinventing the wheel the look into some CSS frameworks (blueprint or 960). In some respect, generic classes like .center { text-align:center } do have some level of redundancy but often times they're needed. For example the following pattern which is all too common but should be avoided:
element.onclick(function(e){ this.style.backgroundColor = 'yellow' }
That's bad because you really ought to be using:
element.onclick(function(e){ this.className = 'highlight' }
The latter allows you to modify your styles by only touching the CSS files. But if a CSS class name has only one style element then you should probably avoid it because it doesn't make any sense to have it (.hidden in your example) and call it directly instead:
element.onclick(function(e){ this.display = 'hidden}
I often find myself keeping two classes in all of my stylesheets: "center" (which simply applies text-align: center;, and a float-clearing class that applies clear:both;.
I've considered adding a "reset" statement to all my styles, but haven't had a need for it yet. The reset statement would be something similar to this:
*
{
margin: 0;
padding: 0;
}
I reuse these often enough to include them in just about everything. They're small enough so I don't feel they bloat the code at all.