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.
Related
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 2 years ago.
Improve this question
I have a bit of html the object of interest here being an h2 element.
#top-warning{
justify-content: center !important;
display: flex;
width: 100%;
margin-top: 5vw;
letter-spacing: 3px;
font-family: "Penguin Regular";
color: rgb(255, 255, 255);
}
I have this css for an h2 element but whenever the window size is changed, the h2 elements position changes (vertically) until its hidden under other elements. I was wondering how to make every element auto resize to stay scaled properly.
You primarily should be researching CSS properties such as the display property. Since you're new I recommend learning the difference between block and inline so you don't end up making block elements children of inline elements though it is valid to change an inline element inside of another inline element to be displayed as block.
Go to the developer tools in your browser (E.g. Control + Shift + C in Waterfox) and pick an element, set a background-color to something with contrast (e.g. #000) and then set a display property and press the down arrow to cycle through all of the available values that your browser supports to visually see what happens. That being said what you should really learn is about the context of when and where to use any given HTML5 element.
Tip: keep your CSS properties (in the code you posted) alphabetical, it'll help you stay better organized.
Good luck!
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 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.
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 8 years ago.
Improve this question
I am trying to display two kinds of styles in one webpage. I have a.css for the first style and b.css for the second style. The order is b overrides a. The problem is I want the css priority to be reversed in a particular div tag. Is this possible?
What is the reason for this? You can always override using an "!important" declaration. For example:
.style { font-size: 12px !important;}
Also, refer to this guide here: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade (Specificity Calculations, Inheritance, The Cascade)
There are very few cases where you need to have 2 different CSS files to do the same thing. However, there are many methods that can fix this, one of which is just creating an class/ID of its own in what ever CSS file you want to override with and then attach it to the HTML Element.
If that doesn't work, my next suggestion would be is to try inline styling.
<div id="blabla" style="whatyouwantforthisinparticular">
You can't just "override" another script through HTML. Code works in a linear format. Once it sees a new line of code referring to that, it will take precedence based on what you did with it. For example, in CSS, you can have 2 different body stylings, but the top one's attributes will only be used unless the second has something new to add. For example:
body{ background-color:black; width: 500px;
}
body{ background-color:white; height: 300px;
}
In this example, background-color: black will changed to "white" and then it will add 500px to the height on top of the width of the previous styling. However, if you must have black, then adding !important will make it take precedence over white.
Yes you can do it using the !important attribute.
.your-class{
property: value !important;
}
Also you can do that being more specific in your class
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 3 years ago.
Improve this question
How do you change the style of a text box from the default. For instance, so it looks like:
alt text http://www.wiggle100.com/Untitled-2.png
or
alt text http://www.wiggle100.com/Untitled-3.png
instead of:
alt text http://www.wiggle100.com/Untitled-1.png
Theoretically you can write a style rule like:
input[type=text] {
border: 4px solid purple;
}
However, the [type=text] syntax is not cross-browser compatible. I generally add a text class to the input, like so;
<input type="text" class="text" name="foo" />
Then you can write a traditional CSS rule like:
input.text {
border: 4px solid purple;
}
Of course, this assumes you want four pixel solid purple borders. Adjust accordingly.
The border CSS attribute is what I think you're looking for. See MSDN: http://msdn.microsoft.com/en-us/library/ms533532(VS.85).aspx
The input fields in your screenshot have not actually been styled, they look like the OS defaults. Instead, the designer has opted to style the parent elements such as the form, fieldset and possible divs or lists for positioning.
This article will give you a great foundation for building prettier forms.