Change the previous example: link the web All CSS properties can only take a specified range font-family: specifies a list of one or more fonts using the

[PDF] CSS Cheat Sheet

Color and Background Properties Allows text to be decorated through one of five properties: Specifies the type of list-item marker, and is used if list-style-

[PDF] Preview CSS Tutorial (PDF Version) - Tutorialspoint

Property: A property is a type of attribute of HTML tag Put simply, all the HTML attributes are converted into CSS properties They could be color, border, etc •

Cascading Style Sheets (CSS 3) block list-item run-in compact none manual auto CSS Properties in Dark Red are shorthand properties and each Example Universal Any element * { font: 10px Arial; } Type Any element of

[PDF] Html & Css

Understanding HTML and CSS can help anyone who Learn how tags or elements are added to your document # Write your first Numbered lists ▷ Bullet lists ▷ Definition lists ▷ LISTS 3 example an image, video, mp3, or a PDF),

[PDF] CSS Cheat Sheet - DG IIIT

list-style-image padding content border margin Selectors Text Borders and Lists Everything Else Box Model Positioning all DIV tags all DIV tags and all SPAN

[PDF] CSS Properties Table - CSUN

CSS Properties Table A listing of most of the css properties DHTML Pit Stop CSS Index CSS Properties HTML List Home/DHTML/CSS/Properties Table

[PDF] HTML Tags Chart - FING

To use any of the following HTML tags, simply select the HTML code you'd like and copy definition list Definition Term Definition of the term List item 4 link

[PDF] Download CSS Basics PDF

3 juil 2007 · the CSS code within the tags of each (X)HTML file you For example, a font declared in the body will be inherited by all text in the file no matter Though I do encourage you to use selector names that are

[PDF] csueb majors and minors

[PDF] cu ag phase diagram

[PDF] culinary school menu

[PDF] cultural benefits of immigration

[PDF] cultural diversity in the catholic church in the united states

[PDF] cultural diversity in the church

[PDF] cupcake business plan

[PDF] cupcakes gahanna

[PDF] curfew pass request

[PDF] curia calendar

[PDF] curia european court

[PDF] curia european court of justice

[PDF] curia european union

[PDF] curia search

[PDF] curia supreme court poland

1

HTML5 and CSS3 - The Future of the

Web Programming

CSS

Sergio Luján Mora

HTML5 & CSS3

Content

ͻIntroduction

ͻLinking HTML and CSS

ͻRules, selectors, and properties

ͻText properties

ͻBackground

ͻLinks

ͻBox model

ͻLayout

HTML5 & CSS3

Introduction

ͻCSS (Cascading Style Sheets):

-A style sheet is a set of instructions each of which tells a browser how to draw a particular element on a page -HTML documents are a collection of elements arranged in a hierarchy 3

HTML5 & CSS3

Introduction

ͻHierarchy AE inheritance:

-If you apply style to an element (parent) which contains other elements (children) then this will be inherited by the elements inside

HTML5 & CSS3

Introduction

ͻRules have two parts: a selector and a

declaration -The selector tells a browser which elements in a page will be affected by the rule. There are a number of different types of selector. -The declaration tells the browser which set of properties to apply. There are many different properties. 5

HTML5 & CSS3

Introduction

CSS example

University of Alicante

University of

Alicante

Department of Software and Computing

Systems

HTML5 & CSS3

Introduction

The Deparment of Software and Computing Systems

teaches the following courses: Programming, Object-Oriented Programming, Web
Programming, and Databases and Software

Engineering.

Teaching Staff

HTML5 & CSS3

Introduction

HTML5 & CSS3

Exercise

ͻGive color green for the paragraph

HTML5 & CSS3

Exercise - Solution

ͻOne solution:

p {font-size: 1.4em;} p {color: green;}

Also (better):

p {font-size: 1.4em; color: green;} 8

HTML5 & CSS3

Introduction

ͻSome examples:

body {background: white; color: black; font- size: 15px;} h1 {background: blue; font-size: 30px;} p {background: yellow;} strong {background: red;} em {background: red; color: yellow;}

ͻIf the value has two or more words:

p {font-family: "Times New Roman", serif}

HTML5 & CSS3

Introduction

ͻComments (1 or more lines):

ͻExample:

/* Paragraph */ p { text-align: center; /* Center */ color: black; /* Black */ font-family: Arial; /* Font face */ 9

HTML5 & CSS3

Introduction

ͻDifferent versions:

-CSS1: CSS level 1. 1996.

ͻhttp://www.w3.org/TR/REC-CSS1

-CSS2: CSS level 2. 1998.

ͻhttp://www.w3.org/TR/REC-CSS2/

-CSS2 revision 1. 2003. -CSS3: CSS level 3. (Working draft)

ͻProblem: incompatibilities between browsers

HTML5 & CSS3

Introduction

ͻMore information:

-W3C: http://www.w3.org/ -W3 Schools: http://www.w3schools.com/ 10

HTML5 & CSS3

Linking HTML and CSS

ͻThree ways of making a style sheet affect the appearance of an HTML document: -External (linking): -Internal (embedded): -Inline:

indented paragraph

HTML5 & CSS3

Exercise

ͻChange the previous example: link the web

page to an external style sheet

HTML5 & CSS3

Linking HTML and CSS

ͻExternal:

-Many pages can be linked to a single style sheet -Making changes to this style sheet can then change the appearance of all the web pages linked to it

ͻInternal:

-When the style sheet is used for only one web page

ͻInline:

-When the style is used for only one HTML element 13

HTML5 & CSS3

Linking HTML and CSS

ͻThe most popular method is the external style sheet:

href:

-Tells the browser where to locate the style sheet, with either a relative or absolute URL

rel:

-Tells the browser what to expect

stylesheet

alternate stylesheet

HTML5 & CSS3

Linking HTML and CSS

ͻIf you define different alternative style

sheets, you have to assign a title to each style sheet

ͻExample: webpage of Spanish Social

System (Seguridad Social)

HTML5 & CSS3

Linking HTML and CSS

HTML5 & CSS3

Linking HTML and CSS

type:

-Tells the browser the type of document linked -Common values:

text/css

text/javascript

HTML5 & CSS3

Linking HTML and CSS

media:

-Tells the browser the type of device the style sheet is for:

±screen: Computer display

±print: Printer

±projection: Projector

±aural: Speech synthesizer

±braille: Braille line

±tty: Console (text) display

±tv: Television

±all: All devices (default value)

HTML5 & CSS3

Rules, selectors, and properties

ͻRules: the selector, followed by the set

of properties, which are surrounded by curly braces (that is { and }) h1 {color: #FF0000; background: #00FF00}

Selector Declaration

Property Property Value Value

Separator Colon Colon

HTML5 & CSS3

Rules, selectors, and properties

ͻSelector:

-Type: select every instance of the specified type of HTML element (tag) -Class͗ class name preceded by ͞." -ID͗ identifier name preceded by ͞η" -Pseudo-classes: name of the pseudo-class 18

HTML5 & CSS3

Rules, selectors, and properties

ͻProperty and value: the property name

followed by a colon, a space (optional) and then the value (if necessary, with its unit, though no space before the unit!) ͻThe last propertyͬǀalue pair doesn't need the separator semi-colon (;)

HTML5 & CSS3

Rules, selectors, and properties

ͻAdvices:

-Make sure you get the property name exactly right: it's got to be color, not colour or collor -All CSS properties can only take a specified range of values: get used to consulting the specification -DonΖt get the punctuation wrong (don't forget the semi-colon between properties) 19

HTML5 & CSS3

Exercise

ͻWrite a new webpage

ͻGive a background color (light gray) and a

color (dark blue) to the whole page -Selector: html or body -Property: background-color

ͻValue: #999999

-Property: color

ͻValue: #0000AA

HTML5 & CSS3

Exercise - Solution

html { background-color: #999999; color: #0000AA;

ͻTips:

-The style sheet is easier to read if you put each property on a new line -it's very easy to forget semi-colons (;). Always put that extra one on the last property in a statement. You won't forget to do it when you add a new property later on 20

HTML5 & CSS3

Rules, selectors, and properties

ͻClass: is an attribute we can add to HTML elements so that we can identify them from the style sheet, using a class selector, and give them their own style

HTML5 & CSS3

Rules, selectors, and properties

ͻIf you don't specify an element, the class name applies to all the elements: .important {color: red;}

Bla, bla, bla.

Bla, bla.
Bla, bla.

HTML5 & CSS3

Exercise

ͻWrite a new webpage with three paragraphs

ͻDefine three classes for the three paragraphs:

±< p class="normal"> AE Color dark blue

±< p class="important"> AE Color red,

background color yellow

±< p class="extra"> AE Color green,

background color gold 22

HTML5 & CSS3

Exercise - Solution

Three paragraphs

This is the first paragraph. Bla, bla, bla, bla.

This is the second paragraph. Bla, bla, bla, bla.

This is the third paragraph. Bla, bla, bla, bla.

HTML5 & CSS3

Rules, selectors, and properties

ͻID: is an attribute we can add to HTML elements so that we can uniquely identify them from the style sheet, using an ID selector, and give them their own style

ͻThe form of an ID selector is very simple, and it would select the specified element with the ID attribute value p#paragraph-1 { color: blue;

HTML5 & CSS3

Exercise

ͻWrite a new webpage with three titles and

four paragraphs 24

HTML5 & CSS3

h1 h2 h2

First paragraph of first chapter

Important paragraph

HTML5 & CSS3

Exercise

ͻThe main title (h1) is color white on black

ͻThe chapter titles (h2) are blue on yellow

ͻThe default color of paragraphs is green

ͻThe first paragraph of the first chapter is black

ͻAn important paragraph is yellow on red

HTML5 & CSS3

Exercise - Solution

Three paragraphs

HTML5 & CSS3

Exercise - Solution

The title of the book

The first chapter

This is the first paragraph. Bla, bla, bla, bla.

This is the second paragraph. Bla, bla, bla, bla.

The second chapter

This is the third paragraph. Bla, bla, bla, bla.

HTML5 & CSS3

Text properties

background-color: background

color of element

color: color of text

HTML5 & CSS3

Text properties

ͻColors:

-Name of color AE red -rgb(x,x,x) AE rgb(255,0,0) -rgb(y%, y%, y%) AE rgb(100%,0%,0%) -#rrggbb AE #ff0000 -#rgb = #rrggbb AE #f00 = #ff0000

HTML5 & CSS3

Text properties

quotesdbs_dbs17.pdfusesText_23

[PDF] [PDF] HTML5 and CSS3 – The Future of the Web Programming - RUA

HTML5 and CSS3 - The Future of the

Web Programming

Sergio Luján Mora

HTML5 & CSS3

Content

ͻIntroduction

ͻLinking HTML and CSS

ͻRules, selectors, and properties

ͻText properties

ͻBackground

ͻLinks

ͻBox model

ͻLayout

HTML5 & CSS3

Introduction

ͻCSS (Cascading Style Sheets):

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

Introduction

ͻHierarchy AE inheritance:

HTML5 & CSS3

Introduction

ͻRules have two parts: a selector and a

HTML5 & CSS3

Introduction

University of Alicante

Department of Software and Computing

Systems

HTML5 & CSS3

Introduction

The Deparment of Software and Computing Systems

Programming, and Databases and Software

Engineering.

Teaching Staff

HTML5 & CSS3

Introduction

HTML5 & CSS3

HTML5 & CSS3

Exercise

ͻGive color green for the paragraph

HTML5 & CSS3

Exercise - Solution

ͻOne solution:

Also (better):

HTML5 & CSS3

Introduction

ͻSome examples:

ͻIf the value has two or more words:

HTML5 & CSS3

Introduction

ͻComments (1 or more lines):

ͻExample:

HTML5 & CSS3

Introduction

ͻDifferent versions:

ͻhttp://www.w3.org/TR/REC-CSS1

ͻhttp://www.w3.org/TR/REC-CSS2/

ͻProblem: incompatibilities between browsers

HTML5 & CSS3

Introduction

ͻMore information:

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

HTML5 & CSS3

Linking HTML and CSS

HTML5 & CSS3

Exercise

ͻChange the previous example: link the web

HTML5 & CSS3

Linking HTML and CSS

ͻExternal:

ͻInternal:

ͻInline:

HTML5 & CSS3

Linking HTML and CSS

href:

rel:

href:

rel:

stylesheet

alternate stylesheet

type:

text/css

text/javascript

media: