Please help me to create this format of paragraph in html & css
CSS and HTML:
.home-p-main {
font-family: Times New Roman;
font-size: 10pt;
text-align: left;
position: relative;
margin-left: 10pt;
margin-right: 10pt;
position: absolute;
margin-top: 1pt;
color: black;
background-color: aliceblue;
text-indent: 10pt;
}
.home-p-main::first-letter {
text-transform: capitalize;
color: red;
font-size: 300%;
font-weight: bold;
padding-left: 25px;
position: relative;
margin-left: -26px;
}
<p class="home-p-main">The Linux open source operating system, or Linux OS</p>
Just with html and css
I am guessing that the problem is that the first letter stays on the first line, and the second line underneath it. And you would like the second (and so on) to be on the right of the first letter.
You could do so, by displaying that first letter as a block, and float it to the left.
The CSS then looks like this (removed unnecessary lines)
.home-p-main{
font-family: Times New Roman;
font-size: 10pt;
margin-left: 10pt;
margin-right: 10pt;
margin-top: 1pt;
background-color: aliceblue;
}
.home-p-main:first-letter{
text-transform:capitalize;
color: red;
font-size: 500%;
font-weight: bold;
display: block;
float: left;
margin-right: 5pt;
}
DEMO
CSS
.home-p-main{
font-family: Times New Roman;
font-size: 10pt;
text-align: left;
position: relative;
margin-left: 10pt;
margin-right: 10pt;
position: absolute;
margin-top: 1pt;
color: black;
background-color: aliceblue;
width:100px;
}
.home-p-main::first-letter{
font-size: 300%;
float: left;
height: 64px;
margin-right: 10px;
color: rgb(245, 10, 10);
border-radius: 5px;
}
For this to work as you wished you have to remove text-indent from .home-p-main class and if you wish the words to be aligned perfectly in-spite of break letters use word-break: break-all; in the .home-p-main class
DEMO
There's a property for that:
.home-p-main {
text-transform: capitalize;
}
If you want the first letter of the first word to be uppercase, use :first-letter with a different transform instead (although it doesn't really matter). Note that in order for :first-letter to work your a elements need to display as blocks:
.home-p-main {
display: block;
}
.home-p-main:first-letter {
text-transform: uppercase;
}
Related
I am trying to do the simplist thing on my app but I can't quite get it to work. All I want is for the word 'Assessment'. To be on the next line down.
I have used the following css to create the div around it and the text itself.
#name{
height: 60px;
background-color: #353A50;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px;
p{
font-family: Gibson SemiBold;
font-size: 14px;
color: white;
margin: 0;
line-height: 16px;
max-width:30px;
word-wrap:break-word;
}
}
And the HTML:
<div class="template-option">
<div id="image"></div>
<div id="name">
<p>{{template.title}}</p>
</div>
</div>
Anything stupid I am doing?
Expected result:
Fire Risk
Assessment
All that was required is the following:
white-space: normal;
Define a width for your p and give it display block:
#name{
height: 60px;
background-color: #353A50;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
padding: 16px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
p {
display: block;
width:60px;
font-family: Gibson SemiBold;
font-size: 14px;
color: white;
margin: 0;
line-height: 16px;
}
}
`Hi, I'd like to make a button with two lines of text and have them in different font sizes... Is there any way? My current way was trying it with an kind of designed button. Could that work in some way? Any help is appreciated! Beneath you see what I'm working with right now... I want to have a second line under "START" which is displayed in a much smaller font size
<a class="smallbtn">START</a>
.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
you could do this if you just want to add a new line of text under your "START"
<a class="smallbtn">START<br><sub>hello</sub></a>
or
p{
font-size:12px;
padding:0px;margin:0px;}
<a class="smallbtn">START<br><p>hello</p></a>
You can try insert a div inside the button, give an id to the element and add css, like this:
<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>
#smalbtnFont{
font-family: "arial";
font-size: 1em;
}
good question, heres how:
button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
<button>Start<br><small style="font-size:50%;">Now</small></button>
I want display the text on a new line for every p tag, so I did:
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday *
{
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title
{
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle
{
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
but the p tag are displayed on the same line.. What I did wrong?
It sounds like your p tag's widths are set to less than 100% and/or your p tags are set to a display of inline or inline-block.
In your CSS file, try this:
p {
display: block;
width: 100%;
}
If that doesn't work, you can always add br tags at the end of each p tag, but you really shouldn't have to do that.
Add A br tag in the middle of the p tags so they don't show up on the same line
<p> tags are block level elements, and therefore you don't need <br> tags. Your code seems to work for me...
.create-holiday * {
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title {
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday * {
margin-top: 100px;
display: flex; //make it flex
align-items: center; //flex middle vertical align
justify-content: center; //flex center align
}
.create-holiday-title {
width: 297px;
height: 22px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
I have a logo/home button for my webpage which is the abbreviation of my project (the temp letters I use are ABCDEF). I am using Arial for the font (although may change it later). As you can see from the photo of the logo, the letters do not completely align under each other.
I've tried font-kerning: none; which helps but does not completely make it do what I want it to do.
I've made a jsfiddle for this example and here's the link: https://jsfiddle.net/7dfetxto/
Otherwise, here's my code (same as in the jsfiddle):
HTML
<div id="logo">
<a href="#">
<h1>ABC</br>DEF</h1>
</a>
</div>
CSS
#logo{
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1{
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
My goal is to get the letters on the second line to fall directly under their respective letter on the first line.
Thank you.
letter-spacing
Use CSS letter-spacing property.
JSfiddle.
#logo {
font-family: "arial", "times", "sans-serif";
width: 128px;
height: 100%;
background-color: #336699;
float: left;
}
#logo a {
width: 100%;
height: 100%;
display: block;
text-decoration: none;
}
#logo h1 {
margin: 0px;
padding: 26px 30px;
text-align: center;
text-transform: uppercase;
font-kerning: none;
display: block;
color: white;
}
.h1b {
letter-spacing: 3.25px;
}
<div id="logo">
<a href="#">
<h1>ABC<br><span class="h1b">DEF</span></h1>
</a>
</div>
You might find this interesting: kerningjs
There are more possible ways. One is
font-size
By making the font-size of the second line (in this case) bigger, it will grow and reach the two sides of the first line: JSFiddle.
This might be a stupid question, but it has been troubling me a lot.
I have made 4 boxes and each box should have the text starting from a same line, but sometimes (when the text is less), it starts from the bottom.
Here's the image displaying it:
Ideally, it should start from the top and go till the bottom. Like this:
What changes should I make in my CSS code?
CSS :-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
My JSFiddle :- http://jsfiddle.net/xa0obvyr/
Because you are using inline-block, you need to specify vertical alignment if the default value doesn't suit you. In this case, you need
show-text-col-4 {vertical-align: top;}
However, your setup is less than ideal. Rather than floating the first time with a large left margin, I'd recommend you use a centered wrapper element instead, and style each of the columns in the same way.
This is what you need? with one CSS class and automatic 1/4 width of each column.
Please check the demo: http://jsfiddle.net/sk1rqxeo/
.show-text-col {
float: left;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
color: #606060;
width:24.5%;
display: inline-block;
}
You will need to set width to <p> tag
FIDDLE DEMO
.show-text-col-3 p{
width:200px;
}