CSS CSS VERSIONS
▪ CSS (Cascading Style Sheets) is a stylesheet language developed by the World ▪ Early Versions
Wide Web Consortium (W3C), with major contributions from Håkon Wium Lie ▪ CSS1 (1996): Introduced basic styling features such as fonts, colors, margins, padding,
(who proposed it in 1994) and Bert Bos. and the box model.
▪ CSS2 (1998): Expanded with advanced selectors, positioning, and media types for print
▪ CSS is a W3C standard for describing the appearance of HTML elements.
and screen.
▪ With CSS, you can control how a website looks and feels. You get to choose the ▪ CSS 2.1 (2011): Corrected inconsistencies in CSS2 and became the most widely
fonts, colors, and how the page is organized. supported standard across browsers.
▪ It is often compared to the design of a house – where HTML is the foundation, CSS ▪ CSS3 and Beyond
is the style that makes everything look appealing. ▪ CSS3 (2000s–2010s): Released in modular form instead of a single specification.
Introduced key features like media queries, Flexbox, Grid layout, animations, and
transformations, which revolutionized responsive and interactive web design.
BENEFITS OF CSS CSS SYNTAX
▪ CSS is written as a rule set, which consists of a selector and a declaration block. The
1. Improved control over formatting : CSS provides finer and more powrful basic syntax of CSS is as follows:
control over presentation than HTML alone.
▪ The selector is a targeted HTML element or elements to which we have to apply styling.
2. Improved site maintainability : all styles can be placed in a single CSS file. ▪ The Declaration Block or " { } " is a block in which we write our CSS.
3. Improved accessibility: CSS keeps design separate from content. Screen
readers and accessibility tools can work better, improving the experience for
users and disabilities.
4. Improved Page Download Speed : since styles are centralized in a CSS file,
individual HTML pages are smaller. Browser download CSS once, then apply it
across pages, making the site load faster.
5. Improved Output flexibility : CSS allows responsive design(adapts pages for
different devices and screen sizes). Makes it easier to target different output
media(screen, print, mobile, etc.)
▪ Selectors : every CSS rule begins with a selector. The selector identifies which
element or elements in the HTML document will be effected by the declarations in the
rule.
▪ Properties: Properties are the aspects of the selected elements you want to style (like
color, width, height, etc.).
▪ Values : The value can take various forms depending on the property, such as a single
integer, keyword, function, or a combination of different items; some values have units,
while others do not.
▪ These are predefined text values, such as auto, none, inherit, initial, unset, static,
relative, absolute, fixed, sticky, block, inline, flex, grid, red, blue, bold, normal, etc.
▪ There are multiple ways of specifying a unit of measurement. Some are relative
measures and some are absolute.
▪ Relative units are those based on the value of something else, such as the size of parent
element.
▪ Absolute units are the once those have a real-world size.
LOCATION OF STYLES
▪ CSS styles can be located in three primary places in relation to an HTML
* Pixels (px) are relative to the viewing document:
device. For low-dpi devices, 1px is one 1. External Stylesheets: This is the most common and recommended method. CSS
device pixel (dot) of the display. For rules are written in a separate file with a .css extension (e.g., [Link]). This file
printers and high resolution screens 1px is then linked to the HTML document within the <head> section using the <link>
implies multiple device pixels. tag:
<link rel="stylesheet" href="[Link]">
2. Internal or Embedded Stylesheets: CSS rules are embedded directly within the
HTML document inside a <style> tag, typically placed within the <head> section.
The em and rem units are This is suitable for single HTML pages with unique styles.
practical in creating
perfectly scalable layout! <head>
* Viewport = the browser <style>
window size. If the viewport
is 50cm wide, 1vw = 0.5cm. body {
background-color: lightblue;
}
</style>
</head>
ELEMENT SELECTORS
▪ Inline Styles: CSS properties are applied directly to individual HTML elements ▪ CSS element selector selects and styles specific HTML elements. The element
using the style attribute. This is generally discouraged as it mixes content and selector is defined by simply using the element's name in the stylesheet.
presentation, making maintenance difficult.
▪ You can select a group of elements by separating the element names with commas.
<p style="color: blue; font-size: 16px;">This text has inline styles.</p>
▪ You can select all elements using the universal element selector, which is
*(asterisk) character.
▪ The syntax for the element selector is as follows:
SELECTORS
▪ CSS Selectors are used to select the HTML elements you want to style on a web
page. They allow you to target specific elements or groups of elements to apply
styles like colors, fonts, margins, and more.
▪ The element or elements that are selected by the selector are referred to as
subject of the selector.
▪ Different types of selectors are :
1. Element selectors
2. Class selectors
3. Id Selectors
4. Attribute Selectors
5. Pseudo-Element and Pseudo-class Selectors
6. Contextual Selectors
CLASS SELECTOR ID SELECTORS
▪ If a series of HTM elements have been labelled with the same class attribute value, ▪ CSS ID selector selects an element with a specific value for its id attribute. It is
then you can target them for styling using a class selector, which takes the form : denoted by the "#" (hash) symbol.
period(.) followed by the class name.
▪ Id selector should only be used when referencing a single HTML element since an
▪ The syntax for the class selector is as follows: id attribute can only be assigned to a single HTML element.
▪ The syntax for the ID selector is as follows:
ATTRIBUTE SELECTORS
▪ CSS Attribute Selectors is used to select HTML elements with specific attribute or
value for attribute. Attribute selectors are enclosed in square brackets [ ] and can
take various forms.
▪ As below
▪ you can see how to select an HTML element based on attribute in CSS.
▪ Syntax :
▪ You can also specify the element with an attribute having a specific value.
▪ Anchor Pseudo-classes
PSEUDO-CLASS SELECTOR
▪ A pseudo-class is used to define a special state of an element.
▪ It does not create new elements, it just changes style based on conditions or user
interaction.
▪ For example, it can be used to:
▪ Style an element when a user moves the mouse over it
▪ Style visited and unvisited links differently
▪ Style an element when it gets focus
▪ Style valid/invalid/required/optional form elements
▪ The syntax of pseudo-classes:
▪ Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective! a:active MUST come after a:hover in the CSS definition in order to be
effective! Pseudo-class names are not case-sensitive.
▪ This is known as the LVHA order.
▪ If you don’t follow this order, some pseudo-classes can override others because of CSS
cascade rules.
▪ Simple tooltip hover
Pseudo-classes and HTML Classes
▪ Pseudo-classes can be combined with HTML classes:
▪ When you hover over the link in the example, it will change color:
▪ Hover on div The :first-child Pseudo-class
▪ The :first-child pseudo-class matches a specified element that is the first child of
another element.
▪ the selector matches any <p> element that is the first child of any element:
▪ Match the first <i> element in all <p> elements
▪ Match all <i> elements in all first child <p> elements
PSEUDO-ELEMENT SELECTORS
▪ A CSS pseudo-element is used to style specific 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 an element
▪ Style the markers of list items
selector:pseudo-element {
▪ The syntax of pseudo-elements:
property: value;
}
▪ The : first-line pseudo-element is used to add a special style to the first line of a text.
▪ The : first-line pseudo-element can only be applied to block-level elements.
▪ The following properties apply to the ::first-line pseudo-element:
▪ font properties
▪ color properties
▪ background properties
▪ word-spacing
▪ letter-spacing
▪ text-decoration
▪ vertical-align
▪ text-transform
▪ line-height
▪ clear
▪ Note: The ::first-letter pseudo-element can only be applied to block-level
elements.
▪ The following properties apply to the ::first-letter pseudo- element:
▪ font properties
▪ color properties
▪ background properties
▪ margin properties
▪ padding properties
▪ border properties
▪ text-decoration
▪ vertical-align (only if "float" is "none")
▪ text-transform
▪ line-height
▪ float
▪ clear
CONTEXTUAL SELECTORS Descendant Combinator :
▪ The descendant combinator matches all elements that are descendants of a specified
▪ A contextual selector( also called combinators) allows you to select elements element.
based on their ancestors, descendants, or siblings.
▪ Not restricted to direct children — it selects grandchildren, great-grandchildren, etc.
▪ It selects elements based on their context or relation to other elements in the
▪ The following example selects all <p> elements inside <div> elements:
document tree.
▪ A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
▪ There are four different combinators in CSS:
▪ Descendant combinator (space)
▪ Child combinator (>)
▪ Next sibling combinator (+)
▪ Subsequent-sibling combinator (~)
Child Combinator (>) ▪ Next Sibling Combinator (+)
▪ The child combinator selects all elements that are the children of a specified element. ▪ The next sibling combinator is used to select an element that is directly after another
specific element.
▪ Matches only the direct children.
▪ Sibling elements must have the same parent element, and "adjacent" means
▪ Does not select deeper nested elements (grandchildren, etc.). "immediately following".
▪ The following example selects all <p> elements that are children of a <div> element: ▪ The following example selects the first <p> element that are placed immediately after
<div> elements:
Subsequent-sibling Combinator (~): THE CASCADE: HOW STYLES INTERACT
▪ The subsequent-sibling combinator selects all elements that are next siblings of a
specified element. What is the Cascade in CSS?
▪ The following example selects all <p> elements that are next siblings of <div> ▪ The cascade is the decision-making process that determines which CSS rule actually
elements: applies to an element when there are multiple conflicting styles.
Since CSS stands for Cascading Style Sheets, this concept is at the very core of how
styling works.
▪ The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an
HTML element.
Sources of StylesCSS values can come from different origins:
▪ Default browser Styles → Default styles given by the browser (e.g., links are blue, body
has margin, <h1> is bold, <a> is blue and underlined).
▪ User-defined Styles → styles that the end-user (website visitor) can configure in their
browser for accessibility (for example, increasing font size or setting high-contrast
themes).
▪ Author-created Styles → Styles written by the web developer (in your CSS file, <style>,
or inline).
▪ The normal order of precedence is:
Author styles > User styles > Browser defaults
▪ what the web developer writes usually overrides user settings and browser defaults.
▪ The browser uses the cascade algorithm to resolve conflicts.
▪ CSS uses following cascade principles to help deal with conflict : inheritance,
specificity, and location.
Inheritance :
▪ Many CSS properties are inheritable, meaning child elements automatically take the
computed value from their parent.
▪ Examples of inheritable properties : color, font-family, font-size, line-height,
visibility.
▪ Non-inheritable properties include : margin, padding, border, background.
▪ You can force inheritance with the keyword:
Specificity:
▪ Specificity is how the browser determines which style rule takes precedence when
p{ more than one style rule could be applied to the same element.
border: inherit;
▪ In CSS, the more specific the selector, the more it takes precedence(i.e., override the
margin: inherit;
previous definition.
}
▪ Specificity is calculated based on the type of selector:
▪ Important: inheritance only applies when the property supports it. ▪ Inline styles → highest weight (1000).
▪ IDs → strong weight(0100).
▪ Classes, attributes, pseudo-classes → medium weight(0010).
▪ Element selectors, pseudo-elements → lowest weight(0001).
2. Between multiple <style> blocks
<style>
p { color: red; }
</style>
<style>
p { color: blue; }
</style>
▪ Same specificity. Since the second <style> block appears later in the HTML, <p>
will be blue.
LOCATION :
▪ Finally when inheritance and specificity cannot determine style preference, the
principle of location will be used.
▪ The principle of location is that when rules have the same specificity, then the latest 3. Between multiple external CSS files
are given more weight.
▪ If two selectors apply to the same element and their specificity is identical, then <link rel="stylesheet" href="[Link]">
the browser applies the rule that appears later in the cascade (source order).
<link rel="stylesheet"href="[Link]">
1. Within the same stylesheet:
If [Link] and [Link] both have the same rule:
p { color: red; }
p { color: blue; }
p { color: red; } /* in [Link] */
Both have the same specificity (0,0,0,1) → the second one comes later, so the <p>
p { color: blue; } /* in [Link] */
will be blue.
Then <p> will be blue, because [Link] is loaded after [Link].
4. Inline styles
Inline styles are not “later”, they actually carry a higher specificity:
<p style="color: green;">Hello</p>
This (1,0,0,0) beats all stylesheet rules unless the stylesheet uses !important.
p { color: red !important; }
In this case, the stylesheet wins, because !important overrides the normal inline style.
THE BOX MODEL
▪ Everything in CSS has a box around it, and understanding these boxes is key to being
able to create more complex layouts with CSS, or to align items with other items.
▪ The CSS Box model defines how elements are rendered and how their dimensions are
calculated.
▪ It describes the structure of an element as a rectangular box that has content, padding,
a border, and a margin.
▪ The box model consists of four main components, which are:
Content → The innermost area (text, image, video, etc.)
Padding → Clears space around the content (inside the border).
Border → Wraps around the content + padding.
Margin → Clears space outside the border, separating the element from others.
background:
▪ the background color or image of an element fills an element out of its border.
How background works in the box model:
1. Content + Padding + Border area → covered by background
▪ The background-color or background-image fills the content area and the padding area, and it
extends underneath the border.
▪ But the margin area is always transparent (background does not extend intomargin).
2. Border appearance
▪ Even though the background extends under the border, you will not see it if the border is solid
(the border color overrides it).
▪ If the border is transparent or partially transparent, the background shows through.
3. Margin
▪ Margins never show the element’s background. They are always transparent and show the
parent’s background instead.
Borders:
▪ The border sits between the padding and the margin.
▪ It wraps the content + padding, enclosing the element visually.
▪ It is visible by default only if you set a border style (e.g., solid, dashed, double etc.).
▪ Border thickness contributes to the element’s total size (unless box-sizing: border-box
is used).
Padding Properties:
▪ CSS provides four individual properties and one shorthand:
▪ padding-top → space between content & top border
▪ padding-right → space between content & right border
▪ padding-bottom → space between content & bottom border
▪ padding-left → space between content & left border
▪ padding (shorthand) → sets padding for all sides in one line
.box1 .box3 {
{ padding: 10px 15px 20px; /* top = 10px,
padding: 20px; /* all 4 sides = 20px */ left/right = 15px, bottom = 20px */
} }
.box2 { .box4 {
padding: 10px 20px; /* top/bottom = 10px, padding: 5px 10px 15px 20px;/* top = 5px, right =
left/right = 20px */ 10px, bottom = 15px, left = 20px */
} }
MARGINS AND PADDINGS:
▪ Margins and padding are essential properties for adding white space to a web page,
which can help differentiate one element from another.
▪ Properties of Margin
margin-top → space above the element
margin-right → space to the right of the element
margin-bottom → space below the element
margin-left → space to the left of the element
margin (shorthand) → sets all four margins at once
.box
{
margin: 20px; /* All four sides */
margin: 10px 20px; /* top/bottom = 10px, left/right = 20px */
margin: 10px 15px 20px; /* top = 10px, left/right = 15px, bottom = 20px */
margin: 5px 10px 15px 20px;/* top, right, bottom, left */
}
BOX DIMENSIONS:
Collapsing margins: ▪ In CSS, every element is considered as a box.
▪ In CSS, the adjoining margins of two or more boxes(which might or might not be ▪ The dimensions of the box depend on its content, padding, border, and margin.
siblings) can combine to form a single margin. Margins that combine this way
▪ These dimensions determine how much space the element will occupy in a webpage
are said to collapse, and the resulting combined margin is called a collapsed
margin. and how it is separated from other elements.
▪ Width and Height
▪ This only happens with vertical margins, never with horizontal ones.
▪ By default, the box size is determined by its content.
▪ The largest margin value of the elements will be displayed, while the smaller ▪ CSS allows you to explicitly set:
margin value will be collapsed to zero.
width: 300px;
height: 200px;
▪ These values control only the content area (not including padding, border, or margin).
▪ Padding:
▪ Adds space inside the box, between content and border.
▪ Increases the total size of the box (unless using box-sizing: border-box).
▪ Border:
▪ Surrounds the padding and content.
▪ Its thickness adds to the total box dimensions.
▪ Margin:
▪ Adds space outside the border, separating the element from its neighbors.
▪ Margins do not affect the element’s size but affect spacing between boxes.
▪ Calculating Total Box Size
▪ The total amount of space an element takes up is:
▪ True element width=width+padding-left+padding-right+border-left+border-right+margin-
left+margin-right
▪ True element height=height+padding-top+padding-bottom+border-top+border-bottom+margin-
top+margin-bottom
p{
border: solid 1px red; • width and height are set by content.
margin: 30px; • padding increases inner spacing.
padding: 30px; • border outlines the box.
} • margin separates the element from others.
▪ By default, width and height apply only to content.
▪ To include border and padding in these values, use:
box-sizing: border-box;
content-box (default) :
• The width and height apply only to the content
area.
• Padding and border are added outside the
given width/height
So the total size =
width + padding + border
height + padding + border
Overflow in One Direction
border-box: overflow-x → controls horizontal overflow
• The width and height include content + (left/right).
padding + border. overflow-y → controls vertical overflow
• Margin is still added outside as usual. (top/bottom).
So the total size =
width (already includes content +
padding + border)
Font :
CSS TEXT STYLING ▪ The CSS font property is a shorthand property for:
▪
▪
font-style : font-style: normal|italic|oblique|initial|inherit;
font-variant : font-variant: normal|small-caps|initial|inherit;
▪ font-weight : font-weight: normal|bold|bolder|lighter|number|initial|inherit;
▪ CSS provides two types of properties that affect text. ▪ font-stretch: font-stretch: ultra-condensed|extra-condensed|condensed|semi
1. Font properties : affect the font and its appearance. condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|initial|inherit;
▪ font-size: font-size:medium|xx-small|x-small|small|large|x-large|xx-
2. paragraph properties : affect the alignment, spacing, and structure of the text large|smaller|larger|length|initial|inherit;
block. ▪ line-height : line-height: normal|number|length|initial|inherit;
▪ font-family : font-family: family-name|generic-family|initial|inherit;
▪ Rules for the CSS Font Shorthand Property
▪ The font-size and font-family values are required. If one of the other values is missing, their default
value are used.
▪ If defined, font-style, font-variant and font-weight must precede font-size.
▪ If defined, line-height must immediately follow font-size, preceded by "/", like this: 15px/30px.
▪ font-family must be the last value specified.
▪ Font properties : ▪ Paragraph properties:
▪ letter-spacing: normal|length|initial|inherit;
▪ line-height: normal|number|length|initial|inherit;
▪ list-style-image: none|url()|initial|inherit;
▪ list-style-type: value;
▪ text-align: left|right|center|justify|initial|inherit;
▪ text-decoration: text-decoration-line text-decoration-color text-decoration-style text-
decoration-thickness|initial|inherit;
▪ text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
▪ vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-
bottom|initial|inherit;
▪ text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
End of module 1