Day 6: Learn Basic CSS by Building a Cafe Menu

June 15, 2022

Today’s Progress

Learn Basic CSS by Building a Cafe Menu
- HTML5 declaration <!DOCTYPE html>
- Head Element <head>...</head>
- Title Element <title>...</title> useful for search engine
- Meta Element <meta charset="utf-8"> to tell browser how to encode characters for the page
- Body Element <body>...</body>
- Heading 1 Element <h1>...</h1>
- Paragraph Element <p>...</p>
- Header Element <header>...</header>
- Main Element <main>...</main>
- Section Element <section>...</section>
- Heading 2 Element <h2>...</h2>
- Style Element inside head element <style>...</style>
- Style Syntax
```
  element {
   property: value;
  }
```
- Property to center text text-align:center;
- Multiple Element Syntax
```
  selector1, selector2 {
    property: value;
  }
```
- Using style from separate file <link rel="stylesheet" type="text/css" href="styles.css">
- To make similar style on mobile, desktop and laptop add <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- Property to set background color to brown background-color:brown;
- Property to set background color to burlywood background-color:burlywood;
- Comment in CSS /* comment here */
- Property to set width to 300px width: 300px;
- Div Element <div>...</div>
- Set width 80% from page width: 80%;
- Center element with margin-left:auto; and margin-right:auto;
- Class Selector
```
  .class-name {
      styles
  }
```
- Assign class <div class="class-name">
- CSS Assign background image background-image: url(https://url/to/images.jpg);
- Article Element <article>...</article>
- CSS Text align to left text-align: left;
- CSS Text align to right text-align: right;
- CSS Selector combination.item p { }
- CSS Change Default Display display: inline-block;
- CSS Padding Left padding-left: 20px;
- CSS Padding Right padding-right: 20px;
- CSS Padding Top padding-top: 20px;
- CSS Padding Bottom padding-bottom: 20px;
- CSS Padding padding: 20px;
- CSS Max width to put constraint on larger device max-width:500px;
- CSS Use another type of font font-family:sans-serif;
- Fallback value, if the initial value not foundfont-family: Impact,serif;
- CSS Font Style font-style:italic;
- CSS Change default font-size - Typography font-size:40px;
- Footer Element <footer>...</footer>
- Anchor Element <a href="https://www.link.com" target="_blank">Text</a>
- Divider Element <hr/>
- CSS Change height height:3px;
- CSS Background Color background-color:brown;
- CSS Border Color border-color: brown;
- CSS Border Size border-size:1px
- CSS Margin Bottom margin-bottom:5px;
- CSS Margin Top `margin-top:25px
- CSS Comment /* Comment Here */
- CSS Text color `color:black;
- CSS state selector element:state{...}
- CSS state on link :hover, :visited, :active
- Image Element (self-closing tag) <img>
- CSS change element display display:block;
- CSS Negative margin margin-top:-25px;
Finished project Cafe Menu

Thoughts

CSS really makes website beautiful and good to look at. With HTML and CSS we already can make website.

Questions

Any web that share / show case only HTML and CSS design?