CSS Basics | Notion

CSS: Cascading Style Sheets. CSS is what gives every website its design.

Source: https://www.w3schools.com/css/css_intro.asp

h1{color:red; font-size:18px;}

Untitled

There are 3 ways to Insert CSS:

External CSS - this type of styling takes place within the <link> element, inside the <head> section of an HTML page.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>Hello everyone!</h1>

</body>
</html>

Internal CSS - this type of styling takes place within the <style> element, inside the head section.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: Red;
}

h1 {
  color: blue;
  margin-left: 20px;
}
</style>
</head>
<body>

<h1>Hello everyone!</h1>

</body>
</html>

Inline CSS - this type of styling is used to style a specific element.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:pink;text-align:right;">Hello everyone!</h1>

</body>
</html>

Avoid space between property and the value.

Priority list:

Inline CSS
Internal CSS
External CSS

How to add comment?