Introduction to CSS PDF

# Cascading Style Sheets ## What is CSS? - CSS is a simply designed language intended to simplify the process of making web pages presentable. - CSS allows you to control the layout of your HTML document. - CSS is a simple way to add style such as font, colors, spacing, etc. to a webpage. ## CSS v...

# Cascading Style Sheets ## What is CSS? - CSS is a simply designed language intended to simplify the process of making web pages presentable. - CSS allows you to control the layout of your HTML document. - CSS is a simple way to add style such as font, colors, spacing, etc. to a webpage. ## CSS vs HTML | HTML | CSS | |---|---| | Markup Language | Stylesheet Language | | Create the actual content | Responsible for the design or style | | Used to build the structure of the web page | Used to make the web page more presentable | | HTML codes can never be found in CSS files | CSS codes can be found in HTML files. | | Uses angle brackets < > | Uses curly braces { } | ## HTML vs CSS analogy - A diagram of a human skeleton (representing HTML) standing next to a man in clothes (representing HTML with CSS). - The skeleton is labeled "Structural Layer" and the man is labeled "Presentation Layer". - The man's clothes are labeled "Appearance" and "Look". - This analogy shows how CSS is used to add style and appearance to the basic structure of a webpage created by HTML. ## CSS vs HTML Analogy - 3 buildings, one with a plain exterior, one with brown brick, and the last with a white exterior. - An empty building frame (representing HTML) stands next to the three buildings (representing CSS). - This analogy shows how CSS is used to style and customize the look of a webpage based on the basic structure built by HTML. ## Web Development - HTML - for skeleton - CSS - for beauty - JavaScript - for interactivity ## Why CSS? - CSS saves time. - Easy maintenance. - Superior styles to HTML. - Links can be styled in different ways. ## Why CSS? - CSS solved a big problem - HTML was never intended to contain tags for formatting a webpage. - HTML was created to describe the content, for example: - `<h1>This is a heading</h1>` - `<p>This is a paragraph</p>` ## Why CSS? - When tags like `<font>` and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. - Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. - To solve the problem, the World Wide Web Consortium (W3C) created CSS. Style formatting was removed from HTML pages. ## CSS Styles Example - A diagram of a W3C logo in a circle with the word "CSS" above it. ## HTML Syntax - A diagram of an HTML element `<p align="left"> Welcome </p>` labeled with "Start Tag", "Attribute", "Value" and "Content", and "End Tag" - Explaining how the HTML element `<p>` with the attribute `align` and value `left`. ## CSS Syntax - A CSS structure consists of a selector and a declaration block. - An example of a CSS structure `p { color: green; }` labeled with "Selector", "Declaration", "Curly Brace", "Property", "Colon", "Value", and "Semi-colon". ## CSS Syntax - A CSS structure consists of a selector and a declaration block. - An example of a CSS structure `p { color: green; font-size: 12px; }` labeled with "Selector", "Declaration", and "Declaration". ## CSS Syntax - An example of a CSS structure `p { color: green; }` - The selector is an HTML tag in which a style will be applied. This could be any tag like `<h1>`, `<p>`, `<table>`, `<img>`, etc. - A property is a type of attribute of HTML. All the HTML attributes are converted into CSS properties. - Values are assigned to properties. For example, color property can have a value of either red or #F1F1F1, etc. ## How to add CSS - When a browser reads a stylesheet, it will format the HTML document according to the information in the stylesheet. ## Three ways to insert CSS - Inline Style Sheet - Internal Style Sheet (Embedded Style Sheet) - External Style Sheet ## Inline CSS - Inline CSS contains the CSS property in the body section attached with element. - This kind of style is specified within an HTML tag using the style attribute. ## Example of Inline CSS - Inline styles are defined within the "style" attribute of the relevant element. - `<!DOCTYPE html>` - `<html>` - `<body>` - `<h1 style="color:blue; text-align:center;">This is a heading</h1>` - `<p style="color:red;">This is a paragraph.</p>` - `</body>` - `</html>` ## Internal/Embedded CSS - It is generally used to style a single page. - The internal style is defined inside the `<style>` element, inside the head section. ## Example of Internal CSS - `<!DOCTYPE html>` - `<html>` - `<head>` - `<style>` - `body {` - `background-color: linen;` - `}` - `h1 {` - `color: maroon;` - `margin-left: 40px;` - `}` - `</style>` - `</head>` - `<body>` - `<h1>This is a heading</h1>` - `<p>This is a paragraph.</p>` - `</body>` - `</html>` ## External Css - With external CSS, you can change the look of an entire website by changing just one file. - We can write external CSS in a separate.css file. Each HTML page must include a reference to the external CSS file inside the `<link>` tag, inside the `<head>` tag. ## Example of External Css - `<link rel="stylesheet" type="text/css" href="mystyle.css">` - `<link rel="stylesheet" type="text/css" href="folder/mystyle.css">` ## Example of External CSS - External styles are defined within the `<link>` element, inside the `<head>` section of an HTML page. - `<!DOCTYPE html>` - `<html>` - `<head>` - `<link rel="stylesheet" type="text/css" href="mystyle.css">` - `</head>` - `<body>` - `<h1>This is a heading</h1>` - `<p>This is a paragraph.</p>` - `</body>` - `</html>` ## Example of External CSS - An external stylesheet can be written in any text editor and must be saved with a .css extension. - The external.css file should not contain any HTML tags. - Here is how the "mystle.css" file looks like: - `body {` - `background-color: lightblue;` - `}` - `h1 {` - `color: navy;` - `margin-left: 20px;` - `}` - Save as "mystyle.css" ## Properties of CSS - Inline CSS has the highest priority, then comes Internal/Embedded followed by the External CSS which has the least priority. - Multiple style sheets can be defined on one page. ## Difference between the 3 types of CSS Styles | Inline CSS | Internal CSS | External CSS | |---|---|---| | Inline CSS is used to style a specific HTML element. | Internal CSS is used to style a specific HTML page. | External CSS is used to change the look of an entire website by changing just one file. | | You can write inline CSS using the style attribute. | You can write Internal CSS using the `<style>` tag. |You can write External CSS in a .css file. | | It doesn't allow you to use any selectors. | It allows you to use selectors, for example, id, class, tag name, etc. | It also allows you to use selectors. | | It takes time to use as each element need to add. | It is also time-consuming, but in comparison to Inline CSS is less. | It saves time as you can use the same file on multiple pages for the same look. | ## Activity 1.1 - Set “background-color: linen” for the page, using an inline style. ## Activity 1.2 - Set “background-color: linen” for the page, using an internal style sheet. ## Activity 1.3 - Add an external style sheet with the URL: "act1.css". # Colors and Background ## Overview - CSS color names - RGB and HSL color values - Foreground and background colors - Tiling background images - More selectors and external style sheets ## Named Color Values - Specify foreground or background color using one of 140 predefined CSS3 color names: - `h1 { color: red; }` - `h2 { color: darkviolet; }` - `body { background-color: papayawhip; }` - [learningwebdesign.com/colornames.html](learningwebdesign.com/colornames.html) ## Numeric Color Values - For more control, define colors numerically using one of these color models: - RGB (combination of red, green, and blue light values) - RGBa (RGB plus alpha transparency) - HSL (hue, saturation, and luminosity) - HSLa (HSL plus alpha transparency) ## RGB Color - The RGB color model mixes color with red, green, and blue light. - Each channel can have 256 shades, for millions of color options. - A diagram of the RGB color model which shows the red, green, and blue spectrums blending together to create a color. - Example colors: - `RGB: 255, 255, 255` - white - `RGB: 128, 128, 128` - gray - `RGB: 0, 0, 0` - black - `RGB: 200, 178, 230` - pleasant lavender ## RGB Values in Style Rules - There are four formats for providing RGB color values: - RGB values (0 to 255): `rgb (200,178,230)` - Percentage values: `rgb(78%,70%,90%)` - Hexadecimal values: `#C8B2E6` - Condensed hexadecimal values (for double-digits only): `#F06` is the same as `#FF0066` ## RGBa Color - RGB + an alpha channel for transparency - The first three values are RGB. The fourth is the transparency level from 0 (transparent) to 1 (opaque). - A diagram showing different examples of how RGBa functions. The first is fully opaque, the second is 50% transparent, and the third is fully transparent. - `color: rgba(0, 0, 0, 1); (fully opaque)` - `color: rgba(0, 0, 0, .5); (50% transparent)` - `color: rgba(0, 0, 0, 1); (Fully transparent)` ## HSL and HSLa - Colors described by values for hue (°), saturation (%), and luminosity (%): - `hsl (180,50%,75%)` - Hue specifies the position on a color wheel (in degrees) that has red at 0°, green at 120°, and blue at 240°. - HSL is less commonly used than RGB, but some find it more intuitive. - HSLa adds an alpha value for transparency. ## Foreground Color - `color` - Values: Color value (named or numeric) - Example: `blockquote {border: 4px dashed; color: green;}` - The foreground of an element consists of its text and border (if one is specified). - A diagram of a paragraph with a green border which shows how `color` would be used to set the color of the text and border. ## Background Color - `background-color` - Values: Color value (named or numeric) - Example: `blockquote {border: 4px dashed; background-color: green;}` - The background painting area of an element fills the area behind the text to the outer edge of the border. - A diagram of a paragraph with a green background which shows how `background-color` would be used to set the color of the background. ## Background Position - `background-position` - Values: Length, percentage, left, center, right, top, bottom - Specifies the position of the origin image, the first image that is placed in the background from which tiling images extend. - Examples (horizontal position goes first): - `background-position: left bottom;` - `background-position: 300px 100px;` - `background-position: 25% 100%;` ## Background Repeating - `background-repeat` - Values: `repeat, no-repeat, repeat-x, repeat-y, space, round` - Specifies how the background image repeats and can restrict it to tiling in one direction or not at all: - `repeat-x`: Tiles horizontally only - `repeat-y`: Tiles vertically only - `space`: Adds space around images so they fit in the window with no clipping - `round`: Distorts the image so it fits without clipping ## Background Repeating (cont'd) - A diagram showing examples of 3 webpages tiled with an image using `no-repeat`, `repeat-x`, and `repeat-y`. ## Background Position - `background-position` - Values: Length, percentage, left, center, right, top, bottom - Specifies the position of the origin image, the first image that is placed in the background from which tiling images extend. - Examples (horizontal position goes first): - `background-position: left bottom;` - `background-position: 300px 100px;` - `background-position: 25% 100%;` ## Background Position (cont'd) - Diagrams showing 3 webpages with the same image in the background, but with different positions set using: - `background-position: left bottom` - `background-position: 300px 50px` - `background-position: 25% 100%`