Programming in Practical Engineering
Languages
Chapter 3 : CSS Langauge
BURKINA INSTITUTE OF TECHNOLOGY
Electrical Engineering
(E.E)
Academic year : 2024-2025
Semester 3
26 octobre 2024
Course outline
1 What is CSS
2 CSS syntax
3 CSS Selectors
4 CSS Advanced elements
5 Applications
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 2 / 27
Quote
A programming language is a convention for giving commands to a
computer. It’s not supposed to be obscure, weird and full of
subtle traps...
Dave Small
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 3 / 27
1. What is CSS
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 4 / 27
1. What is CSS
1.1. CSS solved a big problem
HTML was NEVER intended to contain tags for formatting a web
page!
HTML was created to describe the content of a web page
When tags like <font>, and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web
developers.
To solve this problem, the W3C created CSS.
CSS removed the style formatting from the HTML page!
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 5 / 27
1. What is CSS
1.2. CSS is :
CSS stands for Cascading Style Sheets
CSS is the language we use to style a Web page.
CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
CSS is used to define styles for your web pages, including
the design, layout and variations in display for different
devices and screen sizes.
External stylesheets are stored in CSS files
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 6 / 27
1. What is CSS
1.3. CSS Demo
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 7 / 27
2. What is CSS
1.4. CSS Example
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 8 / 27
2. CSS syntax
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 9 / 27
2. CSS syntax
2.1. Syntax
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 10 / 27
2. CSS syntax
2.2. Explanation
A CSS rule consists of a selector and a declaration block.
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations
separated by semicolons.
Each declaration includes a CSS property name and a value,
separated by a colon.
Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 11 / 27
2. CSS syntax
2.3. Example
In this example all <p> elements will be center-aligned, with a
red text color:
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 12 / 27
2. CSS syntax
2.3.1. Example explained
p is a selector in CSS (it points to the HTML element you
want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 13 / 27
2. CSS syntax
2.4. How to add CSS on HTML?
There are three different ways to add CSS styles to HTML
document
Inline CSS : Use the style attribute on HTML element to add
styles to the web page. It is used for small projects.
Internal CSS: Place the CSS styles within a <style> tag
inside the HTML file, usually inside the <head> section.
External CSS: Create a separate CSS file with a .css
extension and link this file to your HTML file using the
<link> tag.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 14 / 27
2. CSS syntax
2.4.1. Add CSS on HTML: examples
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 15 / 27
3. CSS Selectors
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 16 / 27
3. CSS Selectors
3.1. Definition
CSS selectors are used to find (or select ) the HTML elements
you want to style.
We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id,
class)
Combinator selectors (select elements based on a
specific relationship between them)
Pseudo-class selectors (select elements based on a
certain state)
Pseudo-elements selectors (select and style a part of an
element)
Attribute selectors (select elements based on an
attribute or attribute value)
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 17 / 27
3. CSS Selectors
3.2. The CSS element selector
The element selector selects HTML elements based on the
element name.
Here, all <p> elements on the page will be center-aligned,
with a red text color:
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 18 / 27
3. CSS Selectors
3.3. The CSS element selector examples
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 19 / 27
4. HTML Basic elements
3.2.1. 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.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 20 / 27
4. HTML Basic elements
3.2.2. 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.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 21 / 27
4. HTML Basic elements
3.2.3. The CSS universal selector
The universal selector (*) selects all HTML elements on the
page.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 22 / 27
4. HTML Basic elements
3.2.4. The CSS grouping selector
The grouping selector selects all the HTML elements with the
same style definitions.
Look at the following CSS code (the h1, h2, and p elements
have the same style definitions ):
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 23 / 27
4. CSS Basic elements
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 24 / 27
4. CSS Basic elements
3.1. 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.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 25 / 27
6. Applications
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 26 / 27
==END==
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 27 / 27
