<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i>
works
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px;
}
doesnt work
I've never had this issue before. Any idea?
Yes, I do have the font-awesome css correctly linked.
I believe the font-size is already defined for the icons in the font-awesome.css file. Adding the style tag to the html code overrides these predefined classes. Try typing !important after defining font-size in the css to explicitly override. For example:
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px !important;
}
Like #developernator stated, you can also use the predefined classes. However, I find that most of the time the right size falls between the sizes of these classes.
The class uses first inline css then internal css and then external css
Your font awesome might have already given inline css either remove inline css or
do-
font-size: 50px !important;
Related
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 want to edit an HTML page which uses bootstarp.css. The line containing
<input type="submit" class="btn btn-primary btn-block btn-md" value="Create">
refers to
.btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 24px;
line-height: 20px;
..
}
in bootstrap.css. However, as I change the font-size, I don't see any change in the browser after refresh. What is the issue then?
You should not modify or in any way make changes to Bootstrap's default CSS-file, as you can pretty easily mess things up AND you're off with a lot easier practice if you do your own CSS-file and use it to overwrite those defaults.
What this basically means is that you make a myown.css file and include it AFTER the Bootstrap's CSS.
You can then easily overwrite the styles set in default with your own, without the need for any !important stuff that is absolutely not recommended when you're working around with a framework.
Modifying any library files is not a good practice. So you better make a duplicate of the same styles and put in your local styles files. You can use !important with styles to make sure the overriding of the styles in bootstrap.css
.btn {
font-size: 24px !important;
}
i'm relatively new with this stuff, but i can't seem to figure out why the size isn't formatting?
CODEPEN: https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 4rem;
font-weight: 200;
text-align: center;
}
It's because you have written the link tag inside the HTML section of the codepen.
To add any external css make use of GearIcon on the CSS Section and add the links there. Doing so, make the libraries get added on top of the webpage and your css written in the CSS section can override those styles.
Just as Josan already commented: There is a rule for ".jumbotron p" in bootstrap CSS defining "font-size". To make your CSS override that, link your external style sheet after bootstrap.
Been looking at a premium theme and see that for various text and elements on the page, when inspected - many have inherit and 0 for the values.
Why would these not be left blank if they are not required and automatically inherited from the parent? Does it perhaps save on load time?
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
This is done to override browser defaults.
Most browsers themselves apply their own style declarations to make basic HTML pages look prettier. Unfortunately these style declarations often clash with how a designer wants a web page to look. The way to overcome this is to reset the styles to what they should be by default.
Example
A good example of this is with heading and p tags. Take the following example:
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Without any custom styling applied, these elements use styles provided by the browser. One of the styles used here is margin, and that's what's putting the large gaps between each element.
We can reset these ourselves by setting the margin to 0:
* {
margin: 0;
}
<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>
Because of the need to reset such styles public stylesheets like Normalize.css exist, whose intention is to do nothing more than reset (and normalize) all elements to look the same across different browsers.
Is there a way to apply a font style or any other style to an element inside CSS?
For instance
You defined a certain font style
.impact {
font-family: "Impact";
letter-spacing: 16px;
line-height: 72%;
}
Now apply this style to an element inside css:
#certainElement {
font-family: Impact (the one we defined)
width: 400px;
}
Unfortunately, CSS does not support this kind of composition. However, you can use SASS or LESS to get similar behavior.
Is there any reason that defining a class on your element with id certainElement isn't desirable?
<div id="certainElement" class="impact"></div>