Web Design and

development
Lecture 5
Course Instructor: Wardah Mahmood
Email Id: wardah.mahmood@riphah.edu.pk
CSS revision
• Cascading Style Sheets (CSS)
• Used to describe the presentation of documents
• Define sizes, spacing, fonts, colors, layout, etc.
• Improve content accessibility
• Improve flexibility
• Designed to separate presentation from content
• Due to CSS, all HTML presentation tags and attributes are deprecated, e.g. font,
center, etc.
Why CSS?
• Some CSS styles are inherited and some not.
• Text-related and list-related properties are inherited - color, font-size, font-family,
line-height, text-align, list-style, etc
• Box-related and positioning styles are not inherited - width, height, border,
margin, padding, position, float, etc.
• <a> elements do not inherit color and text-decoration
Style sheet syntax
• Stylesheets consist of rules, selectors, declarations, properties and values

• Selectors are separated by commas

• Declarations are separated by semicolons
• Properties and values are separated by colons

h1,h2,h3 { color: green; font-weight: bold; }

Selectors
• Selectors determine which element the rule applies to.

.header a { color: green }

#menu>li { padding-top: 8px }

a:hover { color: red; }

p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }
Values in the CSS Rules
• Colours are set in RGB format (decimal or hex):
Example: #a0a6aa = rgb(160, 166, 170)

• Predefined colour aliases exist: black, blue, etc.

• Numeric values are specified in:
Pixels, ems, e.g. 12px , 1.4em
Points, inches, centimeters, millimeters
E.g. 10pt , 1in, 1cm, 1mm
Percentages, e.g. 50%
CSS Cascade (Precedence)
• Inline CSS ( HTML style attribute ) overrides CSS rules in style tag and CSS file
• A more specific selector takes precedence over a less specific one
• Rules that appear later in the code override earlier rules if both have the same
specificity.
• A CSS rule with !important always takes precedence.
CSS Specificity
• Specificity is usually the reason why your CSS-rules don't apply to some elements,
although you think they should. Every selector has its place in the specificity
hierarchy. If two selectors apply to the same element, the one with higher
specificity wins.

• Specificity determines, which CSS rule is applied by the browsers.

• Every selector has its place in the specificity hierarchy.
• If two selectors apply to the same element, the one with higher specificity wins.
Pseudo-classes
• A pseudo-class is used to define a special state of an element.
• For example, it can be used to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

selector:pseudo-class {
    property:value;
}

https://www.w3schools.com/css/css_pseudo_classes.asp
Pseudo-elements
• A CSS pseudo-element is used to style specified parts of an element.
• For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

selector::pseudo-element {
    property:value;
}

https://www.w3schools.com/css/css_pseudo_elements.asp
How to measure specificity?
• Memorize how to measure specificity. “Start at 0, add 1000 for style attribute,
add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for
each element name or pseudo-element. So in

body #content .data img:hover

The specificity value would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for
.data, 10 for :hover, 1 for body and 1 for img.” [CSS Specificity]
How to measure specificity?
• Alternative way: “Count the number of ID attributes in the selector (= a). Count
the number of other attributes and pseudo-classes in the selector (= b). Count
the number of element names and pseudo-elements in the selector (= c).
Concatenating the three numbers a-b-c gives the specificity.

• https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-k
now
/

• Let’s try some examples.

CSS inheritance
• Styles can be inherited from a parent.
• Some styles, like font family, text-alignment etc., are automatically inherited by
child elements from their parent element (i.e. by an element contained inside
another one).
• Others are not automatically inherited.
• However, you can make an element inherit styles from its parent.
CSS: Controlling inheritance
• CSS provides three special values to handle inheritance:
• inherit : This value sets the property value applied to a selected element to be
the same as that of its parent element.
• initial : This value sets the property value applied to a selected element to be the
same as the value set for that element in the browser's default style sheet. If no
value is set by the browser's default style sheet and the property is naturally
inherited, then the property value is set to inherit instead.
• unset : This value resets the property to its natural value, which means that if the
property is naturally inherited it acts like inherit, otherwise it acts like initial.
CSS positioning
• Position: Defines the positioning of the element in the page content flow. The
value is one of:
• static (default)
• relative – relative position according to where the element would appear with
static position
• absolute – position according to the innermost positioned parent element
• fixed – same as absolute, but ignores page scrolling
Static
• This is the default for every single page element. Different elements don't have
different default values for positioning, they all start out as static. Static doesn't
mean much; it just means that the element will flow into the page as it normally
would.
Relative
• An element with position: relative; is positioned relative to its normal position.
• Setting the top, right, bottom, and left properties of a relatively-positioned
element will cause it to be adjusted away from its normal position. Other content
will not be adjusted to fit into any gap left by the element.
Absolute
• This is a very powerful type of positioning that allows you to literally place any
page element exactly where you want it. You use the positioning attributes top,
left, bottom. and right to set the location. 

• The trade-off (and most important thing to remember) about absolute

positioning is that these elements are removed from the flow of elements on the
page.
Fixed
• An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.
CSS Float
• float: The element “floats” to one side.
• left: Places the element on the left and following content on the right.
• right: Places the element on the right and following content on the left.
CSS clear
• Sets the sides of the element where other floating elements are NOT allowed
• Used to "drop" elements below floated ones or expand a container, which
contains only floated children
• Possible values: left, right, both
• Clearing floats
• additional element (<div>) with a clear style