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.
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 4 years ago.
Improve this question
I'm currently new(ish) at HTML. What I'm trying to do is Make a centered "Hello!" That has the font of Georgia and the font color of purple. This is what I have right now:
<div style="<font face="Georgia" color="purple"">
<center><h1>Hello!</h1></center>
</div>
I'm not even sure if I'm doing it correctly, but right now it's hard to find an anwser without having to use CSS, and I have no idea how CSS works.
Yes, CSS is required. HTML just builds the layout and framework of the page, while CSS styles it and makes it visually appealing / formatting how the page fits with everything. You should learn CSS. It's an excellent language that fits with HTML, and it will be very useful for later website development. Also, the tags <font> and <center> have been obsolete, so you shouldn't waste your time using them. You should look at the documentation for up to date HTML5 tags. Learning CSS will make this process a whole lot easier.
CSS:
.hello {
color: purple;
font-family: Georgia, Times, Times New Roman, serif;
text-align: center;
}
HTML:
<p class="hello">Hello!</p>
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 6 years ago.
Improve this question
I'm trying to change the background color multiple times within one page. Is there a way to put CSS in an HTML body?
There are two primary ways to do this:
1. Inline (Styles)
<div style="background-color: blue;"></div>
2. In-Page Block (Styles)
These are typically defined in the <head> section of the page.
<style>
.bg-blue {
background-color: blue;
}
</style>
If you are going to write your styles within a single page, I strongly advise going with "Option #2: In-Page Block" since it allows for reusability and is easier to maintain.
Does that help to answer your question?
You can use <style></style> tags and put styling inside them, too. Best put into the <head> section.
<style>
body p {
font-size: 18px;
}
</style>
If you mean "Can I write inline css within the html body" then yes, you can! (See below). But having a separate CSS stylesheet is generally considered the better option.
<div id="myDiv" style="background-color:red;">
<!-- content -->
</div>
Just add style="add your attribute here" to an element and then separate attributes by adding ; between attributes;
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p style="color:red;margin-left:30px;">This is a paragraph.</p>
</body>
By default css is always inside an html body. One way is to create custom styling classes with simple names, and insert the class name inside the li or p tag around your text. If it is the background color of certain entries that you want to change, do so on an entry-by-entry basis.
.p (or .li, or p style="background-color:#c0c0c0;")
{
background-color:#c0c0c0; would give you a silver-gray BG color
}
This can be put into a single line with the open and closing style tags.You will need to do this for each line or paragraph that has an original or unique BG color. The color chosen stays in effect until you change it.
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 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 a beginner to HTML and I'm trying to position text on my HTML page i am unsure if CSS is needed to position text on a page.
CSS is absolutely how you position and style any HTML elements. You can use simple tags, like <b> or <i>, for minor formatting. Unless you're only building a motherfucking website, you'll want to use CSS. If you run into problems, post specific issues in this forum.
great that you are diving into html !
Because this seems like a "basic" question and you've pointed out you are a beginner I'm just going to recommend some resources to learn more:
https://www.codecademy.com/ is a great source for learning code and it's free.
They have an html/css course right here
some others which offer basic html/css courses (not free):
https://www.codeschool.com/
https://teamtreehouse.com/
Have fun learning!
you can do like this
<b style="margin: auto; width: 13px; color: yellow; background-color: red;>Some text</b>
this is a very basic part of html :) good luck learning html and have fun coding :)
You do need CSS, however you can use styles in your HTML tags, but this should be very limited. For example
<div style="background-color: black; color: grey; margin: auto;">Some text</div>
or if you don't want to have a separate CSS file, you can use CSS in HTML like this:
Something
<style>
div {
background-color: black;
color: grey;
margin: auto;
}
In both cases you are using CSS only they are in your HTML file.
I STRONGLY encourage you to start learning CSS, as that is something you will need.
Wrap the content in <center> tags, so it looks like this: <center>..Content..</center>
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 set positions of forms. My teacher says this can be achieved using <Frameset> tag but this tag creates borders between the two frames and I don't want those borders. I have basically have 2 forms , one contains basic text and the other one contains some images. I want both these forms to display side by side not one below the other. Is there any way to achieve this?? please help.
Here you go
http://fiddle.jshell.net/FBXZC/
HTML
<div class="wrapper">
<div class="halfwidth">
I am One Half
</div>
<div class="halfwidth">
<img src="http://www.metal4.de/wp-content/uploads/2012/09/steel-panther.jpg" alt="">
</div>
</div>
CSS
.halfwidth {
display: block;
width: 50%;
float: left;
}
PS: get yourself a new teacher or go complain about him, he obv. has no idea of anything.
You can use css to style forms.
try this fiddle for the sake of demo.
form
{
background-color: red;
}
Welcome to SO and I'm glad to see a new student in web development. I don't want to go against your teacher, for he/she is probably teaching you the behaviors of frameset, but frameset is not the best way.
This is what you should do :
<div class="wrapper">
<div class="left-side"></div>
<div class="right-side"></div>
</div>
DEMO
I suggest you to use Dreamweaver to give you the exact position for each element. In general tags define the positions.