Web Technology
Lab 3: CSS
Course Outline
1. Hypertext Markup Language (HTML)
2. Cascading Style Sheets (CSS)
3. Java Script (JS)
4. Programming in PHP
5. MYSQL
6. Laravel framework
CSS (Cascading Style Sheets)
Part 1
CSS Syntax
selector{
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
name:value
A CSS rule set consists of a selector and a declaration block.(decleration);
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 property name and a value, separated by a
colon ( : ), and declaration groups are surrounded by curly braces.
4
CSS Syntax
<HTML>
<HEAD>
<TITLE> CSS </TITLE>
<style>
h1 {
color: blue;
font-size: 12px;
}
</style>
</HEAD>
<BODY>
<h1> Hello World! </h1>
</BODY>
</HTML>
5
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
The CSS element Selector
The element selector selects HTML elements based on the element name.
p {
text-align: center;
color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
#p {
text-align: center;
color: red;
6
}
CSS Selectors
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
.p {
text-align: center;
# id selector
color: red;
}
. class selector
The CSS Universal Selector * universal selector
The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: red; 7
}
CSS Selectors
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
h1, h2, p {
text-align: center;
color: red;
}
8
Three Ways to Insert CSS دا اﻟﻲ ﻣﺗﻌود ﻋﻠﯾﮫ
External CSS external internal inline
With an external style sheet, you can change the look of an entire website by changing one file!
The style sheet file must be saved with a .css extension.
<head>
<link rel="stylesheet" href="[Link]">
</head>
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
<head>
<style>
h1 {
color: maroon;
} 9
</style>
</head>
Three Ways to Insert CSS
Inline style
add the style attribute to the relevant element. The style attribute can contain any CSS
property.
<p style="text-align: center;"></p>
attribute ﻋﻠﻲ ﺷﻛلstyle اﺧﻠﻲ ال
10
CSS Backgrounds
background-color
h1 {
background-color: green;
}
background-image
body {
background-image: url("[Link]");
}
background-repeat
body {
background-image: url("[Link]");
11
background-repeat: repeat-x;
}
CSS Backgrounds
background-position
h1 {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
background-size
div {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-size: 100% 100%;
} 12
CSS Borders
border-style
h1 {
border-style: dashed;
}
background-width
div {
border-width: 5px;
} دول اﺳﺎﺳﯾﯾن ﻻزم ﯾﺗوﺟدوا3ال
background-color
div {
border-color: red;
13
}
CSS Borders
border-radius
h1 {
border-radius: 5px;
}
Background Individual Sides
div {
border-top-width: 5px;
}
Background Shorthand Property
div {
border: 5px solid red;
14
}
CSS Margins MARGINS ---> OUTSIDE
used to create space around elements, outside of any defined borders.
h1 {
ﻓوق و ﺗﺣت ﯾﻣﯾن ﺷﻣﺎل
margin-top: 100px;
}
The auto Value
You can set the margin property to auto to horizontally center the
element within its container.
div {
width: 300px;
margin: auto;
} 15
CSS Margins
used to create space around elements, outside of any defined borders.
h1 {
margin-top: 100px;
}
The auto Value
You can set the margin property to auto to horizontally center the
element within its container.
div {
width: 300px;
margin: auto;
} 16
CSS Padding PADDING --> INSIDE ﻋﻠﻲ ﻋﻛس اﻟﻣﺎﺟﯾﻧﺞ
used to generate space around an element's content, inside of any defined
borders.
h1 {
padding-top: 100px;
}
17
CSS Text
Color
h1 {
color: green;
}
Text Alignment
h1 {
text-align: center;
}
Text Direction
body {
direction: rtl;
18
}
CSS Text دﯾﻛورﯾﺷن ﻣش داﯾﯾﻛﺷن
Text Decoration دﯾﻛو ﯾﻌﻧﻲ اﻟﺧط اﻟﻲ ﺣوﻟﯾﮫ و ﻟوﻧﮫ و رﻓﻌﮫ و ﺳﺗﺎﯾﻠﮫ
h1 {
text-decoration-line: overline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;
}
19
CSS Fonts
Font Family
p { font-family: "Times New Roman";}
Font Style
p { font-style: italic; }
Font Size
p { font-size: 14px; }
Text Transformation
P { text-transform: lowercase/ uppercase/ capitalize;}
Text Indentation
p { text-indent: 50px; } 20
Practice
21
