css basics.md

css syntax

selector {
  property: value;
}

h2 element

<style>
  h2 {
    background-color: green;
  }
</style>

<h2>Hello</h2>

same style for multiple elememts

<style>
  h2, h3 {
    background-color: green;
  }
</style>

<h2>Hello</h2>
<h3>Hello</h3>

parent then child element

<style>
  ul li {
    background-color: green;
  }
</style>

<ul>
  <li>Hello</li>
</ul>

class attribute

<style>
  .heading {
    background-color: green;
  }
</style>

<h1 class="heading">Hi</h1>

id attribute

<style>
    #item {
      color: red;
   }
</style>

<h1 id="item">Hello</h1>

other attributes

<style>
    input[type="email"] {
      color: blue;
    }
</style>

<input type="email"

css combinators

descendant (space)

<style>
section p {
  color: red;
  }
</style>

  <section>
-->    <p>hello</p>
    <div>
-->      <p>world</p>
    </div>
-->    <p>hello</p>

child (>)

<style>
section > p {
  color: red;
  }
</style>

  <section>
-->    <p>hello</p>
    <div>
      <p>world</p>
    </div>
-->    <p>hello</p>
  </section>

adjacent sibling (+)

<style>
  h1 + p {
    color: red;
  }
</style>

  <section>
    <h1>hi</h1>
-->    <p>hello</p>
    <div>
      <p>world</p>
    </div>
    <p>hello</p>
  </section>

general sibling (~)

<style>
  h1 ~ p {
    color: red;
  }
</style>

  <section>
    <p>world</p>
    <h1>hi</h1>
-->    <p>hello</p>
    <div>
      <p>world</p>
    </div>
-->    <p>hello</p>
  </section>

Box model

+----------------------------------+
|   margin                         | 
|   +--------------------------+   |
|   |   border                 |   |
|   |   +------------------+   |   |
|   |   |   padding        |   |   |
|   |   |   +----------+   |   |   |
|   |   |   | content  |   |   |   |
|   |   |   +----------+   |   |   |
|   |   |                  |   |   |
|   |   +------------------+   |   |
|   |                          |   |
|   +--------------------------+   |
|                                  |
+----------------------------------+

• margin is outside element
• margin and padding are transparent
• content will be text or images
• border can be filled or left invisible

padding

<style>
  h1 {
    padding: 30px 50px 70px 40px;
  }
</style>

+----------------------+
|         30           |
|     +----------+     |
| 40  | content  | 50  |
|     +----------+     |
|         70           |
+----------------------+ 

<style>
  h1 {
    padding: 30px 60px;
  }
</style>

+----------------------+
|         30           |
|     +----------+     |
| 60  | content  | 60  |
|     +----------+     |
|         30           |
+----------------------+ 

<style>
  h1 {
    padding: 30px;
  }
</style>

+----------------------+
|         30           |
|     +----------+     |
| 30  | content  | 30  |
|     +----------+     |
|         30           |
+----------------------+ 

pseudo classes

• define special state of an element
• syntax -> h1:hover

pseudo elements

• define style for specific part of an element
• syntax -> h1::after