0% found this document useful (0 votes)

19 views

3 CSS Basics

The document discusses CSS basics including what CSS is, why it is important, CSS syntax, selectors, properties and values, and methods to include CSS in HTML documents. CSS is used to style and lay out elements on web pages and separates the document structure and presentation.

Uploaded by

alaabachraoui1

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

19 views

3 CSS Basics

Uploaded by

alaabachraoui1

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 70

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 }

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