Episode #2 | Cascading Style Sheets (CSS)


Monday, 03 Sep 2018 Kudzai Nyandoro 11:40 Minutes

Description:

This is a brief introduction to Cascading Style Sheets (CSS). While HTML provides structure to web pages, CSS provides the color, look and feel.

Notes:

Embedded CSS Example
<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
        color: blue;
        font-style: italic;
    }
  </style> 
</head>
<body>
  <p>CSS makes web pages beautiful!</p>
</body>
</html>
Inline CSS Example
<p style="color: green">Hello world!.</p>
HTML with an externally linked CSS file.

The example below shows an HTML file with an externally linked CSS Style Sheet
In order to achive this, you need to include a <link> element in your HTML <head> * tag as show below.*

href Stands for hypertext reference

rel Stands for relationship

type Indicates the styling language

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="styles/style.css" rel="stylesheet" type="text/css">
  <title>Kode47</title>
</head>
<body>
    <h1>My Home Page</h1>
        <p>This is my first paragraph</p>
</body>
</html>
CSS Style Sheet
//style.css
 p {
     color: blue;
}
h1 {

}
p {
   background: blue;
   font-size: 24px;
}
Single line css comment
/*This is a single line comment*/
Multi line CSS comment
/*
  This is a 
  multiple line
  comment
*/

Source: Mozilla Developer Network MDN CSS Tutorial | More on Style