Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
First off if someone can point me to a good reference that describes how css works and how to do basic stuff I would be very grateful! I know the stuff is out there but finding it with search engines is problematic because of the way results are weighted towards things that describe individual elements from a height of one inch (2.5 cm ;) but I need something looking from a height of a couple of metres!
here is some simple html:
<html>
<head>
<style type="text/css">.indent: { margin-left: 2em; margin-top: 0 } </style>
</head>
<body>
.indent { margin-left: 2em; margin-top: 0 }
Some text ...
<div class="indent">I want this indented:
xxxxx
</div>
</body>
</html><br>
which renders as:
Some text ...
I want this indented: xxxx
I want the last line indented and I can do this by specifying the style in the div tag. Further more I want to nest the divs and get another level of indenting.
EDIT: too late :)
So, as #ray hatfield said by removeing the ":" behind ".indent"
Tutorial
For Tutorials try W3Schools with a lot of information to HTML, CSS, JavaScript etc.: https://www.w3schools.com/w3css/default.asp
CODE
You can do it like this:
.indent { margin-left: 2em; margin-top: 0 }
<html>
<body>
Some text ...
<div class="indent">I want this indented:
xxxxx
</div>
</body>
</html><br>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I have the following line of code, and having added the additional bit (font-colour="green") it doesn't in fact turn the h4 title green.
Can anyone suggest a fix for this?
I also tried added a highlight to the h4 tag, and it removed the left-align feature.
I think the issue may be that I do not understand how it is organised/structured and where I need to make my additions to the code. An explanation of this in any answer would be appreciated.
Code to turn H4 title green (not working)
<h4 style="text-align:left;width:50%;margin-top:30px;font color="green">Tracking</h4>
code to add highlight to H4 tag
<mark><h4 style="text-align:left;width:50%;margin-top:30px;">Tracking</h4></mark>
with the following in the css
<style>
mark {
background-color: black;
color: white;
}
</style>
Along the same lines of formatting for this h4 title text. I tried to add a black line underneath it using and it didn't show up - so whether it was white or transparent I don't know, as it did make a space, but showed no colour.
I then tried this:
<font color="black"><hr></font>
but of course, that didn't work either.
Could the whole problem - with all the examples I've described be something to do with my css? And if so, how do I manually for each individual tag override it to perform the functionality I've described?
You have a typo in your style. Instead of style="text-align:left;width:50%;margin-top:30px;font color="green" it should be style="text-align: left; width: 50%; margin-top: 30px; color: green"
Note the difference between the last parts of both styles.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
So this is what i have Tried, which doesn't work.
Ive also tried to make it a block and then margin that as 0 auto, like other questions say, but that doesn't help at all...
<!DOCTYPE html>
<html>
<head>
<style>
.logo {
text-align: center;
}
</style>
</head>
<header>
<div id="logo">
<img src="logo.png">
</div>
</header>
</html>
I just cannot seem to center this image, and i would like to in as little lines as possible.
need # for id . is used for class
#logo{
text-align:center;
}
Edit
Answered in comments above
I recommend you to add the body tag and do not make mistakes between id and 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 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 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 not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Okay, so this question could hardly be more basic, but... Why does this CSS rule not pick up the image inside the table?
# HTML
<table id="support-people"><tr><td>
<img src="http://news.bbcimg.co.uk/img/1_0_1/cream/hi/news/news-blocks.gif" /></td>
</tr></table>
# CSS
#support-people img {
width: 50px;
}
JSFiddle to show that the CSS is not being applied: http://jsfiddle.net/96F8H/
And if anyone can recommend me some kind of in-browser tool to pick up this kind of thing, bonus points...
It works fine. The problem was you had your CSS rule in the Javascript field. Here's a link with the things in the correct fields: http://jsfiddle.net/Skooljester/zHvx9/.
Your CSS is in the JavaScript box in your demo. Here's a corrected version.
If the example in the question is your actual code, you'll need to wrap the CSS with style tags:
<style type="text/css">
#support-people img { width: 50px; }
</style>
Mostly because you put the CSS in the Javascript part of JSFiddle.
Here's the working version with the CSS moved to the CSS section of the page: http://jsfiddle.net/96F8H/2/
It works fine. You put the css in the javascript section:
http://jsfiddle.net/96F8H/1/