Ifi7174 lesson2

Cascading Style Sheets
IFI7174.DT – Lesson 2

Outline
HTML review
CSS
Syntax
ID and class attributes in HTML
Block and inline elements
Insert CSS in HTML
Understand CSS
2@ Sonia Sousa2015

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 CSS
p {
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 way
p {color:red; text-align:center;}

Comments in CSS
• Comments in CSS
/* This is a single-line comment */
/* This is
a multi-line
comment */
• Comment in HTML

CSS Selectors
Universal *{} applies to all elements in the
document
Type selector h1, h2, h3 {} applies to every <h1> and <h2>
element in the page
class 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 selector
h1, 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 grouped
h1 {color: blue; font-weight: bold;}
h1, h2, h3 {color: blue; font-weight: bold;}
• Multiple rules can be applied to the same
selector
h1, h2, h3 {color: blue; font-weight: bold;}
h3 {font-style: italic;}
NOTE
Be 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

EXERCISE 1
@ Sonia Sousa 372015

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 box
Border-width: 1px; - visible
Margin: 0px; space outside the edge of the border
Padding: opx; space between the border and the
content
• Padding increases the readability of the text.

More about box
• change padding, margin, width and height
body {
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
Margin-Left
Margin-right
Margin top
Margin-bottom
Border-bottom
Border-top
Border-Left
Border-right
Paddingright
PaddingLeft
Padding top
Padding-bottom
content
The box model
Margin
Border
Padding

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"

Opacity
0.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 ways
HEX 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;
• Simplified
background: #ffffff url("img_tree.png") no-repeat right top;

See HTML&CSS book, page: 276
For 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 Headings
h1 {
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/images
a: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-374
For 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:relative
Top: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: absolute
the 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: absolute
the 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.

#container
#header
#menu #content
#footer
top:10px
right:10;
width:800px
Width:800px;
width:800px;
width:180px; width:600px;
#header
#container
#footer
#content
#menu
File name:
mystyle_yourname.css

Ifi7174 lesson2

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Ifi7174 lesson2

Semelhante a Ifi7174 lesson2 (20)

Mais de Sónia

Mais de Sónia (16)

Último

Último (20)

Ifi7174 lesson2