Scribd
Upload
18 views30 pages

Clu-Csc134 Lecture 4

Uploaded by

zuribeecroft
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views30 pages

Clu-Csc134 Lecture 4

Uploaded by

zuribeecroft
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

www.chrislanduniversity.edu.

ng

CLU-CSC134: WEB
PROGRAMMING I
Lesson 4 – CSS
OBJECTIVES

INTRODUCTION
CSS BASIC
CSS ADVANCE
CSS RESPONSIVE
CSS - INTRODUCTION
 CSS is the acronym for "Cascading Style
Sheet".
 It's a style sheet language used for
describing the presentation of a document
written in a markup language like HTML.
 CSS helps the web developers to control the
layout and other visual aspects of the web
pages.
 CSS plays a crucial role in modern web
development by providing the tools
CSS - INTRODUCTION
 Since the inception of CSS, several versions have come into existence. Some of the
notable versions include:
CSS - INTRODUCTION
 Advantages of CSS
CSS - BASICS
 CSS Syntax
 A CSS rule consists of a selector and a declaration block.
CSS - BASICS
 CSS Selectors
 CSS selectors are used to "find" (or select) the HTML
elements you want to style.
CSS - BASICS
The CSS element Selector
The element selector selects HTML elements
based on the element name.
CSS - BASICS
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element is unique within a page, so the id selector is used to select


one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
CSS - BASICS
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by
the class name.
CSS - BASICS
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class
name.
CSS - BASICS
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
CSS - BASICS
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style
definitions.
CSS - BASICS
All CSS Simple Selectors
CSS - BASICS
HowTo Add CSS
There are three ways to associate styles with
your HTML document.
External CSS
Internal CSS
Inline CSS
CSS - BASICS
External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!
Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section..
CSS - BASICS
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
CSS - BASICS
Cascading Order
What style will be used when there is more than
one style specified for an HTML element?
All the styles in a page will "cascade" into a new
"virtual" style sheet by the following rules, where
number one has the highest priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style has the highest priority, and will
override external and internal styles and browser
defaults.
CSS - BASICS
Measurement Units
Values and units, in CSS, are significant as they determine
the size, proportions, and positioning of elements on a web
page.
Units, define the measurement system used to specify the
values.
CSS offers a number of different units for expressing length
and measurement.
CSS unit is used to specify the property size for a page
element or its content.
There are a number of ways to specify and measure length
in CSS. It is used to specify margins, padding, font size,
width, height, border, etc.
For example- font-size: 50px, here number 50 has a suffix px
i.e., pixel, it is a CSS measurement unit.
CSS - BASICS
Measurement Units
Following table shows the different types of values and units
that we mostly use in CSS styling:
CSS - BASICS
Length Units
Length units can be categorized into two types:
CSS - BASICS
Absolute Length Units
These units are categorized as fixed-length units, which
means that lengths specified with absolute units maintain an
exact, unchanged size on the screen.

These units prove to be very effective when the browser has


comprehensive information about the properties of the
screen, the printer being used, or other appropriate user
agents.

Absolute units prove valuable for projects where


responsiveness is not a priority. However, they are less
beneficial for responsive websites because they do not
adjust when screen dimensions change.
CSS - BASICS
Absolute Length Units
The following table contains all the types of absolute units:
CSS - BASICS
Absolute Length Units
CSS Measurement Units - Using mm, cm, in, Q
Here is an example of absolute units (mm, cm, in, Q):
CSS - BASICS
Absolute Length Units
CSS Measurement Units - Using px, pt, pc
Here is an example of absolute units (px, pt, pc):
CSS - BASICS
Relative Length Units
Relative length units are called such because they are
measured in relation to other elements.

Relative units are great for styling responsive websites


because they can be adjusted proportionally based on
window size or parent elements. These units define lengths
relative to other length properties.
CSS - BASICS
Relative Length Units
The following table contains all the types of relative units:
CSS - BASICS
Relative Length Units
The following table contains all the types of relative units:
CSS - BASICS
Relative Length Units
The following table contains all the types of relative units:

You might also like