Jumat, 26 September 2014

Cascading Style Sheet

16-September-2014

In this meeting we learn about something that make a web more beautiful and I really interest in it, do you know? yaaap, CSS - Cascading Style Sheet.

A set of style rules is called STYLE SHEET, style rules are composed of 2 parts.

  • Selector
  • Declaration
Declaration is contain PROPERTY and VALUE. 
example :

h1 { color : red ; }
  • h1 = Selector
  • { color : red ; } = Declaration
  • color = Property
  • red = Value
There are three ways to combining CSS in the HTML
  • Inline Style
If we do the CSS in the HTM using this style, the place of the style is inside the tag < >
example :
<h1 style="color:red">Text</h1>This method will work to the tag that has the style in it only.You should put all style in every tag if you want to give style to another tag.
  • Internal Style
In this method the placement of the style is inside the <head> section of HTML and should be put in every HTML that you make.
example :
<head>
          <style>
           p{
              font-weight:bold;

          }
         </style>
</head>
The method only effect the HTML that puted the style.
  • External Style
This is the best method of combining CSS and HTML, because it's more clear and more effective. The placement of the CSS is outside the HTML. In the HTML, you should put this code inside the <head> section.
        <meta charset="UTF-8">
<title>External</title>
<link rel="stylesheet" href="css/style.css" type="text/css">

If you have lot of declaration in one selector, you can combining all in this way :
h2 {
color: #626262;
font: 19px/24px "Times New Roman", Times, serif;
letter-spacing: 2px;
margin: 0;
text-transform: uppercase;
}
This will be more efficient.

One more, this is a universal selector 

div*(font-family:serif;}

It mean, all member of <div> will be form like that.

Using ID attribute selector
this ID only declared once in the HTML. For grouping the a section such as HEADER, SIDEBAR, MAIN, FOOTER.
Different with CLASS attribute, it could declared many times with different name.

In the CSS, ID showed with '#' and CLASS showed with '.' (dot)

LINK

there's two type of link 
  • Partial URL
this url will guide you to the selected file
"images/home.jpg"
  • Complete URL
this url shows the complete name of the url using http
"https://www.blogger.com"

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More