I have a well boostrap component containing some text
<div class="well well-sm" id="well_job">
<p>
<h5><%= "#{job.job_description}" %></h5>
</p>
<p>
<h6><%= "#{job.from_date} -" %></h6><h6><%= "#{job.to_date}" %></h6>
</p>
</div>
when I try to select it by one of its classes to change the font family it doesn't change(I tried to select it by .well-sm but nothing changes as well):
.well{
font-family: 'Rock Salt', cursive;
}
How can I select the well and change the font-size to its inside text?
First of all, your syntax is incorrect as you cannot place a header tag inside a paragraph tag. The following syntax
<p>
<h1>Some Header</h1>
</p>
will be interpreted by the browsers as
<p></p>
<h1>Some Header</h1>
</p>
and you will end up having an unexpected </p> end tag. Validating your html will lead to this error:
No p element in scope but a p end tag seen.
Back to your question, in case of using header tags you also need to specify a style targeting that specific header tag.
.well {
font-size: 14px;
}
.well h5 {
font-size: 24px;
}
Have you import the font into the tag <head>?
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
Then for change the font size:
.well{
font-family: 'Rock Salt', cursive;
}
.well p h5{
font-size:30px;
}
.well p h6{
font-size:20px;
}
Related
I am trying to inherit the global font-family in a variable. However this does not work.
:root {
--special-font: sans-serif;
}
html {
font-family: serif;
}
.highlight {
font-family: var(--special-font);
}
.special {
--special-font: inherit;
}
/* .special {
--special-font: serif;
} */
/* .special .highlight {
font-family: inherit;
} */
<html>
<body>
<div>
<p>
Standard Font: Serif
</p>
<p class="highlight">
Highlight Font: Sans Serif
</p>
</div>
<div class="special">
<p class="highlight">
Special Highlight: should be Serif
</p>
</div>
</body>
</html>
Both the commented out rules would work. But I would prefer to not repeat myself. Is there something I am missing?
Figured out what is happening, thanks to a comment, this question and this answer. I am not actually setting the variable to contain the value inherit but rather tell the variable to inherit its value.
In order do make my font-family inherit the documentwide font, I can set the variable to initial.For a variable this is an empty string, thereby setting the font-family property of my paragraph to its default behaviour, which is inherit.
I am very new with CSS and I can't style my code well. How to set "font-size:30px;" for the text "font_30", and "font-size:3px;" for the text "font_3" in the code example?
<style>
.cl_30 {font-size:30px;}
.cl_3 {font-size:3px;}
</style>
<div class="cl_30">
<p class="cl_3">font_3</p>
font_30
</div>
What you've done is exactly correct. The font-size of 3px is quite small and easy to glance by, but the text is visible if you look closely.
<style>
.cl_30 {
font-size: 30px;
}
.cl_3 {
font-size: 3px;
}
</style>
<div class="cl_30">
<p class="cl_3">font_3</p>
font_30
</div>
I have some inline CSS I can't change
<span style = "color: #404040; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; line-height: 17px;">
stuff
</span>
and it is overriding my external CSS. I tried putting !important
.product-description
{
font-family:wide latin !important;
}
but it had no effect
If I go to inspect element and delete the style attribute, my external CSS works
Update 1
OP mentioned they only have access to the CSS file.
In this case, you will need to change your CSS selector up a bit but is still doable. The example below has the class applied to the parent element of an element you'd like to change.
.change p {
color: pink !important;
}
<div class="change">
<p style="color: blue;">
This is some text.
</p>
</div>
You might have to get even more specific with your CSS selector if there are a lot of child elements to wade through when you hook into a CSS class selector. Try to hook into the CSS class selector that is the closest to the element you want to target.
.change div p:nth-child(2) {
color: pink !important;
}
<div class="change">
<p style="color: blue;">
This is some text.
</p>
<div>
<p style="color: green;">
This is some text.
</p>
<p style="color: orange;">
This is some text. (only change me)
</p>
</div>
</div>
Original Answer
My guess is that you're not applying the CSS class directly to the element you want changed as I do not see .product-description being applied to the example <span>.
Look at the two examples below.
I think you're attempting this one, class applied to outer element of the element you want changed. <p> would inherit the color of .change if <p> didn't have something with a higher specificity applied to it, like inline CSS or another CSS class.
Here we apply the class directly to the element we want changed, that way the specificity of !important can override the specificity of the inline CSS.
.change {
color: pink !important;
}
<!-- #1 -->
<div class="change">
<p style="color: green;">
This is some text.
</p>
</div>
<!-- #2 -->
<div>
<p class="change" style="color: green;">
This is some text.
</p>
</div>
I have a pre tag which is causing the css to display with too much whitespace.
How do I remove it with css?
<!-- page-title -->
<h1 class="page-title" itemprop="name">Checkout</h1>
<!-- /page-title -->
<div class="page-content entry-content" itemprop="articleBody">
**<pre>**<div class="woocommerce">
<div class="woocommerce-info">Have a coupon? Click here to enter your code</div>
<form class="checkout_coupon" method="post" style="display:none">
The css reads
pre, xmp, plaintext, listing {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}
how do I change whitespace:pre?
This is a wordpress site using woocommerce plugin.
You can add the following to your CSS to overwrite this specific pre tag
.page-content.entry-content pre {
white-space: normal;
}
If you use a child theme, you can add it in your stylesheet (style.css), else you could use Jetpack's Custom CSS to add it.
If the above wouldn't work, try:
.page-content.entry-content pre {
white-space: normal !important;
}
GL!
i have an html as below
<!DOCTYPE html>
<html>
<head>
<style>
p{font-size:14pt;color:red;}
</style>
</head>
<body>
<div>
<p> this is a p without class defined</p>
</div>
<div class = "temp">
<p> this is a p tag in another div</p>
</div>
<div class = "test">
<p> this is a Original Mail</p>
<p class="hello"> this is a p tag </p>
<p> this is a p without class defined</p>
<div> this is a div tag
<p> this is a p tag within the div</p>
</div>
</div>
</body>
</html>
i want to apply the style to all p Tags within the div with class test.
i tried putting like div.test > p{font-size:14pt;color:red;}
but then the style is not getting applied to the p tag within the child div of div with class name test.
please help me to sort out this.
JSFiddle: http://jsfiddle.net/8K2yL/
The selector you want is:
div.test p {
font-size:14pt;
color:red;
}
This will select all p tags that are anywhere inside a div.test tag.
The selector div.test > p will only select p tags that are DIRECT children of div.test.
Specifying the tag name right after the class name selects all the matching tags found inside the class.
.test p{
font-size:14pt;
color:red;
}
The > selector selects direct decendants. Therefore children of children will be ignored.
Change to this:
div.test p {
font-size:14pt;color:red;
}
Just do like below
div.test p{
font-size:14pt;
color:red;
}
Fiddle for you DEMO
<style>
div.test p{
font-size: 14pt;
color: red;
}
</style>