Ifi7174 lesson2

Cascading Style Sheets

IFI7174.DT – Lesson 2

@ Sonia Sousa 2

OutlineHTML review

CSS

Syntax

ID and class attributes in HTML

Block and inline elements

Insert CSS in HTML

Understand CSS

2015

Summary• HTML pages are text documents.• XHTML uses tags

– characters that sit inside angled brackets <p> • Each tag has a special meaning to the browser.

– Tags are often referred to as elements.• Tags

– Usually come in pairs. – The opening tag >

• Represents the start of a piece of content;– The closing tag /> – Represents the end.

HTML5 Layout

• <div> element– <header>– <nav>– <aside>– <article>– <footer>

Understanding structure

• HTML pages are like text documents.

• It is very similar to a book– Head – headings– subheadings– Text, images,

videos…

• HTM L Describes – the Structure of the

document

DOM

Establish the Order of things

Assuming that

• You understand HTML– Let’s start learning CSS

• What is CSS?– Is Cascading Style Sheets

• What it does?– With HTML you

• Structured the page content– With CSS you

• Create rules to control HTML elements

CSS - Cascading Style Sheets

• With Cascading Style Sheets– We no longer use HTML tags to format a

document• Allows you to create rules to control

– Your HTML elements • How they are formatted/displayed• CSS saves lot of work

CSS Syntax

• Include 2 distinct parts – the selector and the declaration

• A selector – Points to the HTML element

• A declaration block– Contains one or more declarations separated by a

semicolons

CSS Syntax• looks like this…

p {

color: red;

}

selector declaration

property value

Element = selector Starts { }

Each declarations ends ;

CSS Selectors

• A selector allow you to – Select and manipulate manipulate HTML elements.– CSS selectors are used to ”select" HTML elements

• They do that selection based on the element name

• For instance – p selector “finds” all <p> tags in HTML and formats

it as you declared in CSSp {color: red; text-align: center;}

CSS style • Selectors

– Indicate which element the rule applies to

• Declarations– Indicate how the

elements should be styled.

• Associate style rules to• HTML elements

p {

color: red;

}


property value

Examples

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

}

• In a simple but less readable wayp {color:red; text-align:center;}

Comments in CSS• Comments in CSS

/* This is a single-line comment */

/* This isa multi-linecomment */

• Comment in HTML

CSS SelectorsUniversal *{} applies to all elements in the

documentType selector h1, h2, h3 {} applies to every <h1> and <h2>

element in the pageclass selector .note{} applies to elements who indicate

class=“note”

p.note} Target <p> elements who are inside a class=“note” element

ID selector #xpto{} applies to elements who indicate id=“xpto”

#xpto ul li {} applies to <ul> <li> when they are inside id=“xpto” element

child selector li>a{} Target only <a> elements who are children of an <li>

descendent selector

p a{} Target only <a> elements who are inside<p>

CSS selectors are case sensitive

A element selector

• Is selected based on the element named in HTML– All <p> elements– All <h1>– All <body>

• How to change the font size of a element selectorh1, h2, h3, h4, h5, h6 {font-size: 1.2em;}

ID attribute in HTML

• In HTML is a unique identifier– Used to distinguish one element from another– For instance

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p id=”notes” >Lorem Ipsum is simply dummy text of the printing and typesetting industry .</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

• The identifier named notes – Appears just once in a single web page

This is useful…

• When using CSS styles– To assign a particular style to a HTML element – You identify that particular element with an id

attribute<p id=”notes” > text </p>

• id attribute – is also use in JavaScript

• to allow the script to work with that particular element.

id attribute

HTML code<p id=”note"> Change style of this

paragraph </p>CSS code

#note{ text-align: center; color: red;

}

You only change the style of the paragraph with the id selector called “note”

Class attribute• Is not an unique attribute

– You can use it more than once in the same web page• Used to identify

– 2 or more similar elements in the same page• A class attribute

– Is a value that describe the class that a particular element belongs to<p class=”quote” >Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry .</p> <p class=”quote” >Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

This is useful…

• When you use styles– For example,

• To assign similar behaviors to a HTML element

• How – You assign a class attribute name as “quote”.

• Every time you wont the use “quote” attitude• you add it to the tag element

– <p class=”quote” > </p>

The class Selector

HTML code<p class=”center” >all HTML elements with class="center” will have this characteristics </p><h1 class="center”> this one as well </p>CSS code

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

Grouping Selectors

• Multiple selectors can be groupedh1 {color: blue; font-weight: bold;}h2 {color: blue; font-weight: bold;}h3 {color: blue; font-weight: bold;}

h1, h2, h3 {color: blue; font-weight: bold;}

• Multiple rules can be applied to the same selectorh1, h2, h3 {color: blue; font-weight: bold;}h3 {font-style: italic;}

NOTEBe sure to put a comma after each selector except the last.

Type of styles

CSS Selectors

• Element Selectors: p { color: blue; }

• Class Selectors: .box { background-color: #CFC;}

• ID Selectors: #content {width:960px;}

• Descendant Selectors: p em { color: red;}

HTML generic Tags

• Inline<span>

• Block Level<div>

<div Class=“box”><div id=“content”>

Block and inline elements

• Block elements represent– Separate blocks of text for instance

• will start on a new line– Example of block element

• <div> element, <p>, <li>

• Inline elements are elements that– follow the flow of the text

• <b>, <i>, <img>, <a> or <em>

<div> element in HTML

• Is used as an aggregator of elements in a block– the <div> element will start on a new line

<div id=“pageTop”>Dummy text title </div><div class=”content”>Lorem Ipsum is simply dummy text of the printing and typesetting industry . Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

• It is used for example together with – Id and class attributes to indicate the space a block can

occupy in the screen• Used as a replacement of tables

– To control and hold the elements of a web page

<span> element

• Inline element– It aggregates for instance text and other elements

inline– Has the same behavior as <div> but

• Group elements in a line not a block<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br/>Lorem Ipsum <span class=”quote” > is simply dummy </span> text of the printing and typesetting industry . Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

Insert CSS in HTML

• Three ways– External style sheet

• linked from a separate CSS style sheet. • <link> indicate where to find CSS style sheet

– Internal style sheet– Inline style

External Style Sheet

• CSS is in a separate document from HTML– Advantage

• You can change the look of an entire website by changing just one file

– One style to multiple XHTML pages• Just link the CSS file to each pages

– Truly separates HTML from CSS

– Designing and editing to become easier– Modifying the CSS style is easier

<head>

<title>linked Styles Example</title>

<link href=“my_style_sheet.css” media=“screen” rel=“stylesheet” type=“text/css” />

</head>


• How to?– Each HTML file must include a reference to the

external style sheet file • This is done using the <link> element• The <link> element goes inside the head section

Path for CSS file

Type of document linked to

Relation from HTML to liked file


• Rules– Use text editor– Save with extension .css

• For example “myStyle_yourname.css”– The file should not contain any html tags

Internal Style Sheet

• The style is embed directly in the HTML markup – Apply CSS style to one single page

• Advantage – Allows all pages to use the same style rules

• Problem – not efficient the code is not portable– hard to edit the markup

Internal Style Sheet• How to?

– Start a <style> element– Inside HTML head section– Add the CSS style

<head>

<title>Embedded Styles Example</title>

<style type="text/css”>body {

background-color: linen;}h1 { font-size: 16pt; }p { color: blue; }</style>

</head>

CSS syntax

CSS syntax

Inline Style Sheet

• Apply CSS style to one single element– It has a similarity with internal way

• you are not truly separating the styles from the content;

– they are still in the same document

– Plus… this way• style loses many of the advantages of a style sheet

<h1 style="color:blue;margin-left:30px;">This is a formatted heading.</h1>

Multiple Style Sheets

• Some properties have been defined in different style sheets– for the same selector

• For instance – External style sheet

• Has declared properties for the <h1> element– Internal style sheet

• Has as well a property for the <h1> element

• External overlaps the internal

Cascading order• How CSS rules cascade

– Highest priority:1. Inline style (inside an HTML element)2. External and internal style sheets (in the head section)3. Browser default

– Last rule• If two selectors are identical, the latter of the two will take precedence

– Specific H1{} is more specific than *{}

– !important; • Indicates that previous assign property is more important then other

rule assigned to the same element

Inheritance

• If you applied to a body element – <body> properties like

• font-family:• color:

– They are assumed by the child elements• Example

– Save time for you apply general properties to many elements

@ Sonia Sousa 37

EXERCISE 1

2015

Using Internal Style Sheet

• Go to your index.html page– Apply CSS styles to the existing elements in the main

page • Selectors:

p {color: blue; font-style: normal; font-family: sans-serif; }a {color: #66CC00;}Body {width: 960px; border: 1px solid black; background-color: #291A12 solid;}H1, h2, h3, h4 {font-size: 1opx;}ol, ul { list-style: none;}

How to…

• Add the blue code to your index.html

<html><head><title>My page </title>

<style>body {

}

</style><body>

Why use External CSS

• All your web page share the same structure– Some codes do not need to be repeated in every

page• Resulting in less code (HTML code is easier to read)• Easy to change the CSS rules later on

– This is particular useful when you structure your document using

• block of elements instead of tables

• But sometimes you might need to use internal CSS rules

When to use internal CSS

• When you are creating a single page• In one page that requires few extra CSS rules

– If so place the CSS rules in the <head> of the document

– Avoid to add it directly to the text

One last advice

• Before launch your website test it in different browser– You might find slight differences in how browsers

display the pages. – Check in different OS as well

Box metaphor

padding, margin, width and height

Understand CSS

• Imagine that there is an invisible box around every HTML element

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

text of the printing. </p>

<span class=”quote” > is simply dummy </span>

Understand CSS

• CSS allows you to create rules to control – Each individual box

• Including the contents of that box.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

text of the printing. </p>

<span class=”quote” > is simply dummy </span>

block level elements

inline elements

CSS• Selectors indicate

– which element the rule applies to

• Declarations indicate – How the elements

referred to in the selector should be styled.

• Associate style rules to• HTML elements

p {

color: red;

}


property value

Box metaphor

• Dimensions– Width and height

• Overflow– Hidden– scroll

h1 {heigh: 300px;width: 840px;background-color: #ee3e80;

}

P {heigh: 75%;width: 75%;background-color: #e1ddda;}

Box dimensions

• By default a CSS style has a box with – Enough size to group all elements

• To make it bigger use– width, height properties and pixel or %, em values

height: 300px; width: 300px; background-color: #bbbbaa;

• Limiting the width and height min-width: 450px; max-width: 650px; min-height: 10px; max-height: 30px;

Content overflowing

• The overflow property indicates– That the content within the box is larger than the

box – Values

overflow: hidden;overflow: scroll;

Border Margin and Padding

• A box has 3 main properties– This will help you to adjust and control the

appearance of the boxBorder-width: 1px; - visibleMargin: 0px; space outside the edge of the borderPadding: opx; space between the border and the content

• Padding increases the readability of the text.

More about box

• change padding, margin, width and heightbody {

padding-top: 100px;padding-right: 50px;padding-bottom: 75px;padding-left: 100px;

margin-top: 10px;margin-right: 5px;margin-bottom: 15px;margin-left: 20px;

height:100px;width:100px;border:1px black solid;}

can be defined in px, pt, em,

body {padding: 100px 50px 75px 100px;

margin:10px 5px 15px 20;

height:100px;width:100px;border:1px black solid;

}

Top right bottom left

left right

top

Bottom

Mar

gin-

Left M

argin-right

Margin top

Margin-bottom

Border-bottom

Border-top

Bord

er-L

eft

Border-right

Padding rightPadd

ing

Left Padding top

Padding-bottom

content

The box model MarginBorderPadding

More about border

• border-style:– solid, dotted, dashed, double, groove – hidden / none

• No border is shown

• border-color:– Use color principles

Centering a box

• Set the width then – set the left-margin and right-margin to auto

p.example { width: 300px;margin: 10px auto 10px auto; }

CSS properties

Background, Text and Fonts

CSS Background

• CSS background properties – Define the background effects

• Properties– background-color– background-image– background-repeat– background-attachment– background-position

Color specification

HEX value - "#ff0000”RGB value - "rgb(255,0,0)” color name - "red"

Opacity0.0 (transparent) to 1.0 (opaque)

Background properties

• Background-color, color, opacity

body {background-color: blue;color: darkcyan;opacity: 0.5;

}Body{

background-color:#FFF0F5;color: #ee3e80;

}body{background-color: rgb(255,0,255);color: rgb(100,100,90);}

Transparent is the color by default

Can be add in 3 waysHEX value - like "#ff0000”RGB value - like "rgb(255,0,0)”color name - like "red"

Background Image

• background-image property Body { background-image: url(”img.png"); }

background-repeat: repeat-x; - horizontally repeat

background-repeat: no-repeat;

background-position: right top;

• Simplifiedbackground: #ffffff url("img_tree.png") no-repeat right top;

See HTML&CSS book, page: 276For know more about units

and type size

• text-align:– center/left/right

• color: – hex, color name, or rgb

• font-size– %, small or medium, em, pt or px

• font-family: – Sans-serif, serif, cursive, fantasy, monospace

Text and Fonts

Color property

• Allow you to change color of a text – rgb values

• red, green and blue – rgb(100,100,90)

– Hex codes • six-digit codes • # sign and start from 000000 until 111111

– Color names • 147 predefined color names

Understand color

• A screen see color as a mix of 3 – Red, green and blue

• Those color are displayed as pixels– Tiny squares

• The number of squares depends on the resolution • (number of pixels per inch 1 inch = 2.5 cm)

– Black is the absence of light #000000• http://paletton.com/

Contrast

• Be careful the is contrast when picking– background-color and color

• With low contrast the text is hard to read– Same happens when the text emits too much light

• Background black and text white

Opacity

• CSS3 allows you to add opacity to you – blocked and inline elements

• Opacity value changes between– 0.0 and 1.0 – 0.5 is 50% opacity

opacity: 0.5;

Understand Typeface

• Serif, sans-serif and monospace– Serif –extra detailed

• Georgia, times, times new roman– sans-serif letters are strait

• Arial Verdana, Helvetica– Monospace letters have same size

• Courier, courier new

A A A– Sans-serif fonts are clear to read on a screen

Size type

• Pixels– Most commonly used– Allow precision

• Percentages– Default size in a browser is 16px = 100%

• EMS– The with of the letter m

h1 24px

h2 18px

h3 14px

body 12px

Type of Letters

• Weight– Affects the amount of white space and contract in

the page• Style

– Normal, Italic and oblique• Stretch

– Changes the space b e t w e e n characters

CSS3 shadow

• Text-shadow property– It is complicated

• Takes three lengths and a color – lengths 1 – indicate how far to the left or right the shadow

falls– Lengths 2 - distance to the top– Lengths 3 – optional is amount of blur – Color – what color to add

text-shadow: 1px 1px 0px #000000;

Change Headingsh1 {color:blue; font-weight:bold;font-style: normal;font-family: sans-serif;font-size: 1em;}h2 {Color:#FFF0F5;text-align:justify;font-size: 10px;}

h3 {Color:rgb(255,0,255);font-size: 60%;}

h1, h2, h3, h4, h5, h6 {font-size: 1.6em;padding: 0px 2px 0px 5px;margin: 0px;

}Top right bottom left

Style Links/imagesa:link {

color:green;}a:visited {

color:blue;}A:active { }a:hover {

color:red;border-style: solid;border-width: 1px;border-bottom-color: green;

}a:active {

color:yellow;}

img {border: 1px red solid;

}

border-style:solid, dashed, double

border-width:15px, thin, medium, thick

border-top-color: #ff0000

border:5px solid red;

http://www.w3schools.com/cssref/

• Color• Background and

Borders• Basic Box• Flexible Box• Text• Text Decoration• Fonts• Writing Modes

• Table• Lists and Counters• Animation• Transform• Transition• Basic User Interface• Multi-column

Boxes

• Control size of boxes• Box model for borders, margin and padding • Displaying and hiding boxes

Additional CSS properties

Inline/block, Table, forms, cursor

Inline/block

• Transform an inline element into a block elements or vice-versa– using display property

li { display: inline; margin-right: 10px;} – Make an block element act like inline element

• Em { display: block; margin-right: 10px;} – Vice-versa

display: hidden; display: visible; – Hide/show an element from the page

Table properties

table { width: 600px;} th, td { padding: 7px 10px 10px 10px;text-transform: uppercase;letter-spacing: 0.1em; font-size: 90%; border-bottom: 2px solid #111111; text-align: left;} tr { background-color: #efefef;}

Styling Forms

input { font-size: 120%; color: #5a5854; background-color: #f2f2f2; border: 1px solid #bdbdbd; border-radius: 5px; padding: 5px 5px 5px 30px; background-repeat: no-repeat; background-position: 8px 9px; display: block; margin-bottom: 10px;}

Cursor styles

• Auto, crosshair, default, pointer, move, text, wait, help url("cursor.gif");

a { cursor: move;

See HTML&CSS book, page: 337-374For know more about units

and type size

Layout

Controlling the position of elements Creating site layouts

Designing for different sized screens

Positioning elements

• Key concept – CSS sees HTML element as a box

• Block level– Start on a new line <p< <h1< <ul> <li>

• Inline – Float around the text <img> <b> <i>

Controlling the position

• 5 positioning schemes – normal flow - Static

• Every block-level element appears on a new line

• The paragraphs appear one after the other, vertically down the page.

position: static;

Normal flow

you do not need a CSS property to indicate that elements should appear in

normal flow,

Relative positioning– Moves an element

from normal flow position to

– Where you indicate• top-right-bottom -

pushed down and right from

top: 10px; left: 100px;

• Do not affects the position of the rest of the text

Relative position

Need to know about

– Relative

Move down 30 pixels, and to the left 80 pixels

position:relativeTop:30px;Left:80px;

But the original space of the box still belongs to the box

Body <div id=“content”>#content {position: static;border: 5px solid #fff;width:200px;overflow: scroll;

} #content {position: relative;left:100px;top:150px;

border: 5px solid #fff;width:200px;overflow: scroll;}

Absolute positioning

• absolute positioning – Take the box pout of

the normal flow• It position is not

affected by the of other elements

– The block moves as the user scrolls up and down in the page

Absolute position

Position: absolute

• Position: absolutethe element is removed from the document and placed exactly where you tell it to go.

position:absolute; top:0; right:0; width:200px;

Fixed position

• Fixed position– Type of absolute position– Position the box in

relation to the browser window

• If you scroll the page it stay in the same position

– The surrounding elements are not affected by the bock

placed in the center of the page

25% from the top of the screen

Fixed position

Position: absolute

• Position: absolutethe element is removed from the document and placed exactly where you tell it to go.

position: fixed; top: 0px; left: 50px;

Floating elements

• Floating elements– Take the box out of

normal flow– Position left or right– Has a block behavior

around the other elements

Floating position

Floating elements

• Use when – you have 2 columns (side by side elements) with a

variable height in your box – When you use the float property, you should also

use the width property to indicate how wide the floated element should be.

• float: right; width: 275px; – Then after the floating elements we can "clear" the

floats to push down the rest of the content.– clear:both;

z-index property

• When you move – any element from normal flow, boxes can overlap

• The z-index property – allows you to control which box appears on top

• Its value is a number– the higher the number the closer that element is

to the front. • z-index: 10; from• z-index: 5; back

Additional sources

• Keith, Jeremy. HTML5 for web designers, ISBN 978-0-9844425-0-8, 2010.

• Cederholm, Dan. CSS3 for Web Designers, ISBN 978-0-9844425-2-2, 2010.

EXERCISE 2 – CSS & HTML


#blockcontainer{

position:absolute; top:10; right:10; width:800px;

}

#container

#header

#menu #content

#footer

top:10px

right:10;

width:800px

Width:800px;

width:800px;#header{

width:200px;

}

#footer{width:200px

}

width:180px; width:600px;

#header

#container

#footer

#content

#menu

File name:mystyle_yourname.css

Ifi7174 lesson2

Education

Transcript of Ifi7174 lesson2