More About CSS

I’ve previously discussed the css syntax on page https://imron02.wordpress.com/category/css/. But in here, I want to discuss or create a tutorial that I get in Office.
I’ve discussed previously on how css scripts calling/loaded on page https://imron02.wordpress.com/2013/02/26/sintaks-kode-css-2/. In the previous discussion, I explained how to call script css. Among others:

  1. Inline Css
  2. Header Style (Embed Style)
  3. Linked CSS

Aside from that, actually has a way of calling another css, ie with Import tag. Example code (learn.html):

<html>
<head>
	<title>Learning Css</title>
	<style type="text/css">
		@import url("css/external.css");
	</style>
</head>
<body>
	<div>Halo Saya menggunakan script Css..</div>
</body>
</html>

And the content of external.css is:

div {
	background-color: red; height: 40px;
}


And for the results, for sure will be the same with Linked tag. So why Developer create import tag if import tag same as linked tag?
For the answer, see this link http://www.os-templates.com/journal/cascading-style-sheets/using-at-import-to-call-your-css-files.
Now we want to try 4 ways to call css.
File import.css:

 div {
	background-color: blue; height: 40px;
}

File external.css:

div {
	background-color: red; height: 40px;
}

File learn.html:

And the question is which one will be used css scripts?
Result:

And it turns out that function and css used is by calling the inline css. Look at this picture:

Well take a look at the picture on file learn.html above, there is shown numerical order, according to the picture above this. Beginning with number 1 is loading files embed import.css → embed → external.css → inline.
So what if the file learn.html changed to something like this:

<html>
<head>
	<title>Learning Css</title>
	<style type="text/css">
		@import url("css/import.css");
		#embed {
			background-color: yellow;  height: 40px;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/external.css">
</head>
<body>
	<div id="embed">Halo Saya menggunakan script Css..</div>
</body>
</html>

For the result:

Well this is the Cascade is about the calling script css rules based on the layer. Why? Because the script above, the id attribute to a higher calling than just using HTML tags calling of a general nature, and should have ideally, every HTML tag dibolehnya it only has one name id, for each of the tag. If we knew in the database with the name of the Primary Key. The sequence itself starts from:

  1. Tag with attributes Name,
  2. Tagged with Class attributes,
  3. Tag with the id attribute,
  4. Tag with the attribute tag.
  5. And the laying sequence css script.

Note:
Put or call selector with a more specific way, then the selectors will be given the higher value will be a priority. Except if you still want to be forced to use the value! Importan. But !Important is so not the recommended. See the following example:


Look at the value of the property and selector #embed in streak and defeated by the selector and properties of additional values ​​given external.css !Important.
Method optimization css code in the browser in order not to burden his load:

  1. Should only use a simple selector and not using specific selector like this div › a › a › a. Because it will take a resource for the browser to do a check. So use it only for as needed.
  2. If you want to use a specific, then it is better to be like the only body › #embed.
  3. And do not use code asterisk (*) because it means giving value to all HTML tags to assign values
  4. And once again do not use the value !Important.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s