Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
In a css file, is it better to use css ID's with or without the HTML element?
For example, with HTML element:
div#header {
font-size: 2em;
}
Without HTML element:
#header {
font-size: 2em;
}
I understand that both examples will do the same thing, but I'm wondering if either example will affect SEO or loading times. I'm leaning towards using the example without the HTML element as this will result in a smaller CSS file, but I'm wondering if anyone else has thoughts/opinions/experience on this.
div#header {
font-size: 2em;
}
Will only be applied if the element holding the id is a div.
#header {
font-size: 2em;
}
Will work regardless of the element.
Since you should only use an id once you'd usually go for the second approach: it saves characters and therefore a tiny bit of loading time - not really noticable though.
If you are having several pages using the css but the #header element can be different using div#header can be a way to decide which style to apply to which page. If this is the case however, you probably want to use a class here.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have an app which has sections, and I need a 1px line between them. It seems I have a choice:
An hr element.
A div with a 1px border.
A div which is one pixel high, and has a background color.
See example
.hr1{
border-bottom: 1px solid;
}
.hr2{
height:1px;
background-color:black;
}
Is there any benefit to one particular way?
It seems to me the hr element is not a good idea, as the styling could get changed too easily.
Yes, there is one overwhelming advantage to using the proper hr element: it is understood by text-based browsers and screen readers.
To someone who doesn't use a normal browser, an empty div will not show at all, whether or not there is a border. An hr always will. It's probably desirable for it to do so.
More information is available on this accessibility site, which also notes a suggestion for times when you need to use something other than an hr:
<div class="rule"></div><hr>
div.rule {
height: 1px;
background: blue;
}
hr {
display: none;
}
To add to #lonesomeday's answer: The correct use of the HR element is important to screenreaders, and text-based browsers. This example is given from the spec:
Some examples of thematic breaks that can be marked up using the hr element include a scene change in a story, or a transition to another topic within a section of a reference book.
The use case in the question is presentational, not thematic. So it would not add a benefit to a text-based browser, or screen reader. So an hr element should not be used in this case.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just started to work with HTML and I wanted to make a site which has got a colour on the upper side, an another colour on the lower side. I did some research, and I discovered that you got to work with divs. Can you make a nice div in HTML, or do you got to make a div in css (which does fit correct to my site)?
Create your divs in your body with id's
<div id="upper"></div>
<div id="lower"></div>
and then using css you can change some attributes such as color and size, for example in either an external css file or inside of style tags you can do this.
#upper {
background-color: blue;
width: 100px;
height: 100px;
}
#lower{
}
w3schools.com is a great resource for beginner web development, check it out.
Div is a html element. You can set its properties through css but a div doesn;t exsist in css. It is just a way to divide up section in html. Here is some basic information about divs.Divs Info
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to build a program that can utilize a classname for its data
(i.e. if class="hero-banner-80" I could use the 80 as its width) and I was wondering how font-awesome does it? It uses its class-name to decide which char to place inside its element, and reading the src code didn't help me.
There's is no way to dynamically parse a class and generate rules based on some portion of it with an arbitrary value, as you seem to want to do. But you could put the width in a data attribute, as follows:
<div class="hero-banner" data-width="80px">
[data-width] {
width: attr(data-width);
}
It uses pseudo classes on each icon, with the unicode of the icon as the content. The size of the icon is inherited by the font-size of the parent.
What you are asking for is just basic CSS:
.hero-banner-40 {
width: 40px;
}
.hero-banner-60 {
width: 60px;
}
.hero-banner-80 {
width: 80px;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have been building a website and trying to apply most of the HTML5 / CSS3 and I got myself to a question.
So, I had the following CSS...
section.t aside div.bio{
float: left;
margin-top: 12px;
}
section.t aside div.bio p{
color: #555;
line-height: 18px;
}
And the HTML...
<aside>
<h1>Title</h1>
<ul>
<li>###</li>
</ul>
<div class="bio">
<p>Text</p>
</div>
</aside>
Then I changed the CSS to...
section.t aside p.bio{
float: left;
margin-top: 12px;
color: #555;
line-height: 18px;
}
So the last part of the HTML simplified as...
<aside>
<h1>Title</h1>
<ul>
<li>###</li>
</ul>
<p class="bio">Bio</p>
</aside>
Basically, I did drop the div wrapping the p, and give the p the style. The result is exactly the same.
My question is if there are any advantage of wrapping things inside a div like in the first case? or not?
I did get to realize my whole website pretty much is without div tags anymore. Is thre any consequence for that? is that either a bad practice or cause any seo troubles?
There's no bad practice to not using divs when other tags are more appropriate. You may find it hard to combine parts of your code into groups without container divs, but other than those specific use-cases, there's no real downside.
When there is no other new tag that defines the content you're using, then <div> is the way to go.
If there is no need for a div then absolutely remove it. There is no point cluttering up your markup just for the sake of it.
My workflow when it comes to writing HTML is to write it as a document first. So only adding the semantic markup that is necessary for the document to read correctly.
Then when it comes to styling the document if I need to use elements like div or span for presentational purposes then I will, because that is what they are for.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm working on a responsive theme that I want to sell. I really want to make it easy to understand at a glance what's going on. One of the tradeoffs of moving from foundation 3 to bootstrap 3 and Foundation 4 (in my opinion, and as noted elsewhere), is the nearer - verbose naming you have to adopt when designing for multpile screen sizes.
Thus, I've tried as much as possible to achieve something like this:
<a class="button soluks_button square_round no_bold">Button</a>
OR This
<a class="custom-button green square-round button-in-navbar text-shadow">Button</a>
Given I'm building my styles on top of bootstrap and foundation, is this too much? or is it okay as long as its readable?
You should make use of a CSS preprocess such as SASS or LESS to keep the HTML semantic and significantly easier for your end-users to work with.
Using the SASS directive #extend, you could give class names as you are currently doing, but extend them in the css rather than forcing the user to remember to include each one in the html. However, by using #extend, the classes could still be applied individually if needed/ if the user wanted to change the default. Something like this:
.button {
display: inline-block;
}
.square-round {
#extend .button;
border-radius: 5px;
}
.no-bold {
font-weight: normal;
}
.soluks_button {
#extend .square-round; // which extends .button by inheritance
background: blue;
}
Then your html could be much more semantic and just give the class of the actual element itself:
<a class="soluks_button no-bold">button</a>
And for the purpose of a versatile theme, to change the default or add an additional style a user could still do:
button