Introduction to CSS Coding Ron Charest Charest Consulting

Objectives This presentation provides an introduction to Cascading Style Sheets (CSS) coding for webpages.

INTRODUCTION • A style sheet language used for describing the presentation of a document

INTRODUCTION (CONT’D) • Designed to enable the separation of presentation and content, including aspects

BASIC CSS CODE Webpage Display HTML Without CSS Applied <h 1>This is a Blue

BASIC CSS CODING CSS Defined in the HTML Head Section <!DOCTYPE html> <head> <style>

BASIC CSS CODING CSS Defined in a Separate Style Sheet "styles. css" <!DOCTYPE html>

DEFINING FONT STYLES <!DOCTYPE html> <head> <style> h 1 { color: blue; font-family: verdana;

DEFINING MULTIPLE STYLES <!DOCTYPE html> <head> <style> #p 01 { color: blue; } #p

URL LINK STYLES <style> a: link { color: green; background-color: transparent; text-decoration: none; }

Example Cascading Style Sheet © Charest Consulting 2018 11

REFERENCES FOR FURTHER STUDY • Recommended Tutorials – W 3 Schools. com • https:

Slides: 12

Download presentation

Introduction to CSS Coding Ron Charest © Charest Consulting 2018

Objectives This presentation provides an introduction to Cascading Style Sheets (CSS) coding for webpages. Lesson Objectives • Introduction to CSS • Basic CSS Coding • How CSS Integrates with HTML and Javascript © Charest Consulting 2018 2

INTRODUCTION • A style sheet language used for describing the presentation of a document written in a markup language. • Commonly used for visual style of web pages written in HTML and XHTML. • CSS can be applied to any XML document, including plain XML, SVG and XUL. • Cornerstone technology along with HTML and Java. Script. © Charest Consulting 2018 3

INTRODUCTION (CONT’D) • Designed to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts. • Provides flexibility and control in the specification of presentation characteristics. • Can present the same data page in for different rendering methods such as: – Different on-screen viewing devices – In print – By voice (via speech-based browser or screen reader), – Braille-based tactile devices © Charest Consulting 2018 4

BASIC CSS CODE Webpage Display HTML Without CSS Applied <h 1>This is a Blue Heading</h 1> This is a Blue Heading HTML With CSS Applied <h 1 style="color: blue; ">This is a Blue Heading</h 1> Webpage Display This is a Blue Heading © Charest Consulting 2018 5

BASIC CSS CODING CSS Defined in the HTML Head Section <!DOCTYPE html> <head> <style> body {background-color: powderblue; } h 1 {color: blue; } p {color: red; } </style> <title>An Example of Embedded CSS</title> </head> <body><center> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </center></body> </html> © Charest Consulting 2018 Webpage Display An Example of Embedded CSS This is a heading This is a paragraph. 6

BASIC CSS CODING CSS Defined in a Separate Style Sheet "styles. css" <!DOCTYPE html> <head> <link rel="stylesheet" href="styles. css"> <title>An Example of An External CSS Style Sheet</title> </head> <body><center> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </center></body> </html> Alternate Link Options <link rel="stylesheet" href="http: //charestconsulting. com/html/ styles. css"> body { background-color: powderblue; } h 1 { color: blue; } p{ color: red; } Webpage Display An Example of An External CSS Style Sheet This is a heading This is a paragraph. <link rel="stylesheet" href="/html/styles. css"> © Charest Consulting 2018 7

DEFINING FONT STYLES <!DOCTYPE html> <head> <style> h 1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier new; font-size: 160%; } </style> <title>Defining Font Styles</title> </head> <body><center> CSS Defined in the HTML Head Section Webpage Display Defining Font Styles This is a heading This is a paragraph. <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </center></body> </html> © Charest Consulting 2018 8

DEFINING MULTIPLE STYLES <!DOCTYPE html> <head> <style> #p 01 { color: blue; } #p 02 { color: orange; } </style> <title>Defining Different Styles</title> </head> <body><center> Webpage Display Defining Different Styles This is a Paragraph I am different < p id="p 01"> This is a paragraph. </p> <p id="p 02">I am different. </p> </center></body> </html> © Charest Consulting 2018 9

URL LINK STYLES <style> a: link { color: green; background-color: transparent; text-decoration: none; } <style> a: hover { color: red; background-color: transparent; text-decoration: underline; } a: visited { color: pink; background-color: transparent; text-decoration: none; } a: active { color: yellow; background-color: transparent; text-decoration: underline; } </style> Hot spot <a href=“http: //charestconsulting. com”> <img src="smiley. gif" alt="HTML tutorial" style="width: 42 px; height: 42 px; border: 0; "> </a> © Charest Consulting 2018 10

REFERENCES FOR FURTHER STUDY • Recommended Tutorials – W 3 Schools. com • https: //www. w 3 schools. com/ – Code Academy • https: //www. codecademy. com/ – CSS Tutorial. com • https: //www. csstutorial. net/ © Charest Consulting 2018 12