{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Intro to CSS\n", "* [Reference](https://www.w3schools.com/css/css_intro.asp)\n", "\n", "![image.png](./img/01.png)\n", "\n", "## What is CSS?\n", "* `CSS` stands for Cascading Style Sheets\n", "* `CSS` describes how HTML elements are to be displayed on screen, paper, or in other media\n", "* `CSS` saves a lot of work. It can control the layout of multiple web pages all at once\n", "* External stylesheets are stored in `CSS` files\n", "\n", "* Sample to show different CSS" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## CSS Syntax\n", "\n", "![image.png](./img/02.png)\n", "\n", "* The `selector` points to the `HTML` element you want to style.\n", "* The `declaration block` contains one or more declarations separated by semicolons.\n", "* Each `declaration` includes a CSS property `name` and a `value`, separated by a colon.\n", "* Multiple `CSS declarations` are separated with semicolons, and `declaration blocks` are surrounded by curly braces.\n", "\n", "\n", " ```css\n", " p {\n", " color: red;\n", " text-align: center;\n", " }\n", " ```" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Insert CSS\n", "\n", "There are three ways of inserting a style sheet:\n", "\n", "* Inline CSS\n", "* Internal CSS\n", "* External CSS" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Inline CSS\n", "* An `inline style` may be used to apply a unique style for a single `element`.\n", "\n", "* To use `inline styles`, add the `style` attribute to the relevant `element`. \n", "\n", "* The `style` attribute can contain any CSS property.\n", "\n", "* Example\n", "\n", " ```html\n", " \n", " \n", " \n", "\n", "

This is a heading

\n", "

This is a paragraph.

\n", "\n", " \n", " \n", " ```" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Internal CSS\n", "\n", "* An `internal style sheet` may be used if one single HTML page has a unique `style`.\n", "\n", "* The internal style is defined inside the `\n", " \n", " \n", "\n", "

This is a heading

\n", "

This is a paragraph.

\n", "\n", " \n", " \n", " ```" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### External CSS\n", "\n", "* With an `external style sheet`, you can change the look of an entire website by changing just one file!\n", "\n", "* Each HTML page must include a reference to the `external style sheet` file inside the `` element, inside the `head` section.\n", "\n", "* Example\n", "\n", " ```html\n", " \n", " \n", " \n", " \n", " \n", " \n", "\n", "

This is a heading

\n", "

This is a paragraph.

\n", "\n", " \n", " \n", " ```" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Cascading Order\n", "\n", "What `style` will be used when there is more than one style specified for an HTML element?\n", "\n", "* All the styles in a page will \"cascade\" into a new \"virtual\" style sheet by the following rules, where number one has the highest priority:\n", " 1. `Inline style` (inside an HTML element)\n", " 2. `External` and `internal` style sheets (in the head section)\n", " 3. Browser default" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## CSS Comments\n", "\n", "* `Comments` are used to explain the code, and may help when you edit the source code at a later date.\n", "\n", "* `Comments` are ignored by browsers.\n", "\n", "* A CSS comment is placed inside the `