Scribd
Upload
6 views

5.1 Intro To CSS

Uploaded by

makeh71663
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

5.1 Intro To CSS

Uploaded by

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

CASCADING

Introduction

STYLE
SHEETS
(CSS)

1
CSS INTRODUCTION

• CSS stands for Cascading Style Sheets


 CSS is a language used to style web pages.
 It describes how HTML elements should be
displayed on
 screen,
 paper, or
 other media.

 CSS saves time by allowing consistent


styling across multiple web pages.

 Styles define how to display HTML elements

2
WHY TO USE CSS

 Separation of Concerns:
• HTML focuses on content, while CSS handles presentation.

 Efficiency:
• External stylesheets (stored in .css files) allow
changes to the entire website by modifying just one
file.

 Maintainability:
• Centralized styling makes it easier to manage &
update.

3
BASIC SYNTAX OF CSS
• CSS rules consist of Selector and declarations.
• Selectors
 Selector target HTML elements (e.g., h1 , .class-name ,
#id ).
• Declarations
 Declaration define styles (e.g., color: red; , font-size:
16px; ).

4
CSS SELECTORS
 Element Selector ( element ):
 Targets specific HTML elements by their tag name.
 For example, p targets all <p> elements.
p {
text-align: center;
color: red;
}
 Class Selector ( .class ):
 Targets elements with a specific class attribute.
 For example, .parent targets all elements with class=“parent".
 ID Selector ( #id ):
 Targets a single element with a specific ID attribute.
 For example, #header targets the element with id="header".
 Universal Selector ( * ):
 Targets all elements in the document.
 For example, * { margin: 0; } would remove all margins.
5
CSS SELECTORS
 Descendant Selector (ancestor descendant):
 Selects an element that is a descendant of another specified
element.
 For example, ul li targets all <li> elements that are
descendants of <ul> elements.
 Adjacent Sibling Selector (prev + next):
 Selects an element that is directly preceded by a sibling
element.
 For example, h2 + p targets the <p> element that directly
follows an <h2>.
 Child Selector (parent > child):
 Selects an element that is a direct child of another specified
element.
 For example, ul > li targets all <li> elements that are direct
children of <ul> elements.

6
CSS SELECTORS
 Attribute Selector ([attribute=value]):
 Targets elements with a specific attribute/value pair.
 For example, [type="text"] targets all elements with
type="text".
 Pseudo-classes (:pseudo-class):
 Adds special effects to certain selectors. Common pseudo-
classes include :hover, :active, :focus, etc.
 Pseudo-elements (::pseudo-element):
 Selects certain parts of an element. Common pseudo-
elements include ::before, ::after, ::first-line, ::first-letter, etc.

7
WAYS OF USING CSS

• Three ways of inserting a style


sheet:

1. External style sheet


2. Internal style sheet
3. Inline style

8
EXTERNAL STYLE SHEETS
External CSS files
 An external style sheet is ideal when the style is
applied to many pages.
 With an external style sheet, you can change the look
of an entire Web site by changing one file.
 Each page must link to the style sheet using the <link>
tag. The <link> tag goes inside the head section.
<head> tag is used before starting of <body>. Its indicates the browser to include and
execute all of instructions written in it.
Its like including header files of a c++ program before actual code.
<link> tag contains the name and path of .css file to be included. E.g; “design.css”
 An external style sheet can be written in any text
editor. mystyle.css
 The file should not contain any html tags.
<head> hr {color:sienna;}
Syntax:
<link rel="stylesheet" type="text/css" p {margin-left:20px;}
href="mystyle.css" /> body
{background-image:url("images/back40.gif")
</head> ;} 9
INTERNAL STYLE SHEETS
• Introduction
 An internal style sheet should be used when a single
document has a unique style.
 You define internal styles in the head section of an
HTML page, by using the <style> tag, like this:
• Syntax:
<head>
<style type="text/css">
h2 {color:yellow;}
p {margin-left:20px;}
body
{background-image:url("images/back40.gif");}
</style>
</head>

10
INLINE STYLE SHEETS
• Introduction
 To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS
property.
 But using inline style sheets, removes the main goal of
style sheets.

 Syntax:

 <p style="color:sienna;margin-left:20px">This is a
paragraph.</p>

11
MULTIPLE STYLE SHEETS
Idea
 What if some properties have been set for the same
selector in different style sheets ? Then which property
will be inherited?

Like in external CSS, h3 is defined like


And an internal style sheet has h3 selector

ANSWER:
 If the page with the internal style sheet also links to
the external style sheet the properties for h3. then out
put will be;

12
MULTIPLE STYLE SHEETS

• Priority/ Cascading order of style


sheets;

1) Inline style (inside an HTML element)


2) Internal style sheet (in the head section)
3) External style sheet
4) Browser default
So , the external style sheet will be overrided
by the internal style sheet.

13

You might also like