Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
14 views

Lect 03-SET 372 - Introduction To CSS

Uploaded by

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

Lect 03-SET 372 - Introduction To CSS

Uploaded by

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

Internet Development

03 Introduction to CSS

Dr. Fatma Sakr


2
Agenda

 Introduction

 CSS Syntax

 CSS Selector

 Fonts and Colors

 Summary

2-Mar-24
3

Introduction

2-Mar-24
4
Cascading Style Sheets (CSS)

 Describes the appearance, layout, and presentation of information on a


web page.
 Remember : “ HTML describes the content of the page”.

 Describes how information is to be displayed, not what is being


displayed.

 Can be embedded in HTML document or placed into separate css file.

2-Mar-24
5
Why Use CSS?

 Used to define styles for your web pages.

 Including the design

 Layout and variations in display for different devices and screen sizes.

 Saves a lot of work

 With an external stylesheet file, you can change the look of an entire website by
changing just one file

2-Mar-24
6
Why Use CSS?

 CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

 CSS is connected to the Document Object Model (DOM).

 The word cascading means that a style applied to a parent element will also
apply to all children elements within the parent. So, if you set the color of the
body text to "blue", all headings, paragraphs, and other text elements within
the body will also get the same color (unless you specify something else)!

2-Mar-24
7
Why Use CSS?

 With CSS and its integration with the DOM,

 You can quickly and easily restyle any element.

 For example, if you don’t like the default look of the <h1>, <h2>, and other
heading tags,

 You can assign new styles to override the default settings for many properties.

2-Mar-24
8

CSS Syntax

2-Mar-24
9
CSS Syntax

 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.

2-Mar-24
10
CSS Syntax: Example

 All <p> elements will be center-aligned, with a red text color.

 p is a selector that 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


p {
color: red;
text-align: center;
} CSS

2-Mar-24
11
Importing a Stylesheet

 There are three ways of inserting a style sheet:

 External CSS: by using a <link> element to link to an external CSS file

 Internal CSS: by using a <style> element in the <head> section

 Inline CSS: by using the style attribute inside HTML elements

2-Mar-24
12
Importing a Stylesheet

 External CSS:

 You can also include a stylesheet with the HTML <link> tag:

 You can also use as many <link> elements as you like in your HTML.

<link rel='stylesheet' href='styles.css’>


CSS

 The rel attribute specifies the relationship between the current document and the
linked document. Only used if the href attribute is present.
3-Mar-24
13
Importing a Stylesheet

 External CSS:
 An external style sheet is used to define the style <!DOCTYPE html>
<html>
for many HTML pages. <head>
<link rel="stylesheet" href="styles.css">
</head>
 To use an external style sheet, add a link to it in <body>

the <head> section of each HTML page: <h1>This is a heading</h1>


<p>This is a paragraph.</p>
 With an external style sheet, you can change the </body>
</html>
look of an entire web site, by changing one file! CSS

 The external style sheet can be written in any text


editor. The file must not contain any HTML code,
and must be saved with a .css extension. 3-Mar-24
Importing a Stylesheet: Example 1 14

<html>
<head>
<link rel='stylesheet' href='mystyles.css'>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> HTML

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
mystyles.css
2-Mar-24
15
Importing a Stylesheet

 Internal CSS:

 Used if one single HTML page has a unique style.

 Is defined inside the <style> element, inside the head section.

<head>
<style>
body {
background-color: lightblue;
}
</style>
</head> CSS

2-Mar-24
Importing a Stylesheet: Example 2 16

<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> HTML

2-Mar-24
17
Importing a Stylesheet

 Inline CSS:

 Used to apply a unique style for a single element.

 To use it, add the style attribute to the relevant element.

<h1 style="color:blue; text-align:center;">This is a heading</h1>


CSS

2-Mar-24
Importing a Stylesheet: Example 3 18

<html>
<head>
</head>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html> HTML

2-Mar-24
19

CSS Selector

2-Mar-24
20
CSS Selector

 Used to find the HTML elements you want to style.

 We can divide CSS selectors into categories:

 Simple selectors: select elements based on name, id, class.

 Combinator selectors select elements based on a specific relationship between


them.

2-Mar-24
21
Type 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:

p {
color: red;
text-align: center;
} CSS

2-Mar-24
22
Type Selector: Example 4

<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the
style.</p>
<p>And me!</p>
</body>
</html>
HTML
2-Mar-24
23
Descendant Selector

 Let you apply styles to elements that are contained within other
elements.

 Example: sets all text within <b>...</b> tags to red, but only if those tags occur
within <p>...</p> tags.
p b {
color: red;
} CSS

2-Mar-24
24
Descendant Selector: Example 5
<html>
<head>
<style>
ol ol { list-style-type:lower-alpha; }
</style>
</head>
<body>
<ol>
<li>One</li> <li>Two</li>
<li>Three
<ol>
<li>One</li> <li>Two</li>
<li>Three</li>
</ol>
</li>
</ol>
</body>
</html>
2-Mar-24
HTML
<!DOCTYPE html>
<html>
25
<head>
<style>
ul.a { list-style-type: circle; }
ul.b { list-style-type: square; }
ol.c { list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li> The Output
</ol>
</body> 3-Mar-24
</html> HTML
26
id Selector

 Uses the id attribute to select a specific HTML element.

 The id is unique within a page, so it is used to select a unique element.

 Note: An id name cannot start with a number!

 To define it, write a hash (#) followed by the id of the element:


#para1 {
color: red;
text-align: center;
} CSS

2-Mar-24
27
id Selector: Example 6

<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1"> Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
HTML

2-Mar-24
28
class Selector

 Used to select HTML elements with a specific class attribute.

 To select elements with a specific class, write a dot (.) character,


followed by the class name.

.center {
color: red;
text-align: center;
} CSS

2-Mar-24
29
class Selector: Example 7

<html>
<head>
<style>
.center{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center“ > Red and center heading</h1>

<p class="center"> Red and center paragraph.</p>


</body>
</html>
HTML
2-Mar-24
30
class Selector

 You can also specify that only specific HTML elements should be
affected by a class.

 HTML elements can also refer to more than one class.


p.center {
color: red;
text-align: center;
} CSS

<p class="center large">This paragraph refers to


two classes.</p>
HTML

2-Mar-24
31
class Selector

 If some properties have been defined for the same selector (element) in
different style sheets

 The value from the last read style sheet will be used.

h1 { h1 {
color: navy; color: orange;
} CSS } CSS

2-Mar-24
HTML Color Values 32

SET 372 – Internet Development 3-Mar-24


33
CSS Grouping Selector

 Selects all the HTML elements with the same style definitions.

 h1, h2, and p elements have the same style definitions.


h1 {
color: red;
text-align: center;
}
h2 { h1, h2, p {
color: red; color: red;
text-align: center;
} = }
text-align: center;

p { CSS
color: red;
text-align: center;
} CSS

2-Mar-24
34
Cascading Order

 What style will be used when there is more than one style is used?

 The style that has the highest priority:


 Inline style (inside an HTML element)

 External and internal style sheets (in the head section)

 So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.

2-Mar-24
35
Cascading Order: Example 8
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>

<p>Here, the background color of the page is set


with inline CSS, and also with an internal CSS,
and also with an external CSS.</p>
</body>
</html> HTML

Type attribute default value is "text/css", which indicates that the content is CSS. For now, the only
3-Mar-24
supported value is "text/css"
36
Fonts

 You can change four main font properties using CSS:

 font-family

 font-style,

 font-size,

 font-weight.

2-Mar-24
37
font-family

 The font-family property assigns the font to use

 If font name is made up of two or more words


p {
font-family: Georgia;
 Enclose the name in quotation marks }
h2 {
font-family: "Courier New";
} CSS

This paragraph uses the first style above.


This h2 uses the second style above.
output

2-Mar-24
38
font-style

 Used to choose to display a font p.normal {


font-style: normal;
}
 normal - The text is shown normally p.italic {
font-style: italic;
}
 italic - The text is shown in italics p.oblique {
font-style: oblique;
 oblique - very similar to italic, but less supported. } CSS

This is a paragraph in normal style.


This is a paragraph in italic style.
This is a paragraph in oblique style
output

2-Mar-24
39
font-size

 Used to sets the size of the text.


h1 {
font-size:240%;
}
This is heading 1 h2 {
font-size:200%;
This is heading 2 }
h3 {
This is heading 3 font-size:160%;
This is a paragraph. }
output CSS

 The solution that works in all browsers, is to set a default font-size in percent for the
<body> element: i.e. body { font-size: 100%; } 3-Mar-24
40
font-size

 pt specifies number of point, where a point is 1/72 of an inch on screen.

 px specifies a number of pixels on the screen.

 em specifies number of m-widths, where 1 em is equal to the font's current


size = 16 px. So i.e. 2.5 em = 2.5 *16 = 40 px

 To allow users to resize the text (in the browser menu), many developers use
em instead of pixels.

3-Mar-24
41
Responsive Font Size: viewport width

 The text size can be set with a vw unit, which means the "viewport width".

 That way the text size will follow the size of the browser window:

 Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is
50cm wide, 1vw is 0.5cm.

Example
<h1 style="font-size:10vw">Hello World</h1>

SET 372 – Internet Development 3-Mar-24


42
Responsive Font Size: viewport width

SET 372 – Internet Development 3-Mar-24


43
CSS properties for text

 text-align: alignment of text within its element.

 text-decoration: decorations such as underlining.

2-Mar-24
44
text-align

 text-align can be left, right, center, or justify

blockquote { text-align: justify; }


h2 { text-align: center; }
CSS

The Gollum’s Quote

We wants it, we needs it. Must have the precious. They stole it from us.
Sneaky little hobbitses. Wicked, tricksy, false!
output

2-Mar-24
45
text-align

 Can also be overline, line-through, blink, or none.


p {
text-decoration: underline;
 Effects can be combined: }
CSS
text-decoration: overline underline;

This paragraph uses the style above.


output

2-Mar-24
46
CSS properties for colors

 color : color of the element's text.

 background-color: color that will appear behind the element.


p {
color: red;
background-color: yellow;
}
CSS

This paragraph uses the style above output

2-Mar-24
47
CSS properties for colors

p {
 Color names: aqua, black, blue, color: red;
fuchsia, gray, green, lime, maroon, }
h2 {
navy, olive, purple, red, silver, teal, color: rgb(128, 0, 196);
}
white (white), yellow
h4 {
color: #FF8800;
 RGB codes: red, green, and blue } CSS
values from 0 (none) to 255 (full) This paragraph uses the first style above

 hex codes: RGB values in base-16


This h2 uses the second style above.
from 00 (0, none) to FF (255, full)
This h4 uses the third style above. output
2-Mar-24
Summary 48

 Introduction

 CSS Syntax

 CSS Selector

 Fonts and Colors

 Summary

2-Mar-24
Questions

You might also like