I created a basic page with Bootstrap and cannot make the font size of my blockquotes smaller. When I change the CSS font-size property, the margins change since they're based on it, but the size of the text itself doesn't.
CodePen
Here's the CSS applied for the blockquotes:
blockquote {
font-family: Georgia, serif;
font-size: 1em;
font-style: italic;
margin: 3em auto !important;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
/* Element with abolute positioning is positioned relative to nearest positioned ancestor */
position: absolute;
/* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
left: -20px; /* Negative moves it left */
top: -20px; /* Negative moves it toward top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
If you want to change the font size of the text inside blockquote, You have to define font size property of the <p> tag inside the blockquote like this
blockquote p {
font-size: 0.8em !important;
}
!important is must necessary here it will override the font-size defined in bootstrap.
you can not use CSS direct like this
blockquote {
font-size: 30px;
}
because this tag has it's own font-size property.
The relation between blockquote and p tag is CSS Combinators
The blockquote override your css, so you have to add !important to the difenittion.
For Example:
font-size: 1em!important;
but if you want to chang the p tag:
blockquote p{
font-size:1em;
}
This is just because <blockquote> is outer element..The inner element is <p> so you have to apply changes to <p> itself.
blockquote{
font-size:30px;
}
p{
font-size:25px;
}
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
</blockquote>
Or if you want to use font-size of blockquote, you have to use !important like this:
blockquote{
font-size:30px !important;
}
Related
I created a Wordpress site and I added a blockquote element in the about section of the homepage.
I used :before and :after to insert a qoute unicode in my blockquote element but the problem is the :after pseudo quote is not responsive.
I inserted a top: 45% right: 34% temporarily and it works only for min-width: 1200px screensize.
blockquote {
display:block;
background: #fff;
padding: 20px 20px 20px 75px;
margin: 0 0 20px;
position: relative;
width: 100%;
/*Font*/
font-family: Georgia, serif;
font-style: italic;
font-size: 36px;
line-height: 1.2;
color: #242424;
}
blockquote::before{
content: "\201C";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
/*Positioning*/
position: absolute;
left: 10px;
top: -10px;
}
blockquote::after{
content: "\201D";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
position: absolute;
top: 45%;
right: 34%;
}
I am not sure what you mean by "not responsive" ("responsive" isn't a very well-defined term...), but I assume you mean that the position of the inserted ::after element is only correct at a specific window size?
The opening quotation mark always appears at the same position relative to the text, but the closing mark is positioned to the edge of the <blockquote> element, not the end of the text inside it. At some window sizes, when the text wrapping leaves a large gap between the last word of the text and the edge of the element, the quotation mark is separated from the text. This is made worse because of the large font size.
In your specific case, a simple solution is to change the blockquote::after selector to blockquote p::after, and remove the top:45% and right:34% properties. The ::after element is then inserted at the end of the text, which means its position changes as the text reflows.
I was able to solve a similar issue by just adding this:
width: inherit;
How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover?
Maybe there's some sort of 'main pseudo element' that I'm not aware of?
I've tried using CSS3 :not() statement but this didn't work.
Using: .facebook:hover:before {color: black;} works fine, but I'm sure that there's a better solution.
Example:
I want the Facebook logo to remain black and change the texts color.
body {
background: #F7F7F7;
margin: 0px;
}
.share-button {
background: #FFFFFF;
border: 1px solid #D8D8D8;
display: inline-block;
font-family: 'Open Sans';
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0px;
padding: 12px 24px 12px 12px;
transition: color 1s;
}
.facebook:before {
display: inline-block;
height: auto;
font-family: 'FontAwesome';
font-size: 12px;
padding-right: 12px;
width: auto;
content: '\f09a';
}
.share-button:hover {
color: #374D8D;
}
<button class="share-button facebook">
Share on facebook
</button>
The problem here is not that the pseudo-element is being "matched" by the :hover selector per se, but that it is inheriting the color property from the corresponding CSS rule on the element.
That is the reason why you need to set it explicitly on the :before pseudo-element — you cannot block inheritance using a selector, or using a style on the parent or originating element.
I'm trying to make a box with a header, a first paragraph, and a second paragraph. How can I select only the last paragraph in CSS so I can move it down, so it isn't overlapping the first paragraph? This is the code I have:
#info-box > p {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
position: absolute;
}
#info-box:nth-child(2) {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 100px;
position: absolute;
}
You're looking for :last-child
Quoting the specification:
The :last-child pseudo-class represents an element that is the last child of some other element.
Here's an example:
div {
width:100px;
height:100px;
background-color:red;
border:solid;
margin:2px;
display:inline-block;
border-width:1px;
}
div:last-child{
background-color:white;
}
Although to be fair, absolute position is rarely "the way" like Nit implied in the comments. Fixed sizes in pixel don't work too well on different screen sizes and different zooms, prefer a more logical layout. See this question on why.
CSS for last element try to use :last-child
#info-box:last-child {
}
Check here for reference CSS selector
http://www.w3schools.com/cssref/css_selectors.asp
I have h1 tags with a span to have the first word in 1.4em and the rest in 1.2 em. If I write
.item.large h1 {
font-size: 1.4em;
padding-top: 0.3em;
margin-left: 0.4em;
}
.item.large h1 span {
font-size: 1.2em; // why is this not taken into account?
}
the words in the span are actually even larger than 1.4em, not smaller! Why is this unexpected growth happening and how do I style part of h1 tags correctly? Thanks!
Edit: If I use 0,857142857142857em for the span, I visually get 1.2em height, but that's not the way to do it, I'm sure...
em size unit is relative to the parent element. You can use rem unit to be relative to the document's main unit size, so to the constant one.
For the more information see http://snook.ca/archives/html_and_css/font-size-with-rem
Because em is a relative unit of measure (to its parent).
You can use this code on your CSS:
#title h1{
display: block;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
#title h1>span {
display: block;
font-size: 11px;
color: #fff;
}
And in your HTML code:
<h1 id="title">My Title<br><span>My Second Title</span></h1>
I defined main stylesheet (default CSS of my project) like this:
body {
color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
line-height: 1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing: 0.03em;
}
letter-spacing and line-height works perfectly.
but, I found that two of them affect ul-li elements too.
I want that they affect text only not ul-li or any other elements.
Is there any side-effect on letter-spacing and line-height which I don't know?
If so, how could I make line-height and letter-spacing affect text only?
With the body definition you apply your style to all elements in your page. Try to identify the desired text elements like div, a, span, etc. and make a new css entry like this:
body {
color: #000000;
text-align:center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
}
div, a, span {
line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing:0.03em;
}
or apply a seperate style with specific key to your text elements.
You can define the CSS for the <p> tag only, and put all texts in a p element:
p {
line-height:1.5;
}
but, I found that two of them affect ul-li elements too.
So just make another selector for ul/li elements that sets it back to normal.
ul, li {
letter-spacing:0em;
line-height:1;
}
You can set the line-height and letter-spacing back to normal on li elements:
li {
letter-spacing: normal;
line-height: normal; /* this is actually 0em */
}
Why not just reset your ul li elements back to the default line-height after the body style?
body {
color: #000000;
text-align:center;
margin: 0px;
padding: 0px;
font-size: 0.75em; /* 12px */
line-height:1.5; /* font-size:1(12px) + line-space:0.33(4px) = 16px */
letter-spacing:0.03em;
}
ul, ul li {
line-height: 1;
letter-spacing: 0em;
}