CSS Basics
CS200: Web Development
Tunis Business School - 2023/2024
What is CSS?
CSS stands for Cascading Style Sheets.
It's a style language used to describe the look
and formatting of a document written in HTML.
CSS separates content (HTML) from presentation,
making websites visually appealing.
Why is CSS Important?
• Maintain a consistent look across a
Consistency website.
• Make web content adapt to different
Responsiveness screen sizes.
• Easily update the style without
Flexibility altering content.
The Beauty of CSS Design
CSS Zen Garden
CSS Syntax
CSS is organized into rules
that define how elements
should be styled. selector {
property: value;
Each rule consists of a
selector and a declaration }
block.
CSS Selectors
Selectors target HTML Element
type p { ... }
elements to apply selector
styles.
Class .highlight { ... }
selector
They can be based on
element types, classes,
IDs, and more. ID selector #header { ... }
CSS Properties and Values
Properties specify
what aspect of the
Property: font-
element to style. Property: color
size
• Value: red • Value: 16px
Values determine the
specific style to apply
to the property.
CSS Declaration Block
The declaration block is
enclosed in curly braces {}
selector {
and contains one or more
property-value pairs. property1: value1;
Multiple properties are property2: value2;
separated by semicolons.
}
CSS Selectors
Type Selector (Element Selector)
Selects elements
based on their HTML
tag names. h2 {
color: #ff6600;
It targets all instances }
of the specified HTML
tag.
Class Selector (.class)
Selects elements by
their class attribute.
.button {
background-color: #007bff;
}
Can be applied to
multiple elements
with the same class.
ID Selector (#id)
Selects a specific
element based on its
id attribute. #header {
font-size: 32px;
}
IDs should be unique
on a page, so it targets
only one element.
Attribute Selector ([attribute="value"])
Selects elements based
on their attributes and
input[type="text"] {
attribute values. border: 1px solid #ccc;
}
Useful for targeting
elements with specific
attribute values.
Universal Selector (*)
The universal selector
selects all HTML
elements on a web page. * {
margin: 0;
It is used to apply styles
}
globally.
Comments in CSS
You can add comments
to CSS using /* */.
/* This is a CSS
Comments are not visible
in the web page and are
comment */
used for documentation.
CSS Syntax Rules
CSS is not case-sensitive, but it's a convention to
use lowercase for properties and values.
Use a colon (:) to separate properties and values.
Use a semicolon (;) to separate multiple
property-value pairs in a declaration block.
Methods to Include CSS in HTML
Methods to Include CSS in HTML
Internal
Inline CSS (Embedded)
CSS
External CSS
Inline CSS
Inline CSS is applied
directly to individual <p style="color: blue;
HTML elements. font-size: 16px;">
This is a styled
paragraph.
Use the style </p>
attribute within
HTML tags.
Internal (Embedded) CSS <!DOCTYPE html>
<html>
<head>
<style>
Internal CSS is p {
color: green;
defined within the font-size: 18px;
}
HTML document </style>
using the </head>
<body>
<style> tag. <p>This is a styled
paragraph.</p>
</body>
</html>
External CSS
External CSS is defined in a
separate CSS file and linked
to the HTML document using
the <link> tag
External CSS
CSS file (styles.css) HTML file
p { <!DOCTYPE html>
<html>
color: red;
<head>
font-size: 20px; <link rel="stylesheet" type="text/css" href="styles.css">
} </head>
<body>
<p>This is a styled paragraph.</p>
</body>
</html>
Understanding <div> and <span>
Elements in HTML
Check src4/02_div-span
Introduction
<div> and <span> are non-semantic HTML
elements.
They are essential for structuring and styling web
content.
These elements are containers with different
purposes.
<div> Element
<div> is a block-level
container element.
<div id="header">
<h1>My Website</h1>
It is used to group and style <nav>...</nav>
larger sections of content. </div>
Often used for layout and
organization of content
<span> Element
<span> is an inline-level
container element.
<p>This is <span
It is used to style smaller class="highlight">importa
portions of text or content. nt</span> text.
</p>
Often used to apply styles or
scripting to specific elements
within a block.
CSS Properties
Color
Set the color of text, backgrounds, p {
and borders. /* Text color */
color: #333;
/* Background color */
Possible values: Keywords (e.g., background-color: #f2f2f2;
red, blue), HEX, RGB, RGBA /* Border color */
values, … border: 1px solid #ccc;
}
Color Reference:
https://www.w3schools.com/colo
rs/default.asp
Font
Define font h2 {
/* Font family */
font-family: "Arial", sans-serif;
family, size, /* Font size */
font-size: 24px;
/* Font style */
and style. }
font-style: italic;
Text
a {
Control text properties /* Text alignment */
like alignment and text-align: center;
decoration. /* Text decoration */
text-decoration: none;
}
text-align:
left|right|center|justify
Border
Style and width of element borders.
img {
border: border-width border-style border-color /* Border style and color */
border-top, border-right, border-bottom, border: 2px solid #007bff;
border-left }
border-style:
none|hidden|dotted|dashed|solid|double|gro
ove|ridge|inset|outset
Background
Set body {
/* Background image */
background-image:
background url("background.jpg");
/* Background color */
images and }
background-color: #f2f2f2;
colors.
Margin & padding
• Inner area of an
Padding element (inside
the border)
• Inner area of an
Margin element (outside
the border)
Margin
p { p {
margin-top: 100px; margin: 100px 150px
margin-right: 150px; 100px 80px;
margin-bottom: 100px; }
margin-left: 80px; /*shorthand property
} margin*/
Padding
p { p {
padding-top: 50px; padding: 50px 30px
padding-right: 30px; 50px 80px;
padding-bottom: 50px; }
/*shorthand property
padding-left: 80px;
padding*/
}
Width and Height
The width and height
properties determine the img {
dimensions of an element. width: 300px;
/* 300 pixels wide */
}
Possible values: Length
units, percentages,
keywords (e.g., auto).
Syling List
HTML
<ol> <ul>
<li>First item</li> <li>Item A</li>
<li>Second item</li> <li>Item B</li>
<li>Third item</li> <li>Item C</li>
</ol> </ul>
Basic Styling
ol {
Style the list list-style: upper-
roman;
marker and /* Indent the list */
margin-left: 30px;
indentation }
ul {
as needed. }
list-style: square;
List Item Styles
li {
Style the list /* Change text color */
color: #333;
items /* Make text bold */
font-weight: bold; /*}
themselves for
consistent
presentation.
List Hover Effects
ul:hover li {
Add hover /* Change background on
hover */
effects for background-color:
#f0f0f0;
interactive /* Change cursor on hover
*/
lists. cursor: pointer;}
Styling Table
HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Table Borders
table {
Use CSS properties border: 1px solid #000;
like border and border-collapse:
collapse;
border-collapse to }
add and control th, td {
table borders. border: 1px solid #000;
}
Table Backgrounds
th {
Set background background-color: #333;
colors or images }
color: #fff;
for table elements
td {
to enhance visual background-color:
appeal. #f0f0f0;
}
Table Text and Font Styles
th {
Control text }
font-weight: bold;
styling, including td {
font-family: Arial, sans-
font family, size, serif;
font-size: 14px;
and color within }
color: #333;
table cells.
Table Width and Alignment
table {
Adjust the width: 100%;
}
width of table
th, td {
columns and text-align: center;
align content }
within cells
Striped Tables
Create striped table
tr:nth-child(odd) {
rows for improved background-color: #f0f0f0;
readability using }
tr:nth-child(even) {
nth-child pseudo- }
background-color: #e0e0e0;
classes.
Hover Effects
Apply hover
effects to tr:hover {
background-color:
highlight rows #ffcc00;
}
when a user
hovers over them.
Styling Form
HTML
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your email">
<input type="submit" value="Submit">
</form>
Form Borders
input {
Use CSS border: 1px solid #333;
}
properties like
border to control input[type="submit"] {
border: none;
the appearance background-color: #333;
color: #fff;
of form elements }
Form Backgrounds
Set background input[type="text"] {
background-color: #f0f0f0;
colors for form }
elements to input[type="email"] {
background-color: #e0e0e0;
improve visual }
appeal
Text and Font Styles
Control text styling input[type="text"] {
within form font-family: Arial,
sans-serif;
elements, including font-size: 14px;
font family, size, color: #333;
}
and color
Focus and Hover Effects
input[type="text"]:focus,
Apply styles to input[type="email"]:focus {
form elements }
border: 2px solid #ffcc00;
when they are
input[type="submit"]:hover {
focused or hovered background-color: #444;
over for user }
color: #fff;
feedback
Styling Labels
Customize the
appearance of label {
font-weight: bold;
labels to color: #333;
improve the }
form's structure.
Customizing Buttons
button,
Style buttons to input[type="submit"] {
background-color: #333;
make them color: #fff;
padding: 10px 20px;
more visually border: none;
appealing and }
cursor: pointer;
user-friendly.
Form Layout
Organize form
form {
elements and width: 250px;
apply layout margin: 0 auto;
text-align: center;
styles to improve }
user experience.
CSS Combinators: Selecting
Elements with Precision
Introduction to CSS Combinators
CSS combinators are essential tools for selecting
HTML elements with precision.
They allow you to define complex relationships
between elements.
In this presentation, we'll explore the most
commonly used CSS combinators.
Descendant Combinator (Whitespace)
The descendant combinator
selects an element that is a
article p {
descendant of another
/* Selects <p> elements
element. inside <article> elements
It is represented by a */
color: blue;
whitespace character
}
(space).
Child Combinator (>)
The child combinator
selects elements that are a ul > li {
direct child of another /* Selects <li> elements that
element. are direct children of <ul>
elements */
It is represented by the list-style-type: square;
greater-than symbol (>). }
Adjacent Sibling Combinator (+)
The adjacent sibling
combinator selects an element h2 + p {
that is immediately preceded /* Selects <p> elements that
by a specific element. directly follow <h2> elements
*/
It is represented by the plus font-weight: bold;
symbol (+). }
General Sibling Combinator (~)
The general sibling
combinator selects
elements that are siblings h2 ~ p {
of a specified element. /* Selects <p> elements
that follow any <h2>
It is represented by the element */
tilde symbol (~). font-style: italic;
}
Combining Combinators
Combinators can be
nav > ul li a {
combined to create /* Selects <a> elements
more complex selectors. that are descendants of
<li> elements, which are
direct children of <ul>
This allows for precise elements within <nav> */
element selection within text-decoration: none;
your HTML structure. }
CSS combinators
CSS combinators are powerful tools for selecting
elements in complex HTML structures.
They allow for precise element targeting, making it
easier to apply styles.
Mastering combinators is essential for creating
well-structured and visually appealing web pages.
Activity 2: Styling a portfolio Website
Check src4/04_activity2/instructions.txt
Exercice: Recipe website
Check src4/05_exercice/instructions.txt
Challenge: CSS Diner
