Introduction to CSS
Instructor: Mr. Sami Ullah
Balochistan UET sub campus Turbat
Cascading Style Sheets
CSS is a W3C standard for describing the appearance of HTML
elements.
Introduction to With CSS, we can assign font properties, colors, sizes, borders,
CSS background, images, and even position elements on the page.
CSS can be added directly to any HTML element (via the style
attribute), within the <head> element, or, most commonly, in a
separate text file that contains only CSS.
Benefits of CSS
Improved control over formatting
Introduction to Improved site maintainability
CSS Improved accessibility
Improved page download speed
Improved output flexibility (responsive design)
CSS Versions
1996 the CSS level 1 Recommendation was published
June 2011, CSS2.1 become an official W3C Recommendation
From CSS 3 onwards, recommendations are made based on
Introduction to modules. Following modules have been recommended.
Cascading and inheritance
CSS Color module
Fonts module
Media queries
Selectors
Basic user interface module
Browser Adoption
Historically implementation of CSS was not consistent across
major browsers
Introduction to CSS has a reputation for being a somewhat frustrating language
due to browser implementation differences
CSS CSS was not really designed to be a layout language, so authors
often find it tricky dealing with floating elements, relative
positions, inconsistent height handling, overlapping margins, and
non-intuitive naming
Overview
A CSS document consists of one or more style rules
CSS Syntax A rule consist of a selector that identifies the HTML element or
elements that will be affected, followed by a series of
property:value pair (each pair is also called declarations is also
called the declaration block
Overview
Selector { property : value; property2: value2; }
em { color: red; }
CSS Syntax p{
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
Selector
Every CSS rule begins with a selector
CSS Syntax The selector identifies which element of elements in the HTML
document will be affected by the declarations in the rule
Many ways to write selectors
Properties
Each individual CSS declaration must contain a property
CSS Syntax
The CSS2.1 recommendation defines over a hundred different
property names
Properties
Property Property
type
Fonts Font
Font-family
CSS Syntax Font-size
Font-style
Font-weight
@font-face
Text Letter-spacing
Line-height
Text-align
Text-decoration
Text-indent
Properties
Property Type Property
Color and Background
Background Background-color
Background-image
Background-position
Background-repeat
CSS Syntax Box-shadow
Color
opacity
borders Border
Border-color
Border-width
Border-style
Border-top, border-left, ….
Border-image
Border-radius
Properties
Property Type Property
Spacing Padding
Padding-bottom, padding-left, …
Margin
Margin-bottom, margin-left, ….
sizing Height
CSS Syntax Max-height
Max-width
Min-height
Min-width
width
Layout Bottom, left, right, top
Clear
Display
Float
Overflow
Position
Visibility
Properties
Property Property
Type
lists List-style
List-style-image
List-style-type
effectts Animation
CSS Syntax Filter
Perspective
Transform
transition
Values
The unit of any given value is dependent upon the property
CSS Syntax Some property values are from a predefined list of keywords.
Others are values such as length measurements, percentages,
numbers without units, color values, and URLs
Colors
Name
Hexadecimal
CSS Syntax RGB
RGBa
HSL
Relative and absolute Units
Relative
Px
Em
%
CSS Syntax Vw, vh
Absolute
In
Cm
pt
Inline Styles
Inline styles are style rules placed within an HTML element via the
Location of style attribute
Using inline styles is generally discouraged
Styles
Handy for quickly testing out a style change
<h2 style=“font-size: 24pt;> Review </h2>
Embedded Style Sheet
Also called internal style are style rules placed within the <style>
element (inside the <head> element of an HTML document)
<head>
<style>
Location of h1 { font-size: 24pt; }
Styles h2 { font-size: 18pt;
font-weight: bold;
}
</style>
</head>
External Style Sheet
External style sheets are style rules placed within an external text
file with the .css extension
Location of <head>
Styles …..
<link rel=“stylesheet” href=[Link]”/>
…..
</head>
External style sheet
Location of Three different types of style sheets:
Styles 1. Author-created style sheets
2. User style sheets
3. Browser style sheets
HTML DOM Tree
<html>
<head> <body>
<meta> <title> <h1> <h2> <p> <img> <h3> <div> <div> <p>
Selectors
<a> <strong> <p> <p> <small>
<time>
Element Selectors
Selectors Element selectors select all instances of a given HTML element.
em { color: red; }
Class Selectors
A class selector allows you to simultaneously target different
Selectors HTML elements regardless of their position in the document tree
using the same class attribute value.
.first { color: yellow; }
ID Selectors
An id selector allows you to target a specific element by its id
Selectors attribute regardless of its type or position
#latestComment { color: red; }
Attribute Selectors
An attribute selector provides a way to select HTML elements
Selectors either by the presence of an element attribute or by the value of
an attribute
[title] {….}
Attribute Selectors
Selector Matches
[] A specific attribute
[=] A specific attribute with a specific value
Selectors [~=] A specific attribute whose value matches at least one of the words
in a space delimited list of words.
[^=] A specific attribute whose value begins with a specified value.
[*=] A specific attribute whose value contains a substring.
[$=] A specific attribute whose value ends with a specified value.
Pseudo-Element and Pseudo-Class Selectors
A pseudo-element selector is a way to select something that does
not exist explicitly as an element in the HTML document tree but
Selectors which is still a recognizable selectable object.
A pseudo-class selector does apply to an HTML element, but
targets either a particular state or, in CSS3 , a variety of family
relationships
Pseudo-Classes and Elements
• Pseduo-Classes • Pseudo-Elements
• a:link • ::first-letter
• a:visited • ::first-line
• :hover • ::before
Selectors • :active • ::after
• :focus • ::marker
• :checked
• :first-child
Contextual Selectors
Selector Matches Example
Descendant A specified element that is contain Div p
somewhere within another specified Selects a <p> element that is
element contained somewhere within a
<div> element
child A specified element that is a direct Div>p
Selectors child of the specified element Select a <p> element that is a
child of a <div> element.
Adjacent A specified element that is a the next Article+p
sibling sibling (i.e., comes directly after) of Selects the first <p> after any
the specified element <article>
General A specific element that shares the Article~p
sibling same parent as the specified element. Selects all the <p> elements that
share the same parent as the
<article>
CSS
The “Cascade” in CSS refers to how conflicting rules are handled
The downward movement of water down a cascade is meant to be
The Cascade: analoguous to how a given style rule will continue to take
precedence with child elements
How Style
CSS uses the following cascade principles to help it deal with
Interact conflicts:
Inheritance
Specificity
location
Inheritance
Many CSS properties affect not only themselves but their
The Cascade: descendants as well
How Style Inheritable:
Font, color, list, and text properties
Interact
Not inheritable:
Layout, sizing, border, background, and spacing properties