Default Css Properties

Shevy | 2:11 PM | , |
Your Ad Here

Without CSS, a page is bare but still, something of modesty it is because browsers down a set of default properties that will be applied unless the change. Have some differences depending on whether a browser or the other but, in general, are precisely those properties non-identified, that cause us problems because we do not usually taken into account.

The body of a page is where they are defined by default some of these properties is more or less known than the bottom (background) of a page is white and the color of the text (color) is black but has some more than likely to interfere For example, the margin (margin):

body {
background: # FFF url () repeat top left;
color: # 000;
font-family: Times New Roman;
font-size: 16px;
margin: 8px;
}

The links also have default properties, are blue and is underlined. All title tags are in bold fonts (font-weight: bold) and also a size that is related to the size of the font defined in the body. To make matters worse, it also has limits:
h1 font-size: 2em; margin: 21px 0;
h2 font-size: 1.5em; margin: 19px 0;
h3 font-size: 1.2em; margin: 19px 0;
h4 font-size: 1em; margin: 21px 0;
h5 font-size: .8 em; margin: 21px 0;
h6 font-size: .7 em; margin: 26px 0;

Or DIV or SPAN tags have default properties but if P is labeled, this has a top and bottom margin equal to the size of the default font (margin: 1em 0).

More labels with pre-defined properties:
blockquote margin: 16px 40px;
pre font-family: monospace; margin: 16px 0;

Images that act as links have a border of color like the color of links (border: 2px solid # 0000EE) .

Probably labels cause more conflicts are lists as both OL and UL have several properties, including margins and separations:
ol margin: 16px 0; padding-left: 40px; list-style-position: outside; list-style-type: decimal;
ul margin: 16px 0; padding-left: 40px; list-style-position: outside; list-style-type: disc;

Usually we read that to avoid all these properties do not bother us, it is best to "reset", ie to the beginning of our staff, some definitions to "clean" stuff. There are dozens of examples that can be found but for normal use, do not need much, just add a few right at the beginning of our staff within <style> </ style> or <b:skin> < / b: skin>..
* {Margin: 0; padding: 0;}

html, body {height: 100%;}
body {height: 100%;}

a, a: visited, a: link, a: active {outline: none; text-decoration: none;}
a: hover {outline: none; text-decoration: none;}
a img {border: none; outline: none; text-decoration: none;}

object, embed {outline: none;}

ol, ul, li {list-style: none;}

Of course, this must be case by case and that it is possible that some of the default properties are useful and we therefore take them out but we are not interested, it's always good to know that there are and where we started a new site, it is best to remove them all and take the trouble to define them one by one.

Read More - Default Css Properties

Share This Article

CSS simplify complicate optimize

Shevy | 2:04 PM | , |
Your Ad Here

Who does not want to optimize optimize things? It is obvious that something is always better to work best to work on a mediocre but on the web, we often read too much advice and beyond the good intentions of those who propose them, not all are applicable and even, some are arguable. Fortunately, as elsewhere, there is always more than one opinion and more of a solution and when it comes to tools, there is no perfect or used it for all so using common sense is always the best option although it is known that that is the least common of the senses. 

There are many sites that talk about compressing the CSS and there are even sites like CleanCSS offering automatic but these things do have to be used carefully, very carefully. 

An article by Impressive Webs titled something like "Give him some space to CSS to breathe" and an analysis of these things, reviewing alternatives and showing what is good and what is bad. It is obvious that these conclusions are subjective (like all) but we can read, think and then decide. 

There is something I think is basic, from the point of view of loading time, with few exceptions, compress the CSS does not matter and those just starting out can transform the code into an unmanageable mess that scares and preventing progress, the result will not be nothing but a bunch of characters difficult to digest and difficult to edit:

body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px ; padding: 0; text-align: center}. clear {clear: both; line-height: 0; height: 0} # navbar-iframe {height: 0; visibility: hidden; display: none} a, a: visited , a: link {color: # AAA; outline: none; text-decoration: underline} a: hover {color: # FFF; outline: none} a img {border: none; outline: none; text-decoration: none} object {outline: none} h1, h2, h3, h4, h5, h6 {font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif; margin: 10px 0}

Each must choose the form that is most convenient for writing and organizing things. Some might use spaces, adding tabs, who ordered the properties by type or alphabetically. Everything is acceptable and should not be limited because the key is to find what we want, we can edit it and make it work.

The aesthetics of the code is not relevant at all, what matters is that it is clear to ourselves and avoid common mistakes .

ALL Properties end with a semicolon, it is true that it is not necessary to add that character in the last property of a rule but, rather put it all to get used to avoid problems.

a {/ * this is an error * /
color: # AAA
outline: none
text-decoration: underline
}

a {/ * this is fine but the latter one has no semicolon * /
color: # AAA;
outline: none;
text-decoration: underline
}

a {/ * this is OK * /
color: # AAA;
outline: none;
text-decoration: underline;
}

When a property is made up of several words, there must be a space character between them, but do not need a space between the colon character and the first word:

div {/ * this is a mistake because between the closing parenthesis and the word no-repeat missing space * /
background: # AAA url () no-repeat top left;
}

div {/ * this is fine but no space between the colon and color * /
background: # AAA url () no-repeat top left;
}

div {/ * this is OK * /
background: # AAA url () no-repeat top left;
}

Within a label <style> NEVER add other tags, only style rules are added to their properties. The same goes for the tag <b:skin> Blogger. He never includes the comments:

div {/ * this is an error * /
<! - Comment comment comment>
background: # AAA url () no-repeat top left;
}

div {/ * this is OK * /
/ * Comment comment comment * /
background: # AAA url () no-repeat top left;
}

These days, CSS is essential, even more when it comes to dynamic pages as a blog and that is what allows us to simplify the way we write tickets. The editors give us tools for that and these tools are useful but at the same time are misleading so you have to use them wisely. It is true that we can format our text with a single click and ready, put the color of the paragraphs, font type, all great but ... What if you change your mind tomorrow?

There are many templates that change frequently, it is part of the fun, part of the game and when they do, often encontarrse with a problem: the entries are wrong, that color is not the color you want, this source does not is what one would use in this new design and perhaps wondering how do I? Later, lamentantablemente, if the styles have been added in the entries there is no other choice but to edit them one by one.

Is that the CSS is just to avoid that and we are using it wrong, what we do, whenever possible, is to establish general rules, the color, fonts, everything that we normally use and put those rules and properties default along with the other. If you do not want the links are underlined establish the rule for the whole site and eventually, when we want to highlight some of them, we indicate explicitly, that kind of detail will that we should not be repeating styles for each label.

Add inline styles, ie, with a style attribute within the tag must always be a last resort, never the first.

Read More - CSS simplify complicate optimize

Share This Article

Langganan: Postingan (Atom)