Post on 10-Apr-2017
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;
}
selector declaration
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 <!-- HTML comment -->
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>
External Style Sheet
• 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
External Style Sheet
• 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;
}
selector declaration
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
External Style Sheet
#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