HTML - CSS (Cascading Style Sheets)

HTML | CSS (Cascading Style Sheets)

Defining Styles
1. External declaration
2. Internal declaration
Selectors
The margin, border, and/or padding properties

Defining Styles
1. External declaration
  <head> <link rel="stylesheet" type="text/css" href="mtitek.style.3.css" /> </head>
  The file "mtitek.style.3.css" may contain some declarations like the following:
  body { margin: 0px 5px 0px 5px; padding: 0px 5px 0px 5px; font-family: Verdana, Arial, sans-serif; font-size: 14px; font-weight: normal; }
2. Internal declaration
  <head> <style type="text/css"> #container a:link, #container a:visited { color: #607080; text-decoration: underline; } </style> </head>
Selectors
The selectors are patterns that allow the browser to match page elements with their corresponding styles.
1. Matching elements by type
  The following style:
  p { padding: 0px; }
  Refers to the "p" elements:
  <p>CONTENT</p>
2. Matching elements by class
  - The following style:
    p.class1 { padding: 0px; }
    Refers to the "p" elements whose value of the "class" attribute is "class1":
    <p class="class1">CONTENT</p>
  - The following style:
    .class2 { padding: 0px; }
    Refers to all elements whose value of the "class" attribute is "class2":
    <p class="class2">CONTENT</p> <h class="class2">CONTENT</h>
3. Matching elements by identifier
  The following style:
  #id1 { padding: 0px; }
  Refers to all elements whose value of the "id" attribute is "id1":
  <p id="id1">CONTENT</p>
4. Matching elements by the universal selector
  The following style:
  * { padding: 0px; }
  Refers to all elements:
  <p>CONTENT</p> <h1>CONTENT</h1>
The margin, border, and/or padding properties
HTML elements in a page are contained within a box which can have the padding, border, and/or margin properties.
- The border define the border-with, border-style, and border-color properties of the element's box.
- The padding properties define the space between the element's contents and its border.
- The margin properties define the space between the element's box and the enclosed element box.
+--------------------------------------+ | | | +-------+ | | |CONTENT| | | +-------+ | | | +--------------------------------------+ <------>.<-----------> margin | padding | |-> border
1. Padding style
  You can use padding-top, padding-right, padding-bottom, and/or padding-left to define specific values for each side.
  #paddingEx1 { padding-top: 0px; padding-right: auto; padding-bottom: 0px; padding-left: auto; }
  <div id="paddingEx1">CONTENT</div>
  You can use padding shortcut if you want to define values for all sides; its effect is determined by the number of values provided.
  The padding shortcut define the padding values for all sides in the following order: top, right, bottom, left.
  - One value:
    The padding-top, padding-right, padding-bottom, and padding-left are set to this value.
    #paddingEx2 { padding: 0px; }
  - Two values:
    The padding-top and padding-bottom are set to the 1st value.
    The padding-right and padding-left are set to the 2nd value.
    #paddingEx3 { padding: 0px auto; }
  - Three values:
    The padding-top is set to the 1st value.
    The padding-right and padding-left are set to the 2nd value.
    The padding-bottom is set to the 3rd value.
    #paddingEx4 { padding: 0px auto 0px; }
  - Four values:
    The padding-top is set to the 1st value.
    The padding-right is set to the 2nd value.
    The padding-bottom is set to the 3rd value.
    The padding-left is set to the 4th value.
    #paddingEx5 { padding: 0px auto 0px auto; }
2. Border style : width, style, and color
  - Border width
    You can use border-top-width, border-right-width, border-bottom-width, and/or border-left-width to define specific values for each side.
    #borderWidthEx1 { border-top-width: 0px; border-right-width: auto; border-bottom-width: 0px; border-left-width: auto; }
    You can use border-width shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
    #borderWidthEx2 { border-width: 0px auto 0px auto; }
  - Border style (possible values: none, dotted, dashed, solid, double, groove, ridge, inset, outset)
    You can use border-top-style, border-right-style, border-bottom-style, and/or border-left-style to define specific values for each side.
    #borderStyleEx1 { border-top-style: solid; border-right-style: dashed; border-bottom-style: double; border-left-style: inset; }
    You can use border-style shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
    #borderStyleEx2 { border-style: solid dashed double inset; }
  - Border color
    You can use border-top-color, border-right-color, border-bottom-color, and/or border-left-color to define specific values for each side.
    #borderColorEx1 { border-top-color: #ff0000; border-right-color: #ff0000; border-bottom-color: #ff0000; border-left-color: #ff0000; }
    You can use border-color shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
    #borderColorEx2 { border-color: #ff0000 #ff0000 #ff0000 #ff0000; }
  - Border shortcut
    You can use border shortcut if you want to define specific values for each side for the border-width, border-style, and border-color.
    #borderEx1 { border-width: 0px; border-style: solid; border-color: #ff0000; }
    The shortcut has the following syntax: border: < border-width> <border-style> <border-color>;
    #borderEx2 { border: 0px solid #ff0000; }
3. Margin style
  You can use margin-top, margin-right, margin-bottom, and/or margin-left to define specific values for each side.
  #marginEx1 { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; }
  You can use margin shortcut if you want to define values for all sides; its effect is determined by the number of values provided (see padding shortcut).
  #marginEx2 { margin: 0px auto 0px auto; }