TechRoots - Web Development Lesson 2 Part 1

<!DOCTYPE html>

/* CSS */

// JavaScript

Lesson 6

Lesson on CSS

The breakdown of a Website:

Content

+ HTML: Materials needed to build Tim

+ CSS: Styling Tim

+JavaScript: Making Tim Interactive

= Great Website

Do we remember what CSS Stands for?

CSS is a "style sheet language" that lets you style the elements on your page.

*This means that it always has to be under the <style> tag of an html page or in a separate “.css” file

Let’s learn the format of CSS:

Basic Format:

selector {
    property: value;
    property: value;
}

Selector - Connects CSS to HTML

Property - A certain characteristic that we format

Value - How we change it/ what we change it to

Example:

body  {
    font-size: 25px;
    background-color: black;
}

Ways to embed CSS:

Internal VS. External CSS

Option 1: Internal CSS is CSS within the <style> </style> tags of a webpage

Option 2: External CSS is an external file (with exstension.css) that is created and embedded into the main HTML page

Option 1:

<style>
  h1 {
      color: blue;
      text-align: center;
      font-size:50px;
  }
</style>

Option 2:

You can code the CSS in a separate file which can be saved as “.css”, and then can be linked into the html document within the <head> tag.

Example:

Html Page:

<html>
<head>
  <link rel= “stylesheet” type=“text/css” href=“main.css”>
</head

CSS Page:

h1 {
    color: blue;
    text-align: center;
    font-size:50px;
}
h3 {
    color: red;
    text-align: right;
}
h2 {
    font-family: verdana;
    font-size: 20px;
    font-weight: bold;
}

What can we do with Css?

For Today let’s make this page with multiple CSS attributes

The Code for this project:

            
	 <!DOCTYPE html>
<html>
<head>
<style>
span.highlight {
    background-color: yellow;
}
h1 {
    color: blue;
    text-align: center;
    font-size:50px;
}
h3 {
    color: red;
    text-align: right;
}
h2 {
    font-family: verdana;
    font-size: 20px;
    font-weight: bold;
}
p {
    font-family: verdana;
    font-size: 20px;
    font-weight: bold;
    color: pink;
    font-size:40px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<h3>My First CSS Example</h3>
<h2><span class="highlight">This is a paragraph.</span></h2>
<p>This is a paragraph.</p>
</body>
</html>

Congrats!

You have learned the basics of coding in CSS. Next, we will learn different formats to make a webpage look unique!

*End of lesson 6*