Intro to CSS styling a webpage

Interaction 03
Interaction 1st semester Malene Patsche Kjeldsen

Today
Intro to CSS
Assignment 1
Links styling them
Colors in CSS
Assignment 2
Responsive images
Borders
Assignment 3
Summary
Interaction 1st semester Malene Patsche Kjeldsen

CSS what is that?

Interaction 1st semester Malene Patsche Kjeldsen

CSS
Cascading Style Sheet CSS
Goes together with HTML
Styling the code
A rule based language

Interaction 1st semester Malene Patsche Kjeldsen

Examples of CSS

This is called inline CSS

Interaction 1st semester Malene Patsche Kjeldsen

Apply CSS to HTML

Three different ways
1. inline CSS
2. internal style sheet
3. external style sheet

The output is the same!

Interaction 1st semester Malene Patsche Kjeldsen

1. Inline CSS

Interaction 1st semester Malene Patsche Kjeldsen

2. Internal style sheet

Interaction 1st semester Malene Patsche Kjeldsen

3. External style sheet

index.html

style.css

contact.html

about.html

Interaction 1st semester Malene Patsche Kjeldsen

Linking to external CSS

Interaction 1st semester Malene Patsche Kjeldsen

10

CSS the selectors

Pseudo-code example a rule set
selector {
property1: value;
property2: value;
property3: value;
}

Interaction 1st semester Malene Patsche Kjeldsen

11

Ex. different formatting

Interaction 1st semester Malene Patsche Kjeldsen

12

CSS selector types 1of 10

Element selector:
Selects the element specified in the selector

Interaction 1st semester Malene Patsche Kjeldsen

13

CSS measure units

Unit

Description

Example

Pixel (px)

A pixel is one dot on the

computer monitor

width: 200px;

Em (em)

An em is equal to the default

font size of the page

font-size: 2em;

Point (pt)

A point is equal to 1/72 of an

inch

line-height: 36pt;

Percent (%)

The measurement you specify width: 50%;

will be equal to the
percentage of the space
available in the containing
element

Inch (in), (cm)

Milimeter (mm)

Equal to the measurements

units from real life

Interaction 1st semester Malene Patsche Kjeldsen

height: 12in;
14

Assignment 1
Make an HTML and CSS file and create a
page that looks similar to below image:

Interaction 1st semester Malene Patsche Kjeldsen

15

Lists for navigation

Interaction 1st semester Malene Patsche Kjeldsen

16

Styling links
http://www.w3schools.com/css/css_link.asp
Links can be styled different depending on
what state they are in

Interaction 1st semester Malene Patsche Kjeldsen

17

Link states
link: The default state. By default unvisited
links are blue

Interaction 1st semester Malene Patsche Kjeldsen

18

Link states
visited: The style of a link that has
already been visited (clicked on). By
default colored purple

Interaction 1st semester Malene Patsche Kjeldsen

19

Link states
hover: The style when the mouse cursor is
hovering over it

Interaction 1st semester Malene Patsche Kjeldsen

20

Link states
active: The style of a link while it is
activated (as the mouse button is held
down while the pointer is over the link)

Interaction 1st semester Malene Patsche Kjeldsen

21

Order of the link states

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Read more about styling the links here:

http://www.w3schools.com/css/css_link.asp
And here:
http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-tostyling-web-links/
Interaction 1st semester Malene Patsche Kjeldsen

22

Styling links example

Interaction 1st semester Malene Patsche Kjeldsen

23

Colors in CSS
Keywords:

Hex values:

RGB:
Interaction 1st semester Malene Patsche Kjeldsen

24

Assignment 2
Style your links try different properties and
use the different link states

Interaction 1st semester Malene Patsche Kjeldsen

25

Styling images
Make an image responsive:

Interaction 1st semester Malene Patsche Kjeldsen

26

CSS borders styles

Interaction 1st semester Malene Patsche Kjeldsen

27

CSS borders width

Set a specific size in
px, em, cm or predefined values with
thin, medium or thick

Interaction 1st semester Malene Patsche Kjeldsen

28

CSS borders color

Add a color to the border

Interaction 1st semester Malene Patsche Kjeldsen

29

CSS shorthand

Interaction 1st semester Malene Patsche Kjeldsen

30

Assignment 3
Trying out CSS borders:
Add borders to a website of yours
Try different border styles, colors and
widths
Try to add a border only to the bottom of
an element
Ref: http://www.w3schools.com/css/css_border.asp

Interaction 1st semester Malene Patsche Kjeldsen

31

Homework
Before next class
Make a new project in NetBeans and
create a website consisting of:
at least three HTML-files
an external stylesheet
HTML5 semantic elements
validate the HTML at https://validator.w3.org/
Interaction 1st semester Malene Patsche Kjeldsen

32

Summary
Homework:
See slide 32 and readings in study plan
Next class:

CSS box model and selectors

Interaction 1st semester Malene Patsche Kjeldsen

33