Scribd
Upload
8 views

Section 3 CSS (part1)

Uploaded by

medosafwat2018
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Section 3 CSS (part1)

Uploaded by

medosafwat2018
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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="mystyle.css">
</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("bgdesert.jpg");
}

 background-repeat
 body {
background-image: url("bgdesert.jpg");
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

You might also like