I'm trying to work on first paint time, and looking into how effective the browser is at making sense of CSS.
In terms of file size, I'm not overly concerned which one is smaller, but what gets processed quicker? Merging Selectors, or keeping them separate here is an example:
Code A:
a { font-family: serif; font-size: 16px; background:#fff; }
p { font-family: serif; color: #333; background:#fff; }
h2 { font-family: arial; color: #333; font-size: 16px; background:#fff; }
Code B:
a, p, h2 { background:#fff; }
a, p { font-family: serif; }
a, h2 { font-size: 16px; }
p, h2 { color: #333; }
h2 { font-family: arial; }
Code C:
I could split everything into single css styles, and use HTML.
background-fff { background:#fff; }
family-serif { font-family: serif; }
size-16 { font-size: 16px; }
color-333 { color: #333; }
<a class="background-fff family-serif size-16 color-333"></a>
Technically, it's the exact same output, the second is obviously smaller, however, does the browser render it quicker and process it?
The reason I ask is that if I look at my entire sites CSS and do the second option for every single thing that has margin: 0; for example, the selector list separated by commas would be enormous.
This means, for a link it would be pulling all the styles from various places. If I have 30 styles associated with a link the browser would be pulling each style from 30 different places in my sheet? so in my head, it seems this would be slower?
B is smaller, but is B processed quicker to process?
C seems a little silly.
Related
My code was all working correctly until I did a CSS3 validation which told me I needed to move the #import font code line to the first line in the css style file. When, I did that of course I realized the web fonts I had chosen had not been displaying, so I fixed all the sizes, etc. to best display the pages with the chosen fonts.
I can't seem to figure out this last quirk, though. The p a:link, a:visited color blue is not being picked up in the p tags, except for one place in the footnote area (footnote #6)! The other a links within p tags are picking the white color up from the insert-container p a styles. I understand that the last style overrides previous ones, but the selectors are different, so I'm not understanding why this is happening.
I've cleared the cache, tried different browsers, tried changing the colors on each of the a link styles, but if I change it to fix the paragraph text, then it ends up also changing the insert-container link styles.
You can see the issue on my CodePen at https://codepen.io/Ovimel/pen/XQjgeg and the CSS is shown below. Thanks!
CSS3
/*styling for paragraph text links */
p a {
font-weight: 900;
}
p a:link,
a:visited {
color: #194a76;
text-decoration: underline;
}
p a:hover,
a:active {
color: #194a76;
text-decoration: underline;
}
/* styling for colored page inserts from xopixel dot com */
#fullwidth-insert {
padding: 30px 0;
background: #7d654b;
text-align: center;
color: #fff;
font-family: "Carme", sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
.insert-container {
max-width: 85%;
width: 960px;
margin: 0 auto;
}
.insert-heading {
margin: 0;
font-size: 2rem;
font-weight: 300;
padding-bottom: 1rem;
letter-spacing: 0.08rem;
}
/* styling for full-width insert heading links */
.insert-heading a {
color: #fff;
font-family: "Days One", sans-serif;
font-weight: 300;
text-decoration: underline;
}
.insert-heading a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/* styling for full-width insert paragraph links */
.insert-container p a:link,
a:visited {
color: white;
font-weight: 700;
text-decoration: underline;
}
.insert-container p a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/*styling for footnotes*/
p.footnote {
font-size: 0.8em;
/*10 pt 13px */
}
Higher specificity will beat out order in the stylesheet. This selector:
.insert-container p a:link
has higher specificity than this one:
p a:link
You can see the selector is more specific as it targets links inside a p inside the .insert-container div. For more on the how it is calculated by the browser: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
On this page: https://www.nycofficesuites.com/new/offices/, I want to change the font size on red bar across the top (where it says "Office Space"). I've entered this code but it's not working.
.page-title h1 {
font-size: 35px !important;
}
Thanks!
If you can't update the existing rule, your new rule will need to appear after the existing rule as they are both marked as "!important".
The existing rule is showing in "custom.css":
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
In custom.css you have,
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
Either edit that file or add/load your overriding css after custom.css (order of load matters, the last one is considered).
Side note: Try to avoid using !important as much as you can.
If this is something you are just messing with you can declare it inline.
<h1 style="font-size: 35px !important;">Office Space</h1>
Or
.header {
font-size:35px;
font-weight:bold;
font-family: 'Pontano Sans', Arial, sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
<span class="header">Office Space</span>
Just figured this out, thanks for your help everyone. The person who wrote the theme put this in a file called custom.css.php. So this was overriding the place where I was entering CSS. (This is a Wordpress site.)
I have the following css that is used to make one link coloured but it applies to all of the links I have. Is there any way to stop this.
This is my css that is getting applied to the links:
a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #CCC;
text-decoration: none;
background-color: #C00;
display: block;
border-radius: 5px;
z-index:10;
}
This is the link that it is suppose to get applied to:
<td>Food</td>
This is the link that I don’t want it to get applied to:
<td class="footer"><b>Top Attractions</b>
You could select your a tag by the href like this:
JSFiddle - DEMO
a[href="Food.html"] {
color: red;
}
Updated: DEMO (with your codes)
Working JSfiddle: demo
I gave the link you wanted to style a class and gave the class a style.
a.food :visited
instead of a:visited
Try this
HTML
<td><a href="Food.html" class="colored>Food</a></td>
CSS
.colored{
color:red;
}
One thing you could do, would be to give the tag an id/class and then refer to that in your css.
You could add a class to the link you want different and style it separately.
HTML:
<td class="footer"><b>Top Attractions</b>
CSS:
a.rides {...}
Apply a class to the links you want to effect:
<a href='food.html' class='apply_to_this'>Food</a>
Then in your CSS:
a:link.apply_to_this{
// your styles
}
You can add a class to the links you wan't to apply this rule, or you can use this rule :
a:not(.footer):link {...}
Rather than stopping it being applied to one link, you need to add a class to that link with additional CSS that overrides the styles you want to change, or (though this is bad practice...) use inline styles on that one link.
Proper solution:
In your CSS
.exception {put css here that will override the general link css, using !important to override it ifnecessary}
In your html
Content here
Quick and dirty solution
Content
Though this way will work, it is rightly frowned upon for accessibility issues.
You can just create a class and apply it to that link like mentioned above or you can just follow through your selectors to tell CSS to apply that link code to only a:links within those selectors like I've posted below:
#mainContainer #footer #etc #etc a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
PS - Inline styles are very bad practice. It adds tons of extra code that will reduce your rankings for Google, Yahoo, MSN, etc. Not to mention it makes code harder to read and more clunky.
I have a list in my sidemenu, the settings don't seem to read past the css of the .body class in stylesheet -
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
}
li.develop
{
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
color:#fff;
}
My body class is -
body {
font-family: 'Arial', sans-serif;
font-size: 12px;
font-weight: normal;
}
The list then is defaulting to body class 12px, if I change body to 11px, the list is fine but I want to keep 12px for actual body of main content of copy on site.
I tried using !important but unsure that is correct?
Thanks
I think you may have .develop on ul not li, try putting your font rules on the ul.develop rule as they will apply to the li's underneath.
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
}
Put your 'body' related CSS above/ before the other styles. It reads it top down. Hope that works!
I have in my CSS:
body
{
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
color: #666666;
}
a:link
{
color: rgb(124,71,111);
text-decoration: underline;
}
a:visited
{
color: rgb(41, 12, 36);
}
a:hover
{
color: rgb(91,25,79);
text-decoration: none;
}
a:active
{
color: #AB6D9C;
}
the question is to the latter tag ".remove-linkcolor"
.remove-linkcolor
{
}
I would like the links to 'a' that is associated with the class '.remove-linkcolor' the following attributes are changed:
The color is the same color of normal text
How to avoid duplication of code and put the same color of another tag?
Remove effects of active, hover normally would, but to continue as a link, so if you click the User, the same is executed.
Not sure I understand your question 2. However, I think this is the answer you need:
The only way to remove duplication of code in CSS is through combined selectors, something like:
body {
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
}
body, .remove-linkcolor {
color: #666666;
}
But then you end up repeating the selector, often. The only other way is not to do CSS: use SASS or similar CSS compiler.