I have been in contact with the pre-processor SASS for a year and a half now and it's nice to be able to use #extend and #mixins, but a case for using these two has come to my mind and a doubt just popped:
Let's say I have a <h1> tag and I want to style it, both its typography and positioning. If I have a placeholder selector for the specific typography I want to add, for example,
%typography-1 {
font-size: 18px;
line-height: 24px;
}
and I extend it to my <h1> and some other element in my page, let's say a <p> tag, I'll end up getting
scss:
h1,
p {
#extend %typography-1;
}
css:
h1,
p {
font-size: 18px;
line-height: 24px;
}
But I also want to style my <h1>'s positioning with
h1 {
left: 50px;
position: relative;
}
My doubt is: is there any side effect of separating my <h1>'s styling into two blocks?
I know this might sound silly, but it's a curiosity of mine. Probably it doesn't affect performance for sites or e-commerces (correct me if I am wrong), but for big webapps, I was wondering if it would be a problem.
Related
I have seen conflicting information about how to use a master style sheet and have experienced some bugs when testing methods. Just want to get clarification on the proper way to do this.
I would like to store cross website branding styles in a master global.css sheet and make page specific adjustments on a second .css file.
For example, this code would live on the master sheet:
#headline1{
font-family: 'Roboto', sans-serif;
font-size: 96px;
letter-spacing: -1.5px;
}
and this code would be page specific:
.headline {
color: #FFFFFF;
text-align: center;
}
I have recently read something that said you should not use ID in this manner. I've also run into issues when using it multiple times in the same grouping. I initially tried doing this using just classes instead of the ID, but it never worked. Not sure why.
Is this method considered proper? If not what is the proper way to do this?
If you create a master.css with:
.headline {
font-family: 'Roboto', sans-serif;
font-size: 96px;
color:#000
letter-spacing: -1.5px;
}
You can build upon/replace it per page as long as your custom css comes after the master.css
.headline {
font-size: 45px;
color: #FFFFFF;
text-align: center;
}
Quick example of a page:
<link rel="stylesheet" type="text/css" href="master.css"/>
<style>
.headline { //
font-size: 120px; // size overides master
color: #FF0000; // color overides master
text-align: right; // added alignment, which is overiding the browsers base css
}
</style>
I'm not sure if this is quite what you are looking for, but I hope it helps
In the example you provided a can only assume you have something along the lines of:
<div id="headline1"><span class="headline">Title</span></div>
This would basically mean any style applied to the div, the span would inherit unless told otherwise.
To further expand on this, you can also use inline styles <span style="color:#FFF"> which will dominate any other styling UNLESS an !important; has been added to a style element.
I have a question about CSS, i don't know how to removestyles of a class with an inline CSS code.
Let me explain more,
I have a CSS file named styles.css
In this file for example my h2 has some styles, now in my article i want to use h2 but i want to remove h2's default styles(written in styles.css) for this heading.
I guess there should be a way for this case, but i don't know how?
Please tell me this css code and teach me something new.
Thanks
Edit:
Please take a look to bellow picture. As you can see this h2 has some styles, can you see the pink vertical line in right side?
Now i want to remove this h2's styles with a css code. I guess something like my heading here should exist in CSS3. Am i right? Is there any css code for removing external css styles with an inline css code?
https://preview.ibb.co/m4BLda/Screenshot_2017_09_04_01_44_09_1.png
Here is the code:
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You said inline, but you should really keep your styles in a separate stylesheet file. Now, in your styles.css file add your own class:
/* styles.css */
h2 {
font-size: 18px;
}
.my-other-title {
color: red;
border-right: 0;
}
<h2>My title</h2>
<h2 class="my-other-title">My other title</h2>
Why does this even work? Because of CSS specificity:
Specificity determines, which CSS rule is applied by the browsers
Take your time learning more by reading this article
Remove the existing class for your heading if there is and use your own custom class instead of writing everything inline.
h1{
font-size:15px;
color:blue;
}
/* target your h1 element */
.custom-css{
font-size:25px;
color:red;
}
<h1>Heading with general css<h1>
<h1 class="custom-css">Heading with custom css</h1>
Although its not good to change the semantic of an HTML Element.
CSS - Default for h2 (from external css source)
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You want to override the default css through inline css. Try using below code for your h2.
<h2 style="border-right: 0px; padding: 0; margin: 0;"> Hello </h2>
You can also add a class to the h2 and call the class to your stylesheet if this style is applied to most of the h2 tags. Try to avoid inline css if possible, it may cause loading time.
<h2 style="color:white; font-size:80px"> My Cool Text </h2>
You have to write what you want to replace, for example, I changed color here.
I have some CSS for a Wordpress blog. I want paragraphs to indent, but blocks of code to align left to the margin. This is the code that I have---all of these elements appear with a <div class="postContent" tag, and Wordpress automatically wraps post text blocks in <p> tags.
First, I've set all paragraphs within the div tags to indent:
.postContent p {
font-size: 1.2em;
text-indent: 2.5em;
text-align: justify;
line-height: 1.6em;
margin: 1em;
}
Then, Wordpress sets aside the first paragraph as a .lead paragraph. I want that to indent, provided it's not code:
.postContent p.lead code {
margin: 0;
text-indent: 0;
}
That works just fine. However, all the other code paragraphs are still indenting, so I added this to the stylesheet:
.postContent p code {
text-indent: 0;
padding: 0;
padding-top: 2em;
padding-bottom: 2em;
}
No dice. The code blocks are still indenting according to the .postContent p rule.
Setting text-indent on a code element inside a p element does not affect the indentation of the p element. It does not affect anything, really, since text-indent applies to block containers only.
If the markup is <p><code>...</code></p> so that the p contains nothing but the code, you can add
.postContent p code { display: block; }
and then consider what to do with vertical spacing, which may be a bit excessive after the addition (namely margins of p plus padding of code).
It's really hard to say without seeing both the source for the html and the actual css code, but I'm guessing your styles are being overridden by a more specific style.
The best thing for you to do is install Firebug in Firefox (really, the best development tools for a browser, IMHO) and inspect the targeted elements. The inspector should display all the styles being applied to the element. The overridden styles will have a strikethrough it. If you see they are being overridden, make your styles more specific. Otherwise, if you don't see your style listed, then you're not correctly targeting it.
Hope that helps. Good luck.
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D
Ok, a really quick question - which is the best way out of these to apply css styles:
1 - Use lots of different classes that apply different parts of the style i.e. class='font-1 red-bkg border-1' etc etc.
Or
2 - Style up individual parts of the site seperately
What you should do for font for example is to apple it to body, same for background colour, font colour etc...
body{font: Verdana 38px; color: #000; background: #fff;}
Then for individual features (e.g. margins, padding, borders etc) they should be defined in a per-class way.
.classname {
margin: 0px 5px 10px 5px;
padding: 10px 5px 10px 6px;
}
It is better for maintainability and makes your HTML less messy.
I believe to justify shared classes you should have more than one property in it, otherwise you are not gaining anything from using CSS's modularity.
I.e. things like this are not good ideas:
.bold { font-weight: bold; }
Style up individual parts of the site seperately. The other solution would kind of screw the intention behind it - separating content from styling.
Seems like you will enjoy this read, I certainly did:
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
You should name logically classes, because when you change your layout and currently you have style like
.bold .5px-brd .red.bg
then changing this to another colour and style will include grep'ing through entire application code in order to correct css styles.
As you may notice approach like
.bold .5px-brd .red.bg
it's good, and don't go with philosophy of CSS.
Classes with name like
.bold
should be used as auxiliary style. Never as basic construction block.
http://jsfiddle.net/sheriffderek/RMfEn/
html
<section class='container blocks'>
<h2>Blocks of content</h2>
<div class='block highlight-theme'>
<p>None of the styling should be done in the html.</p>
</div>
<div class='block base-theme'>
<p>You can use modular classes to style common pieces of the layout and then modify them with more specific classes.</p>
</div>
<div class='block contrast-theme'>
<p>So the stuff in this box could be a dark-theme with .contrast-theme or something</p>
</div>
</section>
css
.container, .block { /* structural elements */
width: 100%;
float; left;
padding: .5rem;
overflow: hidden; /* use a clear-fix instead */
}
/* mini themes /// mix and match */
.base-theme {
background: lightgray;
color: black;
}
.highlight-theme {
background: yellow;
color: red;
}
.contrast-theme {
background: gray;
color: white;
}