I have the below style:
.field.field--name-name.field--type-string.field--label-hidden.field__item.quickedit-field {
position: relative;
z-index: 200;
display: block;
float: left;
max-width: 200px;
background: #a02853;
font-family: 'Open Sans', Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
line-height: 100%;
padding: 5px;
font-size: small;
I want to apply this to div in /blog/* pages alone. How to do this?
The div I'm trying to apply this to:
<div data-quickedit-field-id="taxonomy_term/2695/name/en/default" class="field field--name-name field--type-string field--label-hidden field__item quickedit-field">Term1</div>
we have several solutions for this question. first of all you have to set unique class into body tag and call the body class before .field.field--name-name.field--type-string.field--label-hidden.field__item.quickedit-field
Secondly, you have to use a specific id for element and you use it in style but I don't recommend using it.
Related
I have stumbled across a problem that I can not seem to solve in any way, maybe I am using divs in a wrong way?
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
This is the outcome:
I want to decrease the space between my <h1> and <h2>, and I found out that the way to do that was to set line-height in h1 to 0px.
But as I do that my entire page moves up like so:
I want to keep the text at the same position as it was before I change the line-height. I am suspecting that I am using the div class function wrong. This is more of theoretical question.
headings h1 to h6 have margin by default, so you need to reset it, setting: margin:0.
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin: 0
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
text-align: center;
margin: 0
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
HTML heading tags have some default CSS values applied in most browsers. Following are the values of h1 and h2 that are applied to them by default, so you need to override the margin-bottom of h1 and margin-top of h2 if you want to decrease the spacing between your h1 and h2.
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin-bottom: 0;
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center;
margin-top: 0;
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
Just add the following lines
.greeting h1 {
margin:0px;
line-height:35px;
}
.greeting h2 {
margin:0px;
line-height:35px;
}
If you just want you to assign the margin only for this block you do not need to define it globally you can just do the same this using inline CSS
<h1 style="margin-bottom: 0">Hi</h1>
<h2 style="margin-top: 0">Select a group</h2>
I have a h1 in my header and in another section of the document. I'm told this effects SEO but I digress, i'm just learning by copying other peoples pages and attempting to style them as they did without looking at their code.
So my h1 styles fine but when i target h1 inside a section class the style doesn't apply.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
font-family: inherit;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
My guess is that the class.h1 rule is overriding the h1 rule. If this is the case, how can I apply my top border to my h1, while still inheriting the h1 properties.
Apologies if I am murdering any CSS nomenclature.
The inherit keyword specifies that a property should inherit its value from its parent element. So the parent is section, and there is no rules for font on section. Remove the inherit.
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400;
margin: 1px auto 13px;
}
.header h1 {
border-top: 3px double #232323;
padding-top: 10px;
}
<body>
<h1>This is a header</h1>
<section class="header">
<h1>This is a header</h1>
</section>
</body>
There doesn't seem to be much wrong with your code. Indeed if you declare global h1 properties they will be used for all h1's on your site.
If you create specific rules then those will apply to any h1 which meets that rule but the other properties will be inherited (if they are different).
I updated the fiddle here: http://jsfiddle.net/lharby/ukhua6jm/2/
Example:
h1 {
/* global porperties */
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
.photography h1 {
border-top: 3px double #232323; /* new property */
padding-top: 10px;
font-size: 2em; /* overwrite existing property */
}
Use !important on the rules that you want to use to override whatever rules the <section> applies to your <h1>.
For instance, if you want to apply the fonts on your original h1 to the one inside the section:
h1 {
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
font-size: 1.7em;
font-weight: 400px;
margin: 1px auto 13px;
}
Demo: http://jsfiddle.net/gcj6xLL0/
This question already has answers here:
CSS to select/style first word
(14 answers)
Closed 8 years ago.
I was trying to color just first WORD of sentence
<div class="logoS">Title Of The Page</div>
CSS which am using is
.logoS{
padding: 0px;
float: left;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
color: white;
border:solid 1px black;
font-weight: bold;
font-size: 22px;
}
.logoS::nth-word(1) {
margin-right: 20px;
}
i just want to color "TITLE" not other words, any solution
Try this, hope this will help .
.logoS:before {
color: red;
content: "Title ";
}
<div class="logoS">Of The Page</div>
The code
<div class="logoS"><span id="first">Title</span> Of The Page</div>
.logoS{
padding: 0px;
float: left;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
color: blue;
border:solid 1px black;
font-weight: bold;
font-size: 22px;
}
#first {
margin-right: 20px;
color: red;
}
Use a span with preferred style for the first word like
<div class="logoS"><span class="spanstyle">Title </span>Of The Page</div>
// CSS
.spanstyle {
color:blue;
}
Check this link . There is :first-letter and :first-line, but no :first-word.
Use a span tag, this way it won't start a new line. For example:
<div class="logoS"><span id="title">Title</span> Of The Page</div>
and then in your css just add:
#title{
color: red
}
Hope this works!
There is :first-letter and :first-line, but no :first-word (MDN Search). Just wrap your first word in an element. Fiddle exmaple
<div class="logoS"><span id="first-word">Title</span> Of The Page</div>
.logoS{
padding: 0px;
float: left;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
color: blue;
border:solid 1px black;
font-weight: bold;
font-size: 22px;
}
#first-word {
margin-right: 20px;
color: red;
}
Or you can use javascript (here's an example), but if you look at the code, all he does is wrap the first word in a span and add a class.
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;
}
I need to center the text in one of my inline-block button. How might I go about accomplishing this? Any help will be appreciated.
Source Code:
CSS:
.dropMenu
{
color: #FFFFF0;
text-decoration: none;
display: inline-block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
}
.dropMenu:hover,
.dropMenu.selected
{
background-color: #544E4F;
}
HTML:
dropMenu
Without vertical-align : middle:
http://img140.imageshack.us/img140/7476/withoutt.png
With:
http://img834.imageshack.us/img834/904/withe.png
I've just find the solution by adding a label and changing his css:
Button
<label for="dropDown">Menu</label>
Css
label
{
padding: 0 5px 0 5px;
vertical-align:super ;
}
.dropMenuButton
{
color: white;
text-decoration: none;
display: inline-block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
padding: 5px 5px 5px 5px;
}
If you know for sure that your options are going to fit on one line per option, you can use the line-height property to set the height and the text will automatically be vertically centered.