# More CSS

Different stylesheets produce different styles of your HTML page.
Here is a demo provided by W3School. Click to try it.

# CSS syntax

# Selectors

• element selector : use element name, like h1, p, span...
• id selector : set id="idname" in element, then use #idname to select it, id should be unique
• class selector : set class="clsname" in element, then use .clsname to select it

Example - HTML Part:

<div id="myid">
This block has id equal to <span>myid</span>.
</div>
<div class="course">
In this course, you will learn the following topics:
...
</div>    

Example - CSS Part:

span {
    background: #dddddd;
    color: red;
}
#myid {
    background: lightyellow;
    color: blue;
}
.course {
    background: lightgreen;
    color: black;
}

Result:

# Box model properties

For block-level elements (like div), you can set the following properties:

• width : Set the width of the content
• height : Set the height of the content
• padding : Set the padding properties
• border : Set the border properties
• margin : Set the margin properties

• For width and height, use px or ratio, like:
  height: 200px; or width: 80%.
• For padding, border and margin, use the following syntax:
  • keyword: top right bottom left to set 4 parameters, ex: padding: 12px 6px 8px 4px;
  • keyword: para to set 4 parameters (all equal to para), ex: padding: 12px;
  • keyword: para1 para2; to set 4 parameters, para1 will be set for top and bottom, para2 will be set for right and left, ex: margin: 12px 4px or margin: 12px auto. (set left and right to auto to align it to center)
  • keyword-direction: para to set a single parameter, ex: margin-top: 12px;
  • Border is usually set with other properties, ex: border: 2px solid green;

Example: