Scribd
Upload
10 views

6. Web Design

Uploaded by

Hayat Hyt
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

6. Web Design

Uploaded by

Hayat Hyt
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 41

KHANA-E NOOR

UNIVERSITY

COMPUTER SCIENCE
FACULTY
Web Design
Chapter 6 Fall 2023
Sayed Ali Aqa
“Mousavi”
HTML Medias

CSS
What is CSS?

• CSS stands for Cascading Style Sheets


• CSS defines how HTML elements are to be
displayed
• Styles were added to HTML 4.0 to solve a
problem
• External Style Sheets are stored in CSS files
CSS Format
CSS Examples
CSS Comments
1. External Style Sheet
2. Internal Style Sheet

• An internal style sheet may be used if one single


page has a unique style.
3. Inline Styles

• An inline style may be used to apply a unique


style for a single element.
Cascading order
• What style will be used when there is more
than one style specified for an HTML element?
• Generally speaking we can say that all the
styles will "cascade" into a new "virtual" style
sheet by the following rules, where number
three has the highest priority:
Cascading order
1. Browser default
2. External and internal style sheets (in the head
section)
3. Inline style (inside an HTML element)
Tip
CSS Selectors
• CSS selectors allow you to select and manipulate
HTML elements.
• Types of Selectors: element selector, id selector,
class selector, and Grouping selectors.
1. The element Selector
2. The id Selector
3. The class Selector
Note: You can also
specify that only specific
HTML elements should
be affected by a class.
Tip
4. Grouping Selectors

• If you have
elements with the
same style
definitions, like
this:
4. Grouping Selectors

The styling format below is better.


CSS Background
CSS Background
CSS Text (Alignment)
CSS Text (Decoration)
CSS Text (Decoration)
CSS Text (Transform)
Text Indentation
• The text-indent property is used to specify the
indentation of the first line of a text.
CSS Font
• Note: If the name of a font family is more than one
word, it must be in quotation marks, like: "Times
New Roman". More than one font family is
specified in a comma-separated list:
CSS Font
CSS Font
Set Font Size With Em
• To allow users to resize the text (in the
browser menu), many developers use em
instead of pixels.
• In the example above, the text size in em is
the same as the previous example in pixels.
However, with the em size, it is possible to
adjust the text size in all browsers.
Set Font Size With Em
• Unfortunately, there is still a problem with
older versions of IE. The text becomes larger
than it should when made larger, and smaller
than it should when made smaller.
Use a Combination of Percent and Em

• The solution that


works in all
browsers, is to set
a default font-size
in percent for the
<body> element:
CSS Links
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
The four links states are:
Tip
When setting the style for several link states, there
are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
Text Decoration
• The text-
decoration
property is mostly
used to remove
underlines from
links:
Background Color
• The background-
color property
specifies the
background color
for links:
CSS height and width
CSS height and width
Any Questions

You might also like