PowerPoint Presentation

CSS

1HTML ReviewWhat is HTML used for?Give some examples of formatting tags in HTML?HTML is the most widely used language on the WebIn todays lesson we will be discussing the second most widely used language on the webDoes anyone know the name of the second most widely used language?Lesson 1: History of CSSCSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4.There were other styling languages proposed at this time, such as Style Sheets for HTML and JSSS but CSS won.CSS2 became the recommendation in 1998 by W3CCSS3 was started in 1998 but it has never been completed. Some parts are still being developed and some components work on some browsers.What is CSS?CSS stands for Cascading Style Sheets Styles - define how to display HTML elements Styles are normally stored in Style Sheets .Cascading:Multiple style sheets can be applied to the same Web page.Same style sheet can be applied to the multiple Web page

Definition:Cascading Style Sheets (CSS) is a rule based language that applies styling to your HTML elements. You write CSS rules in elements, and modify properties of those elements such as color, background color, width, border thickness, font size, etc.

HTML Formatting ReviewWhat are the starting tags in HTML?What are the ending tags in HTML?How do you save in a Notepad document so it becomes a web page?What is the tag for creating paragraphs in HTML?What is the tag for creating heading tags in HTML?What are the tags we use to format font: family, color, size, alignment in HTML?Syntax of CSSThe CSS syntax is made up of 5 parts: selectorproperty/valuedeclaration declaration block curly braces

We will explore each part in the next slides.SelectorDefinition: identifies the HTML elements that the rule will be applied to, identified by the actual element name, e.g. , or by other means such as class attribute values. Example:

*The selector is normally the HTML element you want to style Property & ValueDefinition: The property is the style attribute you want to change. Each property has a value.

*Properties are separated from their respective values by colons :*Pairs are separated from each other by semicolons ; DeclarationDefinition: Each CSS line that includes property and value

*Each declaration consists of a property and a value.Declaration Block

Definition: multiple declaration lines including the curly braces Curly BracesDefinition: the curly braces contain the properties of the element you want to manipulate, and the values that you want to change them to. The curly braces plus their content is called a declaration block.

Example:

Lets Create Our First CSS PageOpen NotepadType the following Code

p {color:red; text-align:center;}

Hello World!This paragraph is styled with CSS.

Save Your File as css-myfirstpage.html into a new folder called CSSInstructor Note: You can demonstrate how to do this by using the example given on the W3schools site. Also as you are creating this file point out to students where they will find the different syntax found in CSS.After creating the file have students manipulate the color and alignment values.Class and id SelectorsIn addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

id - The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

The style rule below will be applied to the element with id="para1":

#para1 {text-align:center;color:red;}Lesson 3: Class and id SelectorsClass - The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}

Class and id SelectorsIn the image below what is the h1 selector an ID or a Class?

#

.

Lets Create A CSS Page that uses idOpen NotepadType the following Code

#para1{text-align:center;color:red;}

Hello World!This paragraph is not affected by the style.

Save Your File as css-id.html into a your folder called CSS.Instructor Note: You can demonstrate how to do this by using the example given on the W3schools site. Also as you are creating this file point out to students where they will find the different syntax found in CSSAfter creating the file have students manipulate the name of the id

Lets Create A CSS Page that uses classOpen NotepadType the following Code

.center{text-align:center;}

Center-aligned headingCenter-aligned paragraph.

Save Your File as css-class.html into a your folder called CSS.

Instructor Note: You can demonstrate how to do this by using the example given on the W3schools site. Also as you are creating this file point out to students where they will find the different syntax found in CSSAfter creating the file have students manipulate the name of the class How CSS is Applied to A Web Page CSS is applied to a web page using three different methods:Inline styleInternal style sheetExternal style sheet Inline CSSApplies styles directly to the elements by adding declarations into the styleFor Example: This is a simple paragraph and the inline style makes it red. How CSS is Applied to A Web Page Internal Style SheetApplies styles to HTML by placing the CSS rules inside the tag inside the document tag .For Example:

my page

p{color:red}

this is a simple paragraph

How CSS is Applied to A Web Page External CSSApplies styles as a separate file with a .css extension. The file is then referenced from inside the element by a link to the file.For Example:

my external style sheet page

this is a simple paragraph

You can create an external style sheet in your text editor.How CSS is Applied to A Web Page CSS ColorsIn the previous lesson you have seen a few CSS styles that included color like: There are a few ways that you can set colors in CSS:Keywords, Hex values, RGB, HSL(a) Colors and Formatting in CSSCSS Colors: KeywordsUsing the keywords like: red, fuchsia, yellow, blue, green you can specify what color you would like the CSS rule to display.For example:p{color:red}h2{color:yellow}There are 17 of these keyword colors you can use in CSS.

Colors and Formatting in CSS

CSS Using ColorOpen Your CSS-ID example in NotepadType the following Code right above the style you had written previously.

Color set by using hex value

Color set by using rgb value

Color set by using color name

Save Your File as css-color.html into your folder called CSSInstructor Note: You can demonstrate how to do this by using the example given on the W3schools site. Also as you are creating this file point out to students the different syntax found in CSS.After creating the file have students manipulate the color values to discover other color combinations.