<!DOCTYPE html>
<html>
<head>
<title>my web page</title>
<meta name="author" content="akhil">
<style>
h1{color: red;font-size: 400%}
p{color: red}
</style>
</head>
<body>
<section>
<h1>hello how are you?</h1>
<p>i am fine.<hr> what about you?</p>
</section>
</body>
</html>
In this document style is applying to h1 and p but it is not applying to line after hr tag, how to make style apply to line after hr tag?
A paragraph cannot contain a <hr /> tag, so all text after <hr /> will be out of <p> tag. It's better to use this way:
h1 {
color: red;
font-size: 400%;
}
p {
color: red;
}
<section>
<h1>hello how are you?</h1>
<p>i am fine.</p>
<hr />
<p>what about you?</p>
</section>
This is how the browsers render your code:
Your content isn't inside the <p /> tag anymore.
you can close and open the paragraf:
<p>i am fine.</p> <hr><p> what about you?</p>
Related
I want to generate a PDF from an specified view respecting my actual CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
.justify {
text-align: justify;
text-rendering: geometricPrecision;
}
.center {
text-align: center;
}
body {
font-size: 15px;
white-space: normal;
line-height: 110%;
text-rendering: geometricPrecision;
}
.rightheader {
font-size: 12px;
}
.bigger{
font-size:18px;
}
</style>
<link href="~/Content/uikit.css" rel="stylesheet" />
<link href="~/Content/CartaSates.css" rel="stylesheet" />
<title>
</title>
</head>
<body style="padding:10px;">
<div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
<div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
<img src="~/src/img/logo.png" style="width:200px" />
</div>
<div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
<div class="uk-grid">
<div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
<strong>Section:</strong><br />
<strong>Office:</strong><br />
<strong>Case:</strong>
</div>
<div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
<span><strong>Foreign Trade Directorate</strong></span><br />
<span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
<span>Request for verification of request.</span>
</div>
</div>
</div>
</div>
</body>
</html>
I already have the my HTML with CSS and it´s showed as intended, logo to the left, and text separated in two minnor divs to the right, but when the PDF is generated, it separate my divs in diferent rows.
I'm trying to use the media attribute for internal style sheet. I am using media=print and media=handheld for mobile devices. However this is not working. Not to sure why?
EDIT: The outcome I am trying to get is, media="print, test text = blue and picture to be static. Media="handheld" , test text= red and picture to be responsive/dynamic.
<html>
<head>
<style media="print">
p.slide {
width:1040 px;
height:383 px;
color:#00F;
}
</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>
<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >
</p>
</div>
</body>
</html>
It works fine, but you can't test "print" and "handheld" on jsfiddle. (It doesn't accept media-attributes, and you can't define <style media=""> inside the CSS-field.
<html>
<head>
<style media="print">
p.slide {
width:1040 px;
height:383 px;
color:#00F;
}
</style>
<style media="handheld">
p.slide {
width:20%;
height:10%;
color:#F00;
}
</style>
</head>
<body>
<div>
<p class="slide">
test
<img src="https://hpva2w-ch3301.files.1drv.com/y4m3P0wDLAI8GVZl1qYwcsqB9AFNfl5mJCFQw_f3627uFXESiPUbkJmyrLNvzVaz4uIIA8vlEX3i11Frkm8p8VGDSwyW8Oempo79nFvc2xFJe5KuKOpVT6ZhNUSasTvPRfX7PBsdL6riiJf8aaSs7McYyZSc9gL0qQZPJEXAk3fjlV93b3bpoxtCBglvXHIQut7RTaM12d0vcrbEvzv-DtQ8A?width=1024&height=683&cropmode=none" >
</p>
</div>
</body>
</html>
I need to put my span inside a div,but because the content of div is more, it is overflown out of the border of the parent div.
How to solve it?
My outer div should be flexible because the contents in span is dynamic.
Here is the plunker link = DEMO
.outerDiv {
width: 100%;
border: 2px solid black;
}
.div40 {
width: 40%;
}
.div60 {
width: 60%;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="outerDiv">
<span class="div40">
hello
</span>
<span class="div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
You need to add a new element after div60
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
<div class="clear"></div>
</div>
and add the following in your CSS
.clear {
clear: both
}
set the outerDiv to display: inline-block
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display: inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
By adding display inline block to outer div class you can achieve it.
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display:inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>.outerDiv span{}</style></style>
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
Move to fluid content... bootstrap.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-8">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</html>
I am trying to get 3 icons horizontally aligned with the title of my website. I can't seem to get them within the same margin as my banner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
CrossFit Villains
</span>
<div id="social">
<img src="fb.png" />
<img src="bird.png" />
<img src="tv.png" />
</div>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
The CSS for the icons:
#social img {
float: right;
width: 70px;
height: 70px;
}
Allright,
First of all be sure to float the a elements instead of the img.
The title should be floated as well, to lign them up correctly.
Also give classes to the other span element in your header so you can apply styles to it. Using <br /> for a new line between elements in HTML is wrong practice.
span.title {
float:left;
}
#social {
float:right;
}
#social a {
float:left;
margin-right:2px; /* just for the spacing of the elements in example */
}
span.address { /* Added this class to the span in the HTML for styling */
float:left;
}
div#banner {
clear:both; /* to replace the <br /> tag */
}
Please see the edited fiddle.
Note: The images weren't linked properly, so I gave the "icons" a red background and your body a black one for readability..
Cheers, Jeroen
How to give same style to first 2 paragraphs differently in css.
<html>
<head>
<style type="text/css" media="screen">
p+p {color:red}
</style>
</head>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
</body>
</html>
I've tried this but it's leaving first paragraph and styling all other.
and this only style first paragraph not others
<html>
<head>
<style type="text/css" media="screen">
p:first-child { color: blue; }
</style>
</head>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
</body>
</html>
remember I want to give same style on first 2 paragraph.
Go here, and try this code out :)
http://www.w3schools.com/css/tryit.asp?filename=trycss_first-child1
p:first-child
{
color:blue;
}
p:first-child + p
{
color: red;
}
It depends on what browsers you want to be compatible with. The latest versions of Firefox, Safari, Chrome, and Opera all support the nth-of-type pseudo-element, but IE does not yet (it is a CSS 3 feature, which IE does not support much of). If you can limit yourself to these browsers, the following should work, otherwise, you'll need to use one of the solutions from one of the other answers.
p:nth-of-type(1), p:nth-of-type(2) { color: red }
first of all, ID's need to be unique on a page. You can't use id="hello" twice. You need to use class for that. Try:
<html>
<head>
<style type="text/css" media="screen">
.hello { color: blue; }
</style>
</head>
<body>
<p class="hello">first paragraph</p>
<p class="hello">second paragraph</p>
<p>third paragraph</p>
</body>
</html>