Scribd
Upload
7 views7 pages

Chpter 3 - CSS

This document outlines Chapter Three of Cascading Style Sheets (CSS), providing an overview of CSS, its syntax, and various selectors. It discusses the advantages of using CSS, including separation of content and design, faster page load times, and improved user experience. Additionally, it explains three methods for implementing CSS: inline styles, internal styles, and external styles.

Uploaded by

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

Chpter 3 - CSS

This document outlines Chapter Three of Cascading Style Sheets (CSS), providing an overview of CSS, its syntax, and various selectors. It discusses the advantages of using CSS, including separation of content and design, faster page load times, and improved user experience. Additionally, it explains three methods for implementing CSS: inline styles, internal styles, and external styles.

Uploaded by

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

6/30/2025

Outline

Woldia University
Institute of Technology (IoT)
School of Computing  Overview of CSS
Programming and Algorithm Development Chair  CSS Syntax
 CSS Selectors
Chapter Three: Cascading Style Sheet (CSS)  Three Ways to Use CSS
By  Style Properties
Derso M. (MSc in SE)
June 30, 2025  CSS Measuring Units (Reading Assignment)

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 3

Previous Chapter Overview Overview of CSS

 Overview of HTML  HTML elements  Cascading Style Sheets, fondly referred to as CSS, is a simple design
 HTML attributes
language intended to simplify the process of making web pages
 HTML tags presentable.
• Head Tag: <head> …. </head> • Global attributes
Metadeta tag,
• Specific attributes  CSS handles the look and feel part of a web page. Using CSS, you can
o
o Title tag,
• Event attributes control the color of the text, the style of fonts, the spacing between
o Link tag,  HTML Form Controls paragraphs, how columns are sized and laid out, what background
o Script • Text Input Controls images or colors are used, as well as a variety of other effects.
• Body Tag: <body> …. </body> • Checkboxes Controls
o Anchor Tag : <a> …. </a> • Radio Box Controls
o Table Tag : <table> …. </table> • Select Box Controls  Cascading Style Sheets (CSS) were established by the World Wide
o Thead, tbody, tr, th, tb, tcaption, tfoot, tsummary, • File Select boxes Web Consortium (W3C).
Image Tag : <img> • Hidden Controls
o
o Strong Tag: <strong>….. </strong> • Clickable Buttons
 The CSS specification allows for more control over the look, or style, of
o HTML List Tags: • Submit and Reset Button web pages or other XML files by providing a central location, or sheet,
o Ordered List : <ol> <li> …. </li> </ol> where you can define how certain HTML (Hyper-Text Markup
o UnOrdered List: <ul> <li> …. </li> </ul> Language) or XML (eXtensible Markup Language) tags are going to be
o Break Tag: <br /> interpreted by the browser.
o Horiozontal Line Tag : <hr />
 Styles are normally saved in extension .css files.

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 2 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 4
6/30/2025

Overview of CSS Advantages of CSS


 Why is it called Cascading?  Separation of Content and Design: CSS separates HTML structure from styling,
• The word "cascading" describes how multiple CSS rules for the same making code cleaner and more maintainable.
element are evaluated and prioritized to determine the final style. • Easier updates—change styling without modifying HTML.
The cascade follows a set of rules to resolve conflicts when multiple  Faster Page Load Time: External CSS files can be cached, reducing redundant
CSS declarations apply to the same element. styling code and making websites load faster.
• Improves website performance and speed.
 In CSS (Cascading Style Sheets), style inheritance is a mechanism  Responsive Web Design: CSS allows web pages to adapt to different screen sizes
that allows styles to be passed from a parent element to its children. using media queries.
This means that if you define a particular style property on an
element, that style can automatically apply to many of the child • Websites work well on desktops, tablets, and mobile devices.
elements contained within it, unless the child elements have their  Better User Experience: CSS improves readability, navigation, and aesthetics,
own overriding style definitions.
leading to better engagement.
• Properties That Inherit: Examples include font-family, color, and font-
size. These properties, when specified on a parent element, affect the • More user-friendly websites with consistent design.
child elements unless specifically overridden by the child element’s own
styles.  Reusability & Maintainability: One CSS file can be applied to multiple web pages,
• Properties That Do Not Inherit: Many box model properties like margin, reducing duplication.
border, padding, and width do not inherit from parent to child. Instead, • Easier maintenance - update styles in one place.
these properties need to be explicitly defined for each element as needed.
@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 5 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 7

Overview of CSS Advantages of CSS


 When there are multiple conflicting styles, CSS determines
which rule takes effect based on these factors:  Cross-Browser Compatibility: CSS ensures a website looks consistent across
different browsers (Chrome, Firefox, Edge, etc.).
• Source Order (Last Rule Wins): If two rules
• Avoids inconsistent design issues across devices.
have the same specificity, the one that appears
last in the CSS file is applied.  Flexibility & Advanced Styling: CSS provides powerful animations, transitions, and
effects.
• Specificity (More Specific Wins): CSS assigns a • Enhances modern UI/UX design without JavaScript.
weight to selectors, and the most specific rule is  Accessibility Improvements: CSS enables better readability and accessibility for
applied. users with disabilities.
• Helps create inclusive web designs
• Inline Styles (Highest Priority): Styles applied  Cost-Effective Development: Reduces time and effort needed for styling, leading to
directly to an element override styles from an faster development.
external or internal CSS file.
• Saves money for developers and companies.
• !important (Forces the Rule): Adding !important  Scalability for Large Projects: CSS frameworks like Bootstrap, Tailwind CSS help
makes a rule override all others (unless another manage large web applications efficiently.
!important rule has a higher specificity). • Supports scalable, modular development.

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 6 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 8
6/30/2025

CSS Syntax CSS Selectors


 A CSS comprises of style rules that are interpreted by the browser and 1. CSS Element Selector:
then applied to the corresponding elements in your document. A style
rule is made of three parts:  The element selector selects the HTML element by name.
 Selector: A selector is an HTML tag at which a style will be applied. This
could be any tag like <h1> or <table> etc.
 Property: A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color,
border, etc.
 Value: Values are assigned to properties. For example, color property can have
the value either red or #F1F1F1 etc

 Syntax:
selector { property: value }

 You can define a table border:


table{ border :1px solid #C00; }
@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 9 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 11

CSS Selectors CSS Selectors


2. CSS ID Selector:
 CSS selectors are used to select the content you want to style. Selectors  An id is always unique within the page so it is chosen to select a
are the part of CSS rule set. single, unique element.
 CSS selectors select HTML elements according to its id, class, type,  It is written with the hash character (#), followed by the id of the
attribute etc. element.

 There are several different types of selectors in CSS.


1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
6. Descendant Selectors
7. Child Selector
8. Attribute Selectors

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 10 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 12
6/30/2025

CSS Selectors CSS Selectors


3. CSS Class Selector: 5. CSS Group Selector:
 The class selector selects HTML elements with a specific class  The grouping selector is used to select all the elements with the
attribute. It is used with a period character. (full stop symbol) same style definitions.
followed by the class name.  Grouping selector is used to minimize the code. Commas are used
to separate each selector in grouping.

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 13 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 15

CSS Selectors CSS Selectors


4. CSS Universal Selector: 6. CSS Descendant Selector:
 The universal selector is used as a wildcard character. It selects all  Suppose you want to apply a style rule to a particular element only
the elements on the pages using *(Astrix) symbol. when it lies inside a particular element. As given in the following
example, the style rule will apply to <em> element only when it
lies inside the <ul> tag.
 Example: ul em { color: #000000; }
 Selects all levels of descendants (children, grandchildren, great-
grandchildren, etc.) of a specified element.
7. CSS Child Selectors
 There is one more type of selector, which is very similar to
descendants but have different functionality. Consider the
following example: body > p { color: #000000; }
 This rule will render all the paragraphs in black if they are a direct
child of the <body> element. Other paragraphs put inside other
elements like <div> or <td> would not have any effect of this rule.
 Selects only direct children of a specified element (not
grandchildren or deeper levels).
@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 14 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 16
6/30/2025

CSS Selectors Three Ways to Use CSS


8. CSS Attribute Selector:
1. Inline Style:
 You can also apply styles to HTML elements with particular
attributes. The style rule below will match all the input elements  To define an inline CSS style, we simply add the style attribute to
having a type attribute with a value of text: an (X)HTML element with the CSS declaration as the attribute
input[type="text"]{
value:
color: #000000; <element style="...style rules....">
}  Style is the attribute
 The advantage to this method is that the <input type="submit" />  Style rules are the value of style attribute is a combination of style
element is unaffected, and the color applied only to the desired declarations separated by semicolon (;)
text fields. There are following rules applied to attribute selector.
 p[lang] - Selects all paragraph elements with a lang attribute.  Example:
 p[lang="fr"] - Selects all paragraph elements whose lang attribute
has a value of exactly "fr". <h1 style ="color:#36C;"> This is inline CSS </h1>
 p[lang~="fr"] - Selects all paragraph elements whose lang attribute
contains the word "fr".
 p[lang|="en"] - Selects all paragraph elements whose lang attribute
contains values that are exactly "en", or begin with "en-"
@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 17 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 19

Three Ways to Use CSS Three Ways to Use CSS

2. Embedded / Internal CSS -The <style> Element:


 You can put your CSS rules into an HTML document using the
<style> element. This tag is placed inside the <head>...</head> tags.
 We can add CSS code in any combination of three different Rules defined using this syntax will be applied to all the elements
ways: available in the document. Here is the generic syntax:
1. Inline Style - CSS code is placed directly into HTML element • type is the attribute
within the <body> section of a web page.
2. Internal Style Sheet - CSS code is placed into a separate, • text/css is the value which
dedicated area within the <head> section of a web page. specifies the style sheet
3. External Style Sheet - CSS code is placed into a separate computer language as a content-type
file and then linked to a web page.
(MIME type). This is a
required attribute.

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 18 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 20
6/30/2025

Three Ways to Use CSS Style Properties

3. External CSS -The <link> Element 2. Box Model Properties


 The <link> element can be used to include an external stylesheet • margin: Controls the space
file in your HTML document. outside of an element's
 An external style sheet is a separate text file with .css extension. border
You define all the Style rules within this text file and then you can • (e.g., margin: 10px;).
include this file in any HTML document using <link> element. • padding: Controls the space
between an element's
border and its content
• href is the attribute • (e.g., padding: 20px;).
• URL specifies the style • border: Specifies the border
around an element
sheet file having Style o (e.g., border: 1px solid
rules. This attribute is a #000;).
required. • width and height: Set the
width and height of an
element
o (e.g., width: 100px;).

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 21 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 23

Style Properties Style Properties


 CSS provides various style properties to control the appearance and
layout of elements. Below are some commonly used properties, 3. Layout Control
categorized by their function: • display: Determines how
an element is displayed on
the page
1. Text and Font Styling o (e.g., display: block;).
• font-family: Specifies the font for an element • position: Specifies the
• (e.g., font-family: Arial, sans-serif;). positioning method of an
• font-size: Controls the size of the text element
o (e.g., font-size: 16px;). o (e.g., position: absolute;).
• font-weight: Sets the weight (or thickness) of the font • flex: A shorthand property
for flex items that sets the
o (e.g., font-weight: bold;). grow, shrink, and basis
• color: Changes the text color (e.g., flex: 1; for flexbox
o (e.g., color: #333;). layouts).
• text-align: Aligns text within an element • grid: Defines a grid layout
o (e.g., text-align: center;). and is a shorthand for
• line-height: Adjusts the space between lines of text setting multiple grid
properties.
o (e.g., line-height: 1.5;).

@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 22 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 24
6/30/2025

Style Properties Conclusion


4. Visual Effects
• background-color: Sets the background color of an element
o (e.g., background-color: #EEE;).
• background-image: Specifies an image to use as the background of
an element
o (e.g., background-image: url('[Link]');).  CSS is essential for web design and responsiveness.
• opacity: Adjusts the opacity of an element, making it semi-  Different types of CSS (inline, internal, external) offer
transparent
o (e.g., opacity: 0.5;). flexibility.
• box-shadow: Adds shadow effects around an element's frame  Understanding selectors, box model, and positioning helps in
o (e.g., box-shadow: 2px 2px 4px #000;).
layout management.
5. Transitions and Animations  Flexbox and Grid simplify modern web layouts.
• transition: Allows property changes in CSS values to occur smoothly  Media queries make websites adaptable to various screen
over a specified duration
o (e.g., transition: all 0.3s ease;). sizes.
• animation: Lets you animate the transition from one CSS style
configuration to another
o (e.g., animation: slidein 3s ease-in;).
@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 25 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 27

Media Queries & Responsive Design


 What is Responsive Design?
• Responsive design makes web pages look good on all screen sizes
(desktop, tablet, mobile).
 Using Media Queries:
• Example
Thank You!!!
Question???
• If the screen width is 768px or smaller, the background changes.
 Techniques for Responsiveness:
• Use relative units (%, em, rem) instead of fixed pixels.
• Apply flexbox/grid for fluid layouts.
• Use media queries to adjust styles for different devices.
@ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 26 @ WDU: IoT: School of Computing: Programming and Algorithm Development Chair 2025 Cascading Style Sheet (CSS): Chapter 3 Slide 28

You might also like