web development -2

sri999

t22.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Getting Started with CSS

Tutorial 2

Carey

Objectives

Explore the history of CSS

Study different types of style sheets

Explore style precedence and inheritance

Apply color in CSS

Use contextual selectors

Work with attribute selectors

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Apply text and font styles

Use a web font

Define list styles

Work with margins and padding space

Use pseudo-classes and pseudo-elements

Insert page content with CSS

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

CSS Styles and Colors

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing CSS

The appearance of the page is determined by one or more style sheets written in the Cascading Style Sheets (CSS) language

The latest version of the CSS language is CSS3

CSS3 is built upon several modules, where each module is focused on a separate design topic

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Types of Style Sheets

Browser styles or user agent styles – Styles built into the browser

User-defined styles – Styles defined by a user based on the configuration setting of the user’s browser

External styles – Styles created by a website author, placed within a CSS file, and linked to the page

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Figure 2-1 Hierarchy of Styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Types of Style Sheets (continued)

Browser Styles – the default styles built into the browser itself. In the absence of competing styles from other style sheets, a browser style is the one applied to the web page.

You may reset the browser default CSS.

https:// perishablepress.com /a-killer-collection-of-global- css -reset-styles/

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Types of Style Sheets (continued)

External CSS – Style file added in the head of an HTML document

<head> @import "mystyle.css";

@import url("mystyle1.css");

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Types of Style Sheets (continued)

Embedded styles – Styles added to the head of an HTML document

<head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Types of Style Sheets (continued)

Inline styles – Styles added as element attributes within an HTML document and applied to only that particular element

<body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Style Rules

The general syntax of a CSS style rule is

selector{

property1: value1;

property2: value2;

...

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Style Rules (continued)

Browser extensions are an extended library of style properties in the browser

Vendor prefix – Indicates the browser vendor that created and supports the style property

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Embedded Style Sheets

They are inserted directly into the HTML file as metadata by adding the following element to the document head

<style>

style rules

</style>

where style rules are the different rules embedded in the HTML page

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Inline Styles

They are styles applied directly to specific elements using the following style attribute

<element style=“property1: value1;

property2: value2; …”>

content

</element>

where the property: value pairs define the styles applied directly to that element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Style Specificity and Precedence

The more specific style rule has precedence over the more general style rule

Specificity is an issue when two or more styles conflict

If two rules have equal specificity and equal importance, then the one that is defined last has precedence

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Style Inheritance

Style inheritance – Process in which properties are passed from a parent element to its children

For example, the following style rule sets the color of article text to blue and the rule is passed to any paragraph or other elements nested within that article

article {color: blue;}

p {text-align: center;}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Browser Developer Tools

They allow designers to view HTML code and CSS styles

They make it easier to locate the source of a style that has been applied to a specific page element

They are different in each browser and are updated and improved constantly

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Writing Style Comments

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Importing Style Sheets

@import is a CSS at-rule used to import the content of a style sheet file

@import url(url);

where url is the URL of an external stylesheet file

It is similar to adding link elements to an HTML file

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Color in CSS

Color values – Values in which the color is given by an exact numeric representation

RGB triplet – The intensity of primary colors expressed as a set of numbers in CSS

rgb(red, green, blue)

Hexadecimal numbers – A number expressed in the base 16 numbering system

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

RGB Color Values

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

HSL Color Values

Hue – Tint of a color, represented by a direction on a color wheel

Saturation – Measures the intensity of a color and ranges from 0% (no color) up to 100% (full color)

Lightness – Measures the brightness of a color and ranges from 0% (black) up to 100% (white)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

HSL Color Values (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining Semi-Opaque Colors

Opacity – Defines how solid a color appears

A color’s opacity is specified using the following properties:

rgba(red, green, blue, opacity)

hsla(hue, saturation, lightness, opacity)

where opacity sets the opacity of the color ranging from 0 (completely transparent) up to 1.0 (completely opaque)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting Text and Background Color

CSS defines the text and background color for each element on a webpage

color: color;

background-color: color;

where color is a color name or a color value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Employing Progressive Enhancement

Progressive enhancement – A technique of placing the code conforming to elder standards before newer properties

It provides support for older browsers and allows newer standards to be used by the browsers that support them

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Contextual Selectors

Contextual selector – Specifies the context under which a particular page element is matched

Context is based on the hierarchical structure of a document, whichs involves the relationships between a parent element containing one or more child elements and within those child elements several levels of descendant elements

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Contextual Selectors (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Contextual Selectors (continued 2)

To match any element, a wildcard selector with the * character is used

Sibling selectors are used to select elements based on elements that are adjacent to them in the document hierarchy

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Attribute Selectors

Selectors also can be defined based on attributes and attribute values within elements

id – Identifies specific elements within the document

class– Identifies a group of elements that share a similar characteristic or property

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Attribute Selectors (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Fonts

Typography is the art of designing the appearance of characters and letters on a page

Color and font are one of few properties in the CSS family of typographical styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Choosing a Font

Text characters are based on fonts that define the style and appearance of each character in the alphabet

The general structure of defining font for any page element is

font-family: fonts;

where fonts is a comma-separated list,

also known as a font stack

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Choosing a Font (continued)

Specific font – Identified by name and based on a font definition file stored in a user’s computer or accessible on the web

Generic font – Describes the general appearance of the characters in the text but does not specify any particular font definition file

Supports the font groups serif, sans-serif, monospace, cursive, and fantasy

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Styling Web Page Text

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Web Fonts

Web font – Definition font is supplied to the browser in an external file because web safe fonts limit the number of fonts choices

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The @font-face Rule

To access and load a web font, add the @font-face rule to the style sheet

Once a web font is defined using the @font-face rule, it is included in the font stack

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The @font-face Rule (continued 1)

The general syntax to include @font-face is

@font-face {

font-family: name;

src: url (‘url1’) format (‘text1’),

url (‘url2’) format (‘text2’),

…;

descriptor1: value1;

descriptor2: value2;

…

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The @font-face Rule (continued 2)

where name is the name of the font, url is the location of the font definition file, text is an optional text description of the font format, and the descriptor1: value1; pairs are optional style properties of the font

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Font Size

To set a font size, use the style property

font-size: size;

where size is a CSS unit of length in either relative or absolute units.

Absolute units – Fixed in size regardless of the output device and are used only with printed media

Relative units – Expressed relative to the size of other objects within the web page or to the display properties of the device itself

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Scaling Fonts with ems and rems

Text is made scalable with all font sizes expressed relative to default font sizes

The three relative measurements used to provide scalability are

percentage

em unit

rem or root em unit

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Viewport Units

Viewport unit – A relative unit used to express length as a percentage if the width and height if the browser window

CSS3 introduced four viewport units

1 vw = 1% of the browser window width

1 vh = 1% of the browser window height

1 vmin = 1 vw or 1 vh (whichever is smaller)

1 vmax = 1 vw or 1 vh (whichever is larger)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Sizing Keywords

Font sizes are expressed using the following keywords

xx-small

x-small

small

medium

large

x-large

xx-large

larger

smaller

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling Spacing and Indentation

Kerning measures the amount of space between characters, while tracking measures the amount of space between words

The properties to control an element’s kerning and tracking are:

letter-spacing: value;

word-spacing: value;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling Spacing and Indentation (continued 1)

Leading – Measures the amount of space between lines of text and is set using the following line-height property:

line-height: size;

Text spacing can be controlled by setting the indentation for the first line of text block by using the text-indent property

text-indent: size;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling Spacing and Indentation (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Font Styles

To specify the font style, use

font-style: type;

where type is normal, italic, or oblique

To change the weight of the font, use

font-weight: weight;

where weight is the level of bold formatting applied to the text

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Font Styles (continued 1)

To specify a text decoration, use

text-decoration: type;

where type is none, underline, overline, or line-through

To transform text, use

text-transform: type;

where type is capitalize, uppercase, lowercase, or none

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Font Styles (continued 2)

To display a font variant of text, use

font-variant: type;

where type is normal or small-caps

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Aligning Text Horizontally and Vertically

To horizontally align the text , use

text-align: alignment;

where alignment is left, right, center, or justify

To vertically align the text within each line, use

vertical-align: alignment;

where alignment is baseline, bottom, middle, sub, super, text-bottom, text-top, or top

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Aligning Text Horizontally and Vertically (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Combining All Text Formatting in a Single Style

The text and font styles can be combined using the following shorthand font property:

font: style variant weight size/height family;

where style is the font’s style, variant is the font variant, weight is the font weight, size is the font size, height is the height of each line, and family is the font stack

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Combining All Text Formatting in a Single Style (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Combining All Text Formatting in a Single Style (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Formatting Lists

List marker – It is the default browser style symbol displayed before each list item for unordered and ordered lists

To change the type of list marker or to prevent any display of a list marker, use

list-style-type: type;

where type is the various types of markers

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Formatting Lists (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Images for List Markers

A customized graphic image for the list marker can be supplied by the user

list-style-image: url (url);

where url is the URL of a graphic file containing the marker image

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Images for List Markers (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the List Marker Position

CSS treats each list item as a block-level element, placed within a virtual box in which the list marker is placed outside of the list text

To change the default behaviour, use

list-style-position: position;

where position is either outside or inside

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the List Marker Position (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Margins and Padding

Block-level elements follow the structure of the box model

Contents in a box model are enclosed within the following series of concentric boxes:

The content of the element itself

The padding space, which extends from the element’s content to a border

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Margins and Padding (continued)

The border surrounding the padding space

The margin space comprised of the space beyond the border up to the next page element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Padding Space

To set the width of the padding space, use the following padding property

padding: size;

where size is expressed in one of the CSS units of length or the keyword auto to let the browser automatically choose the padding

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Padding Space (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Margin and Border Spaces

To set the size of the margin around block-level elements, use

margin: size;

margin: top right bottom left;

To set the size of the border space, use

border-width: size;

border-width: top right bottom left;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Margin and Border Spaces (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Pseudo-Classes and Pseudo-Elements

Pseudo-class – classifies an element based on its current status, position, or use in the document

element: pseudo-class

where element is an element from the document and pseudo-class is the name of a css pseudo-class

Structural pseudo-class – classifies an element based on its location within the structure of the HTML document

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Pseudo-Classes and Pseudo-Elements (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Pseudo-Classes and Pseudo-Elements (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Pseudo-classes for Hypertext

Dynamic pseudo-class – A type of pseudo-class in which the class can change state based on the actions of the user

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Pseudo-Elements

Pseudo-element – An object that exists only in the rendered page

Pseudo-elements can be selected using the following CSS selector:

element::pseudo-element

where element is an element from the HTML file and pseudo-element is the name of a CSS pseudo-element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Pseudo-Elements (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Generating Content with CSS

New content can be added either before or after an element using the following before and after pseudo-elements:

element::before {content: text;}

element::after {content: text;}

where text is the content to be inserted into the rendered web page

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Generating Content with CSS (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Displaying Attribute Values

The content property can be used to insert an attribute value into the rendered web page using the attr( ) function

content: attr(attribute);

where attribute is an attribute of the selected element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Inserting Quotation Marks

The blockquote and q elements are used for quoted material

Decorative opening and closing quotation marks can be inserted using the content property as follows:

content: open-quote;

content: close-quote;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Inserting Quotation Marks (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition