Scribd
Upload
2 views

All About Css

Uploaded by

Yohannes Senbeto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

All About Css

Uploaded by

Yohannes Senbeto
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

SATA

TECHNOLOGY
& BUSINESS
COLLEGE
Regular: WDDBA
Programming
Web

Instructor:
Mesfin.M
2 ma

Cascading Style Sheets


LA el

(CSS)
B-
nu
3
Outline
0 CSS Basics
10

Web Programming
Style Sheet Rules
2
0 Style Properties
30
CSS Measuring
Units
4
4
What is CSS?
▸ CSS stands for Cascading Style Sheets
 supported by all browsers today
▸ Styles are defined once and used any number of

Web Programming
times and in several contexts
▸ Difference between CSS and HTML
 HTML: designed to specify content and structure of
web pages
 CSS: defines HOW HTML elements are to be displayed
 used to specify the appearance, layout, or styling of
HTML elements on a web page (e.g., fonts, spacing,
sizes, colors, positioning)
 not describes what is being displayed
5
What is CSS?
 a web document can consist of up to three layers
 content,
 presentation, and
 behavior

Web Programming
6
Benefits of CSS
 Web sites designed in CSS are faster to change
and update.
 speeds the time it takes to develop and update

Web Programming
site layouts.
 Typography and page layout can be better
controlled
 Style is separable & stored from structure
 document are potentially smaller
 makes site maintenance easier
7
Anatomy of CSS Rule
CSS syntax
 Consists of :
• selector

Web Programming
• property
• Value

 Format: selector { property : value }


• selector – tells the browser which part of the element
is affected
• property – specifies what aspect of layout is being set
• value – which gives the value for the style property
 CSS declaration always ends with a semicolon
8 Anatomy of a CSS
▸ Rule
CSS rule-set consists of a selector and a declaration
block:

Web Programming
▸ selector - points to the HTML element you want to
style
 can be grouped (separated by comma)
Ex: p, div, table { align: center }
▸ declaration block
 contains one or more declarations separated by
semicolons
 Each declaration includes a property name and value,
9
Selectors
▸ Types of selectors
 Element/ Tag names as selectors
 used to override the default attributes of

Web Programming
tags
 Format: tag_name {property:
value}
p { red; text-decoration:
 Ex. a { color:
overline} text-
align: center;
color: red;
}
You can select all <p> elements on a page like
this (in this case, all <p> elements will be center-
aligned, with a red text color):
1
0 Selectors
 Class selector
 used to specify a style for a group of elements
 define generic styles that can be applied to

Web Programming
different elements
 To select elements with a specific class, write a
period (.) character, followed by name of the
class .center {
 Format: text-align: center; color:
red;
}
<p class=“center”>Hello world
</p>
• all HTML elements with class="center" will be red and
center-aligned.
1
1 Selectors
 Id selector
 unlike class selector, this always applies to only one
(unique) element
 id of an element should be unique within a page

Web Programming
 uses id attribute of HTML element, and defined with "#"
 first add an id attribute <p id="p01">I am
different</p>
 then define a different style for the (identified) element:
Example #p01 { color:blue; }
<p id=“para1”> Hello world
</p>
• The style rule above will be applied to the HTML element
with id="para1":
• Note: An id name cannot start with a number!
Use id to address single elements
1 Linking HTML and
2
CSS
▸ There are three ways of inserting a style
 Inline style sheet

Web site development


sheet:
• used to apply a unique style for a single
element
• use style attribute in the relevant element
 Internal style sheet
• Defined within the <style> element, inside

with css
the <head> section of an HTML page
 External style sheet
• a separate file (.css) where you can declare
all the styles that you want to use on your
website
1 Linking HTML and
3
CSS
Inline style sheet (Inline CSS)
 useful for applying a unique style to a single

Web Programming
element
 uses the style attribute.
<tag_name style = “property:value; property:
value;”> … </tag_name>
<h1 style="color:blue;margin-left:30px;">This is
heading.</h1>

<table style="background-color: yellow”>…


</table>
1 Linking HTML and
4
CSS
Inline style sheet (Inline CSS)
<h3 style="color: red;
font-style: italic;

Web Programming
text-align: center;
Exampl

font-size: 50px;
padding-
top: 25px;">
Learning HTML using Inline CSS</
e

h3>
Output
:
1 Linking HTML and
5
CSS
Internal style sheet (Internal
CSS)
 can be used to define a common style for all
elements

Web Programming
 defined in <head> section, using
a <style> element:
<head>
<style type=“text/css”> <head>
<style>
body { h1{
background-color:lightgrey
} color: orange;
h1 { color:blue } margin-
p { color:green } left: 30px;
}
</style> </style>
1 Linking HTML and
6
CSS
Internal style sheet (Internal
CSS)
<html>
<head> <style>

Web Programming
/*Internal CSS using element name*/
Exampl

body{background-color:lavender; text-
align: center;}
h2{font-style: italic; font-
size: 30px; color: #f08080;}
/*Internal CSS using class name*/
e

.blue{color: blue;}
</style> </head>
<body>
<h2>Learning HTML with internal CSS</h2>

<p class="blue">This is a blue color paragraph</p>


1 Linking HTML and
7
CSS
External style sheet (External
CSS)
 you can change the look of an entire web site by
changing one file

Web Programming
 defined in an external CSS file, and then linked to
in <head> section using <link> tag:
<link rel=“stylesheet” type=“text/css”
href=“url”>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
h1{
</head> color: orange;
margin-left: 30px;
}
 file should not contain any html tags & should be saved
with a .css extension
1 Linking HTML and
8
CSS
External style sheet (External
CSS)
<html>
<head> <link rel="stylesheet" type="text/

Web Programming
css" href="style.css"> </head>
Exampl

<body>
<h2>Learning HTML with External CSS</h2>
<p class="blue">This
body{ is a blue color paragraph</p>
</body> background-color:lavender; text-
</html> align:center;
e

}
h2{
CSS font-style: italic; size: 30px; color:
#f08080;
file: }
.blue{
1 Commonly Used
9
Properties
Properties- Syntax Description
name
background- background-color: defines the background color of
color red; that element.

Web Programming
defines the color of text of an
color color: lightgreen;
element
defines the space between content
padding padding: 20px; and the border.
margin margin: 30px; creates space around an element.
Font-family defines a font for a
font-family font-family: cursive; particular element.
Font-size defines a font size for a
Font-size font-size: 50px; particular element.
used to align the text in a selected
text-align text-align: left; position.
2 Some Common CSS
0
properties
▸ Background
 background-color: color
 background-image: url(url)
 background-repeat: repeat_type {repeat,

Web Programming
repeat-x, repeat-y, no-repeat}
▸ Text
 color: color
 direction: direction {ltr, rtl} borwser
issue??
 letter-spacing: value
 text-align: alignment {left, right, center,
justify}
 text-decoration: decoration {none,
2 Some Common CSS
1
properties
 text-transform: transform {none,
capitalize, uppercase, lowercase}
 word-spacing: value

Web Programming
▸ Fonts
 font-style: style {normal, italic, oblique}
 font-weight: weight {normal, bold, bolder,
lighter, 100, 200, …}
 font-size: size
▸ Borders
▸ Margins
▸ List properties
2
2
THANKS
!
Questions,
Ambiguities,
Doubts, … ???

You might also like