Scribd
Upload
46 views

Cascading Style Sheets (CSS) : An Introduction and Overview

This document provides an introduction and overview of Cascading Style Sheets (CSS). It defines CSS as a style sheet language used to describe the presentation of documents written in markup languages like HTML. It discusses the types of CSS (inline, embedded, and external), how the different types cascade to determine styling precedence, and how CSS rules and inheritance work. It also provides examples of creating CSS style sheets and applying styles to documents using CSS.

Uploaded by

Parameswari Balasubramaniam
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
46 views

Cascading Style Sheets (CSS) : An Introduction and Overview

This document provides an introduction and overview of Cascading Style Sheets (CSS). It defines CSS as a style sheet language used to describe the presentation of documents written in markup languages like HTML. It discusses the types of CSS (inline, embedded, and external), how the different types cascade to determine styling precedence, and how CSS rules and inheritance work. It also provides examples of creating CSS style sheets and applying styles to documents using CSS.

Uploaded by

Parameswari Balasubramaniam
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 37

CasCading Style Sheets (CSS)

An introduction and overview

Mike Hamilton V.P. Product Management MadCap Software [email protected]

Presenter Information Mike Hamilton


MadCap V.P. of Product Management
Mike Hamilton is the Vice President of Product Management at MadCap Software where he is working on the next generation authoring tool, Flare. Before joining MadCap Software, he was the Product Manager for the RoboHelp product line since the days of Blue Sky Software, eHelp, and Macromedia. Mr. Hamilton joined the RoboHelp team in the mid 90s as a founding member of the Training Solutions Program team, where he co-authored the certified training materials supporting the RoboHelp family. Mike has over 20 years of experience in training, technical communication, multimedia development, and software development at several organizations including Macromedia, eHelp/Blue Sky Software, Cymer, a leading supplier of laser illumination sources in the semiconductor industry, National Steel and Shipbuilding, and the US Navy.

We also have with us Sharon Burton


MadCap Product manager

She will answer your questions during the webinar


Shell do her best to answer them

Type questions in the Question and Answer area of the GoToWebinar bar

How this webinar works


You are muted
If youve been talking, hoping wed notice, we cant hear you

Were recording this webinar


None of your information will appear in the final webinar The download link will be provided to you automatically in a follow up email A short survey will also be included
Helps us make the webinars better for you

We should be done by the top of the hour


We know you have a busy day

Agenda What are Cascading Style Sheets (CSS)? What can CSS do? Types of CSS What is Cascading? CSS rules What is Inheritance? Creating a Cascading Style Sheet Creating a custom style Applying a style sheet to documents

What Are Cascading Style Sheets (CSS)?

What Are Cascading Style Sheets?

Cascading Style Sheets


From Wikipedia, the free encyclopedia

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. Created by: CSS was created by Hkon Wium Lie and Bert Bos and was adopted as a W3C Recommendation in late 1996.

CSS Status

Cascading Style Sheets


From Wikipedia, the free encyclopedia

Current: CSS 2.1, adopted by the W3C in 2007 is the current recommendation. Future: CSS 3 has been broken into new categories and is under development. http://www.w3.org/Style/CSS/current-work#table Support: Early browser support was problematic leading many to ignore the CSS technology. Modern browsers may still have the occasional quirk, but CSS rendering has become quite reliable.
http://www.webdevout.net/browser-support-summary

What Are Cascading Style Sheets?

A standards-based method for controlling the look and feel of XML content. Comprised of Rules to control elements in the document. Designed to separate formatting from the content while being flexible and scalable

What Can CSS Do?

What Can CSS Do?

Text formatting Element sizing Element positioning Change link attributes Cursor manipulation And more http://www.csszengarden.com/

What Can CSS Do?

Most importantly, CSS can support the control of hundreds or thousands of documents from a single control file This makes your life much easier when it is time to make updates

Types of CSS

Types of CSS

Three CSS implementations


Inline
Affects only the element applied to

Embedded
Affects only the elements in a single file

External
Linked to an unlimited number of files

HTML Page Structure


<HTML> <HEAD> <TITLE>Title Text</TITLE> </HEAD>
Document (HTML) Head Title Text Body

<BODY> <H1>H1 Heading</H1> <P>Paragraph 1</P> <P>Paragraph 2</P> </BODY>


</HTML>

H1 Heading
Paragraph 1 Paragraph 2

HTML Page Structure


<HTML> <HEAD> <TITLE>Title Text</TITLE> </HEAD>
Document (HTML) Head Title Text Body

<BODY> <H1>H1 Heading</H1> <P>Paragraph 1</P> <P>Paragraph 2</P> </BODY>


</HTML>

H1 Heading
Paragraph 1 Paragraph 2

Inline CSS Use the STYLE attribute

<p>This is normal text</p> <p><b>This is bold text</b></p>


<p style=font-weight: bold>This is bold text</p>

Embedded CSS

Added to the <HEAD> area of file Use <STYLE> element


<HEAD> <TITLE>New Topic1</TITLE> <STYLE>P{font-weight:bold}</STYLE> </HEAD>

External CSS The <LINK> element is used to attach a CSS document to an HTML document <HEAD> <TITLE>New Topic1</TITLE> </HEAD>

<LINK HREF="example.css" REL="StyleSheet" >

What is Cascading?

Cascading The three CSS types combine at run time to render the page. Order of precedence Inline styles Embedded style sheets

Linked (external) style sheets

CSS Rules

Cascading Style Sheets (CSS) Style Rules Inline style=font-weight: bold


Property Value

Embedded/ External

H1 {font-weight: bold}
Selector Declaration

H1 {font-weight: bold; color:black; }

What is Inheritance?

CSS Inheritance

XHTML elements inherit style attributes <body> <h1>Sample heading</h1> <p>Sample text</p> </body> body { font-family: Arial; }

HTML Page Structure


Document (HTML) Head Title Body

H1 Heading
Paragraph 1 Paragraph 2

Creating a Cascading Style Sheet

Creating a Cascading Style Sheet


body {color: #000000; <html > background: #F1F2EC; <head> <link href="test.css" rel="stylesheet" /> font-size: 8pt; </head> font-family: Verdana, <body> Arial,Helvetica, Sans Serif;} <h1>Heading 1 Text</h1> <p>A normal paragraph</p> h1 {color: #0D10E5; <h2>Heading 2 Text</h2> font-size: 12pt;} <p>Another normal paragraph</p> <p>This paragraph will be a tip.</p> h2 {color: #040677; </body> font-size: 10pt;} </html> p {margin-bottom: 16px;}

Creating a Custom Style

CLASS attribute The CLASS attribute can be used to create custom styles for a set of items on a page
P { color:blue; margin-left:3px; } P.myclass { color:blue; marginleft:3px; }

CLASS attribute Class Syntax:


In a style sheet: P.myclass { color:blue;}
In a page: <P CLASS=myclass>Text</P>

Creating a Cascading Style Sheet


body {color: #000000; background: #F1F2EC; font-size: 8pt; <html > font-family: Verdana, Arial, Helvetica, Sans Serif;} <head> h1 h2 p {color: #002000; font-size: 12pt;} {color: #002b00; font-size: 10pt;} {margin-bottom: 16px;}

p.tip {color: #BEF5BF; font-weight: bold; background-color: #696969; padding-left: 0.8em; padding-right: 0.8em; padding-bottom: 0.3em; padding-top: 0.3em; border-bottom-color: #000000; border-bottom-style: Solid; border-bottom-width: 1px; border-top-color: #000000; border-top-style: Solid; border-top-width: 1px;}

<link href="test.css" rel="stylesheet" /> </head> <body> <h1>Heading 1 Text</h1> <p>A normal paragraph</p> <h2>Heading 2 Text</h2> <p>Another normal paragraph</p> <p class=tip>This paragraph will be a tip.</p> </body> </html>

Applying a Style Sheet to Documents

External CSS The <LINK> element is used to attach a CSS document to an HTML document <HEAD> <TITLE>New Topic1</TITLE> </HEAD>

<LINK HREF="example.css" REL="StyleSheet" >

Suggested Reading List


HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide) by Elizabeth Castro ISBN-13: 978-0-321-43084-7

CSS To The Point by Scott DeLoach ISBN-13: 978-0-615-21213-5

Cascading Style Sheets: Designing for the Web (3rd Edition) (Paperback) by Hakon Wium Lie and Bert Bos ISBN-13: 978-0321193124

CSS: The Definitive Guide, Third Edition by Eric Meyer ISBN-13: 978-0596527334

Questions?

Mike Hamilton V.P. Product Management MadCap Software [email protected]

Thank You!

Mike Hamilton V.P. Product Management MadCap Software [email protected]

You might also like