CSS Study Notes

CSS Study Notes

Taking notes in English is just for practicing my English ability. :-)

---

Content

• Style
• Class

---

• Use CSS Selectors to Style Elements

<style>
  SELECTOR {Attribute name: Attribute value;}
  h2 {color: red;}
</style>

Note:
1. There must be a “;” after the “Attribute value”.
2. There are a lot of attributes that can be set in each selector. The following table gives some attributes.

Attributes	Effect	Value
color	Setting the font’s color	e.g. red
width	Setting the image and others’ width	e.g. 500px
font-size	Setting the size of the font	e.g. 16px
font-family	Setting the font family	e.g. Monospace, Sans-serif
border-color	Setting the border color	e.g. green
border-width	Setting the border width	e.g. 10px
border-style	Setting the border style	solid
border-radius	Setting the border radius	e.g. 15px, 50%

---

• Use a CSS Class to Style an Element

<style>
  .blue-text {
    color: blue;
  }
</style>

There has a dot before the selector’s name, but when we use it, we don’t need the dot. Like this:

<h class="blue-text">Display Text</h>
<p class="blue-text">Display Text</p>

This can be used in multiple elements.

---

To be continued…