Custom css for hr tag - html

I'm declaring css for hr tag like ..
hr {
height: 2px !important;
background-color: #A2B1B9;
width: 9%;
margin-left: 0px;
margin-top:auto;
}
But the width of the hr tag dosen't always need to be the same as per the text that it is supported with. Please refer to the screen shot.
In this case I can either supply differen width along with the hr tag using inline css like . But as inline css dosen't fit to the ethical standards of web development is there any other approach that I could follow to make it dynamic?

HI now try to this way
Create a class and used to this css .
it's the best option for your .
.customHr{
padding-bottom:5px;
border-bottom:solid 2px black;
display:inline-block;
vertical-align:top;
color:blue;
}
<p>Custom Text here</p>
<p><span class="customHr">Custom Text here</span></p>
<p>Custom here</p>
<p>Custom Text</p>
<p><span class="customHr">Custom</span></p>
<p>Custom Text here</p>
<p>Custom Text here</p>

Rohit Azad's answer is best, but if for "ethical" reasons you would rather use an hr, you can wrap it together with the text to get the same length.
div {
display: inline-block;
}
<div>
<span>Text here</span>
<hr>
</div>
<br>
<div>
<span>T-t-t-t-t-text here</span>
<hr>
</div>

You can use Underline instead by putting the text in tag and then custom css for that.

Related

Somewhat new to html and css

I´ve been working with Html for a bit these last 2 weeks and just started css today. I understand some of the basics of css (some of the elements and how to make the code look neater) but there are a few things i dont quite understand and haven´t been able to find so far. Such as making an image smaller for example. Can anyone explain to me why this css code isn't working?
h1{
Color: #8a1319
}
.name {
color: #ba454b;
}
/*help with this part please? Cant figure out how to properly make it smaller*/
.joke{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
body {
text-align:center;
background: powderblue
}
<div class="name">
<h1>Dylan Carlson</h1>
</div>
<section>
<h1 class="title">
website
</h1>
<p>
<div class=joke>
<img src=http://www.jeremychin.com/repository/tickled/0355.jpg class=image />
<div>
<br>
<br> Age: 17
<br>
<br> Grade:12
<br>
<br> Intrest: programming
<br>
<br> extra curricular: N/A
<br>
<img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSJjXu1Ulhi3ExUJYOsgRxEcXywik5FG2B-ouj4E3RqgDIARssdQ>
</div>
</p>
<p>
Favorite Icecream: IDFK
<br>
<br>
Favorite color: Gold/Black
</p>
</section>
Remove the DIV around the image and add joke to the class:
<img src="http://www.jeremychin.com/repository/tickled/0355.jpg" class="joke">
Since you had joke as a class of the DIV, it applied to the DIV and NOT the IMG. Thus, the max height of the DIV was 250px and since the picture was larger, it overlapped.
A bit of advice: Keep CSS at the lowest level you can (the IMG in this case and not the DIV).
You are editing the image's parent div, that's why it's not working. Use the image's class instead.
.image{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
Css is not for creating things on the browser it is for styling elements. Ii is used to make things look as desired. The code as per your question will make a div (if styled on to) have a border with 2px in size with red colour and the div would be having width 50 percent as per the availability space and a maximum height of 250px

How to align text without overriding <centre>

I'm trying to align some text in HTML left, but I also want it to stay in the centre. When I align the text left, it overrides .
<center>
<b>
<BR>
<p style=color:orange;font-size:62px;text-align:left;"> If Bitcoin is now £0,<BR> and it was £0 when <BR>
I purchased, and I <BR> invested £0, the total <BR>
investment would be <BR>
worth £0, <BR>
The profit would be £0.</p>
</font>
</b>
</centre>
When text-align:left; is in there, the text aligns, but it also isn't in the centre anymore.
Any help would be appreciated!
EDIT: I want to align the text left, but it be in the centre of the page like this:
like this:
Try this: you can use a div (.wrapper) to keep the content in the center while you can align it wherever you want :)
.wrapper{
width: 300px;
margin: auto;
background-color: red;
}
.wrapper{
text-align: left;
}
<div class="wrapper">
<div>Aligned text</div>
</div>
Well, you can specify a width for your paragraph, and set its margins left and right to be auto:
.center {
width: 80%;
margin:10px auto; /* So 10px for top/bottom, auto for left/right */
color:orange;
font-size:62px;
text-align:left;
}
<b>
<br/>
<p class="center"> If Bitcoin is now £0,<br/> and it was £0 when <br/>
I purchased, and I <br/> invested £0, the total <br/>
investment would be <br/>
worth £0, <br/>
The profit would be £0.</p>
</b>
Side note: Your HTML code has a few syntax/formatting issues, like:
<center> tag closed as <centre> instead of <center> (well you shouldn't use this tag in the first place as it's not supported in HTML5).
For line breaks, it's <br/>, not <BR>.
Also, the <b> tag is deprecated nowadays, use <strong> or CSS instead.

How to have some text to the right of an image and some under it

I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.
I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.
Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/
Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.
Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.
If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)
Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp
img {
float: left;
margin: 8px;
}
.clear {
clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
I want this text to be under the image
</p>
And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/
Simply use clear:both to clear floating and the second text will go under the image :
img {
float: left;
margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
I want this text to be under the image
</p>
You can use the clear property to specify that the text should be inserted after floating elements.
<p style="clear: both;">
Lorem ipsum
</p>
JSFiddle: https://jsfiddle.net/7r51y7d4/3/
Target your second paragraph with CSS and use clear:both;
FOR EXAMPLE:
HTML Code:
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<p id="secondParagraph">
I want this text to be under the image
</p>
CSS Code:
img {
float: left;
margin: 8px;
}
#secondParagraph {
clear:both;
}
I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.

<p> is displayed under <img> tag without <br>

<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p> <p>text 2</p>
My text1 and text2 are going under the image but I didnt use <br> tag.
Is there any way to do this: 'img here' 'text1' 'text2' ?
Thanks.
You can use Following css for this
img, p {
display:inline-block;
}
Just add this to your css
img{
display:inline;
}
p{
display:inline;
}
<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p> <p>text 2</p>
CSS property called display:inline could be used !
<img src=".."/>
<p style="display:inline">text1</p>
<p style="display:inline">text1</p>
It is better to always use a class and assign your styles to the class rather than to an element directly. This gives you better control over which element to apply a particular style to.
.my-img,.text1,.text2 {
display: inline-block;
margin-right: 5px;
}
<img class="my-img" src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p class="text1">text 1</p> <p class="text2">text 2</p>
Float is the right way to do this.
img {
float: left;
padding-right:5px;
}
<img src='http://placehold.it/220x220'>
<p>
Some text here.
</p>
<p>
Some more text to follow.
</p>
And this is not only my opinion. A quote from w3schools:
In its simplest use, the float property can be used to wrap text
around images.

HTML element aside from headers <h1><h2>, ect

I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)
You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.
You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.
<span> is a useful addition, as well.
You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?
<span> <strong> and <em> are others you can use inside your <p> tags.
i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps
You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.