When I test this
http://www.andrewsellick.com/examples/sliding-side-bar/#
results are buggy and not the same.
Don't both based on the same standard ?
Every browser has it's own default styles.
You should un-apply the browser defaults with a "reset" stylesheet (here is mine):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ul { list-style-type: none; }
ol { list-style-type: decimal; }
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
html, body { line-height: 1; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }
* { font-family: Verdana, "Trebuchet MS", sans-serif;
font-size: 13px; color: #666;
text-decoration: none; white-space: normal;
vertical-align: baseline; }
input[text="submit"], button { color: #000; }
HTML and CSS are rendered by each browser how they think it is better, based on some conditions. This can be done without violating the standard.
Think about it like two people reading a common text: their voices differ even if they both are reading it correctly.
That said, if you told us more in detail what you would expect to see, we would be able to actually help you.
You can also use YUI to reset default browser css: http://developer.yahoo.com/yui/reset/
That said, even resetters don't always work, but you can try them out. They'll certainly ease the pain to some degree.
Related
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.
I'm trying to create something like a native styling rule for the interactive html elements I use, therefor I'm using a type-selector, which if exchanged with the class-selector makes no visible difference at all - as far as I and the dev-tools can tell. I'm using the initial property to reset my custom to the browser's native styling. BUT whatever I try - it won't work out. My concern is that I'm doing something just slightly wrong, but I just can't tell. Please help me out! Thanks in advance!
I've posted an example of all my code I use so far below to make following along easier.
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 1rem;
}
ul a, ol a {
text-decoration: none !important;
}
a {
color: #2196f3;
background-color: transparent;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a[type="nativeStyling"] {
color: initial;
background-color: initial;
text-decoration: initial;
}
a[type="nativeStyling"]:hover {
text-decoration: initial;
}
I'm an anchor tag
The initial value is applying to your a element just fine, the problem is that it doesn't do what you think it does. It resets the value to the initial value for that property (which, in this case, is black).
This is not the same as the default value for that property plus the effects of the browser's default stylesheet.
You might want the revert value, but that is currently only supported by Firefox and Safari.
a { display: block; color: pink }
.i { color: initial; }
.r { color: revert; }
<a class="i" href="http://example.com/">One</a>
<a class="r" href="http://example.com/">Two</a>
<a class="x" href="http://example.com/">Three</a>
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 want to show "Sentiment analysis" such that S should be much larger then h5 text.
What's wrong with follwing code:
HTML:
<h1>S</h1> <h5>entiment Analysis</h5>
CSS:
h1 {
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
}
h5 {
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
}
Live code in CodePan
That's a messy code. If you just want to make the first letter Bigger, You can try the following.
Working Demo
HTML
<div>Sentiment analysis</div>
CSS
div:first-letter {
font-size:30px;
font-weight:bold;
}
You are trying to align 2 block level elements in the same line, so either you need to make them inline or inline-block by using display: inline; or display: inline-block(recommended) or use <span> element inside your h1 like
<h1><span>H</span>ello</h1>
And than you can target the H using
h1 > span {
font-size: 54px;
}
If you are looking to target only the first letter, it is better, if you use :first-letter pseudo, which will save you an element as well.
Demo
Note: I am using general element selectors here, make sure you use a
class or an id to target the element uniquely.
Use this css rules for proper follow the css rules to render the requirement!
<style>
h1:first-line {
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
font-size:1em;
text-decoration:underline;
white-space: pre;
display:inline;
}
h1:first-letter{
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
font-size:2em;
text-decoration:underline;
white-space: pre;
display:inline;
}
</style>
<h1>Hello</h1>
<h1>World</h1>
h1:first-letter {
font-size: 60px;
}
demo
<style type="text/css">
.style1
{
font-size: 36px;
}
</style>
</head>
<body>
<p>
<span class="style1">S</span>entiment</p>
</body>
Add display:inline to both h1 & h5, Then remove margin-left from h5
DEMO HERE >>
Try this
h1
{
margin-left: 36%;
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
display:inline;
}
h5
{
color:#C0C0C0;
font-family: "calibri";
text-decoration:underline;
white-space: pre;
display:inline;
}
Your way to implement this seems little complex, even if you want to go with your code you can use my answer, otherwise select any of the simple method in other answers here.
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.