CSS Introduction
10:07 AM
CSS means Cascading Style Sheet. CSS is list of syntax that useful to create website page style. You can modify your page with CSS. Today i want to share a litte bit about CSS.
CSS Comments
CSS have a comment that can help you give description of the code. Comment will not appear in web, you can only see it in the code. See the example below
ID Selector use to give unique style from html tag. Unique there means different from other, so id selector can use only once in a web page. If you using selector id more than onec in a web page, the selector will use on toppest tag.
Example selector ID in CSS:
Class Selector
Use for choose style of element group. It's different from ID, you can use it more than once in one page. This selector use dot (.) for identify. See the example below:
How To Add CSS Into Page
There is 3 ways to add css into a page. I prefer to use external css if you're not using blogger engine.
External Stylesheet, is a stylesheet that you save in *.css filetype. You don't put css syntax into webpage. You just save the code in *.css filetype. If you use external css, you can change all pages with editing this file. So you don't need to change on every post. To use this stylesheet, you need to write the code below in your page:
Internal Stylesheet, different with external, because this way you need to write into html page. This style use if you want change one or more page different with global site. You need to define with
<
Background CSS
Property background use for define background in a element. There is some background properties.
Background Color, use for change backgrodun color. You will use hexacolor for this properties. The example:
Background repeat, use for set how to image appear. Is repeat in X or Y? Or just applied once. The default, background image will repeat untill fill the page. We can insert background image repeat on Y axis with this code
Please let me know if you found something wrong with my article. I found many usefull CSS code if you want to use it. Sorry for my bad english.
CSS Syntax
CSS different from HTML. You need HTML to see what CSS change on web visualization, because without HTML, CSS is nothing. CSS have two parts, they are selector and declaration.
CSS Comments
CSS have a comment that can help you give description of the code. Comment will not appear in web, you can only see it in the code. See the example below
/*menggunakan komentar pada css*/
ID Selector ID Selector use to give unique style from html tag. Unique there means different from other, so id selector can use only once in a web page. If you using selector id more than onec in a web page, the selector will use on toppest tag.
Example selector ID in CSS:
#selector{
text-align: center;
color: red;
}
There is example of how to using id tag<p id="selector">Hello World, i am using CSS </p>ID use hastag (#) for identify. Never use number in front of id name. Because number tag not recognized by Mozilla Firefox.
Class Selector
Use for choose style of element group. It's different from ID, you can use it more than once in one page. This selector use dot (.) for identify. See the example below:
.comment{
text-align:left;
color: red;
}
Implementation example.If you want to class only applied on paragraph, and dont affect with div, you need to write css like this
<p class="comment">paragraph komentar</p>atau<div class="comment">bagian komentar</div>
p.comment {text-align:center;}
That code will only use by this tag <p style="comment">How To Add CSS Into Page
There is 3 ways to add css into a page. I prefer to use external css if you're not using blogger engine.
External Stylesheet, is a stylesheet that you save in *.css filetype. You don't put css syntax into webpage. You just save the code in *.css filetype. If you use external css, you can change all pages with editing this file. So you don't need to change on every post. To use this stylesheet, you need to write the code below in your page:
<link rel="stylesheet" type="text/css" href="filecssurl.css">
This code prefer to place in head section. In css file, you can't using html tag in css file.Internal Stylesheet, different with external, because this way you need to write into html page. This style use if you want change one or more page different with global site. You need to define with
style tag and prefer to place into head tag<Inline Stylesheet, use for change in a element. This way rarely use by web developer. There is the code how to use this stylesheet.style type="text/css">
hr{color: sienna;}
p{margin-left: 20px;}
body{background-image:url("images/xxx.png");}
</style>
<
body style="color:blue; margin-left:20px"> inline stylesheet</body>External stylesheet have global influence, dan Internal stylesheet in spesific area. Then inline stylesheet have more spesific area, so if you have 2 styesheet for one element, for example global and inline p (paragraph) style. Your browser will use inline stylesheet to display in your page.
Background CSS
Property background use for define background in a element. There is some background properties.
Background Color, use for change backgrodun color. You will use hexacolor for this properties. The example:
Background Image, use for define image as backgrodun. The exampleh1{background-color:#6699ff;}p{background-color:#FFFFFF;}div{background-color:#6d6d6d;}
url is file of image/body{background-image:url('bgimg.png');}
Background repeat, use for set how to image appear. Is repeat in X or Y? Or just applied once. The default, background image will repeat untill fill the page. We can insert background image repeat on Y axis with this code
If you don't want repeat it, just changebody{
background-image:url('bgimg.png');
background-repeat:repeat-y
}
repeat-y to no-repeat.Download CSS Code Collection
0 comments