Scribd
Upload
2 views

5- CSS

The document provides an overview of Cascading Style Sheets (CSS), including its definition, application methods (internal, inline, and external styles), and syntax. It details various CSS selectors, background properties, color specifications, units of measurement, font properties, and text properties. Additionally, it explains the use of comments in CSS for code documentation.

Uploaded by

Abdelrahman Tamer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

5- CSS

The document provides an overview of Cascading Style Sheets (CSS), including its definition, application methods (internal, inline, and external styles), and syntax. It details various CSS selectors, background properties, color specifications, units of measurement, font properties, and text properties. Additionally, it explains the use of comments in CSS for code documentation.

Uploaded by

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

Web Design

Cascading Style Sheets


(CSS)

2
Introduction to CSS
- Stands for Cascading Style Sheets.
- Defines how to display HTML elements
- There are three ways to apply CSS to HTML:
• Internal Styles
• Inline Styles
• External Styles

3
Internal Styles
- Styles are inserted into the head of an HTML page and applied
only on this page.

<html><head><title>CSS Example</title>
<style>
Styles Goes here
</style>
</head>

4
Inline Styles
- Styles are directly inserted into the HTML tags and applied only
on this element

<tag style="property: value;">text</tag>

5
External Styles
- Styles are created in a separate“.css” file and applied to all the
website pages.
• Create new file with CSS extension (.css)
• Open the file for editing.
• Add the CSS rules to the file.
• Attach the file to the HTML head tag

<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

6
CSS Syntax
- A CSS rule (syntax) is composed of:
- Selector: is the HTML tag to be styled.
- Property: is the style attribute.
- Value: is the value of the property.

7
CSS Syntax
- A CSS rule (syntax) is composed of

8
CSS Selectors

9
CSS Selectors
- There are 3 types of CSS Selectors
- Tag Selector.
- ID Selector.
- Class Selector.

10
Tag Selector
- The tag selector selects elements based on the element tag. No
additional tags or attributes required.

tag { property: value; }

<h1>Welcome to NTI</h1>

h1 { color: red; }

11
ID Selector
- The ID selector selects elements based upon the value of the ID
attribute

#id { property: value; }

#xyz { color:red; }

<h1 id="xyz">NTI Web Technologies Track</h1>

12
Class Selector
- The Class selector selects elements based upon the value of the
Class attribute

.classname { property: value; }

.intro { color:red; }

<h1 class="intro">NTI Web Technologies Track</h1>

13
CSS Background Properties
- Background Color: specifies the background color of an element
- Property Name: background-color
- Values: #ff0000 | rgb(255,0,0) | red | transparent

Example:
{
background-color:#b0c4de;
}

14
CSS Background Properties
- Background Image: specifies the background image of an
element.
- Property Name: background-image
- Values: image path | none

{
background-image:url("imge1.gif");
}

15
CSS Background Properties
- Background Repeat: specifies to repeat the background or not.
- Property Name: background-repeat
- Values: repeat | no-repeat | repeat-x | repeat-y

{ background-repeat:repeat; }

16
CSS Background Properties
- Background attachment: sets the background image fixed or
scrolls.
- Property Name: background-attachment
- Values: scroll | fixed

{ background-attachment:scroll; }

17
CSS Background Properties
- Background position: sets the starting position of the bg image.
- Property Name: background-position: h-align v-align
- Values: left top | left center | left bottom |
right top | right center | right bottom |
center top | center center | center bottom |
0% 0% | 10px 200px

{ background-position:center center; }

18
CSS Background Properties
- Background - Shorthand Property: sets all the properties of a
background in one declaration.
- Property Name: background: color image position repeat
attachment;

{background: #000 url(1.jpg) repeat left bottom


fixed;}

19
CSS Colors
- Colors in CSS are specified as:
- Color Names. (supports 140 standard color) Ex: Red.
- RGB values. Ex: rgb(255, 99, 71)
- HEX values. Ex: #ff6347 or #000
- HSL values. Ex: hsl(9, 100%, 64%)
- RGBA values. Ex: rgba(255, 99, 71, 0.5)
- HSLA values. Ex: hsla(9, 100%, 64%, 0.5)

20
CSS Units
- Most of the CSS properties need a measuring value, such as the
“font-size”, “width,” or height of an element.
- So, CSS offers many units to represent these values. There are
two types of measuring units: Absolute and Relative.

21
CSS Absolute Units
- Absolute length units represent a physical measurement.
• px: pixel. For screen displays, it traditionally represents one
device pixel (dot). 1px = 1/96th of 1inch.
• cm: Centimeter. 1cm
• mm: millimeter. 1mm = 1/10th of 1cm
• in: inches (equals to 96px or 2.54cm)
• pt: Points (equals to 1/72 of 1 inch)
• pc: Pica (equals to 12 points or 1/6th of 1 in.)

22
CSS Relative Units
- Relative length units specify a length relative to another length
property.
• %: Relative to the parent element.
• em: one em unit is equal to 100% of the font-size for the
element. (in case of using em for the element’s font-size
property: em unit is equal to 100% of the direct parent font-
size)
• rem: one rem unit is equal to 100% of the font- size of the root
element.(<html>)
• vw: Equals to 1% of the width of the viewport.
• vh: Equals to 1% of the height of the viewport.

23
CSS Relative Units
- % Example

.parent {
width: 400px;
height: 500px;
}
.child {
width: 10%; ➔10% of the 400px = 40px
height: 10%; ➔10% of the 500px = 50px
}

24
CSS Relative Units
- em Example

.parent {
font-size: 20px;
}
.child1 {
font-size: 1.5em; ➔1.5 * 20px = 30px
}
.child2 {
font-size: 0.5em; ➔0.5 * 20px = 10px
}

25
CSS Relative Units
- rem Example

html {
font-size: 40px;
}
.parent {
font-size: 20px;
}
.child1 {
font-size: 0.5rem; ➔ 0.5 * 40px = 20px (always
refers to the html element
not the parent)
}

26
Fonts
- A font is a graphical representation of text that may include a
different typeface, point size, weight, color, or design.

27
CSS Font Properties
- Font Family: Specifies the font family for text.
- Property Name: font-family
- Values: family-name

{
font-family:"Times New Roman",Georgia,Serif;
}

28
CSS Font Properties
- Font Size: Specifies the font size of text.
- Property Name: font-size
- Values: percent| pixels | vw | em

{
font-size:25px;
}

29
CSS Font Properties
- Font Style: Specifies the font style for text.
- Property Name: font-style
- Values: normal | italic | oblique

{
font-style:italic;
}

30
CSS Font Properties
- Font weight: Specifies the weight of a font.
- Property Name: font-weight
- Values: normal | bold | bolder | lighter

{
font-weight:bold;
}

31
CSS Font Properties
- Font Variant: Converts the text to be displayed in small caps.
- Property Name: font-variant
- Values: normal | small-caps

{
font-variant:small-caps;
}

32
CSS Font Properties
- Line Height: specifies the line height.
- Property Name: line-height
- Values: pixels | normal

{
line-height:30px;
}

33
CSS Font Properties
- Font - Shorthand Property: sets all the properties of a font in one
declaration.
- Property Name: font: style variant weight size/line-height family

{
font: italic bold 13px/1.2 Helvetica, sans-serif;
}

34
CSS Text Properties
- Text Color: used to set the color of the text.
- Property Name: color: style variant weight size/line-height family
- Values: #ff0000 | rgb(255,0,0)

{
color:#b0c4de;
}

35
CSS Text Properties
- Text Align: used to set the horizontal alignment of a text.
- Property Name: text-align
- Values: center | left | right | justify

{
text-align: right;
}

36
CSS Text Properties
- Text Indentation: Specify the indentation of the first line of a text.
- Property Name: text-indent
- Values: pixels | 0

{
text-indent:50px;
}

37
CSS Text Properties
- Text Transformation: Used to specify case of letters in a text.
- Property Name: text-transform
- Values: capitalize | lowercase | uppercase | none

{
text-transform: uppercase;
}

38
CSS Text Properties
- Text decoration: Used to set or remove decorations from text.
- Property Name: text-decoration
- Values: none | underline | overline | line-through

{
text-decoration: none;
}

39
CSS Text Properties
- Text Direction: specifies the text direction/writing direction.
- Property Name: direction
- Values: ltr | rtl

{
direction:rtl;
}

40
CSS Text Properties
- Letter Spacing: Defines an extra space between characters.
- Property Name: letter-spacing
- Values: pixels | normal

{
letter-spacing:2px;
}

41
CSS Text Properties
- Word Spacing: Increases or decreases the space between words.
- Property Name: word-spacing
- Values: pixels | normal

{
word-spacing:30px;
}

42
CSS Comments
- Comments are used to explain the code, and may help when re-
editing the source code at a later time, all Comments are ignored
by browsers.
- A CSS comment starts with /* and ends with */.

43

You might also like