Scribd
Upload
143 views

Ms. Belle Salazar-Sandagon

CSS (Cascading Style Sheets) allows control over the style and layout of multiple web pages. CSS works by defining styles that specify how elements should be displayed, and then applying those styles to specific elements on the page via selectors. Styles are normally defined in an external .css file to enable global styling changes across pages by editing just one file. CSS syntax uses selectors, properties, and values to define styles. Common selectors include elements, classes, and IDs. Properties control aspects like text, font, and layout.

Uploaded by

beautybyst
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
143 views

Ms. Belle Salazar-Sandagon

CSS (Cascading Style Sheets) allows control over the style and layout of multiple web pages. CSS works by defining styles that specify how elements should be displayed, and then applying those styles to specific elements on the page via selectors. Styles are normally defined in an external .css file to enable global styling changes across pages by editing just one file. CSS syntax uses selectors, properties, and values to define styles. Common selectors include elements, classes, and IDs. Properties control aspects like text, font, and layout.

Uploaded by

beautybyst
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 36

CSS

Ms. Belle Salazar- Sandagon


What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles are normally stored in Style Sheets
 Styles were added to HTML 4.0 to solve a
problem
 External Style Sheets can save you a lot of
work
 External Style Sheets are stored in CSS files
 Multiple style definitions will cascade into one
Style Sheets Can Save a Lot of
Work
 Styles are normally saved in files external to your HTML
documents.
 External style sheets enable you to change the appearance
and layout of all the pages in your Web, just by editing a
single CSS document.
 CSS is a breakthrough in Web design
 allows developers to control the style and layout of
multiple Web pages all at once.
 you can define a style for each HTML element and apply it
to as many Web pages as you want.
 To make a global change, simply change the style, and all
elements in the Web are updated automatically.
The CSS syntax is made up of three parts:

a selector, a property and a value:


 selector {property: value}

 selector is normally the HTML element/tag


you wish to define
 property is the attribute you wish to change
 Value = given for each property.
Css Syntax
 The property and value are separated by a
colon and surrounded by curly braces:
 body {color: black}

 If  the value is multiple words, put quotes


around the value:
 p {font-family: "sans serif"}
Css Syntax
 If you wish to specify more than one
property, separate each property with a
semi-colon.
Ex. center aligned paragraph, with a red text
color:
 p {text-align:center;color:red}
Css Syntax
 To make the style definitions more
readable,  describe one property on each
line, like this:
p{
text-align: center;
color: black;
font-family: arial
}
CSS Comments
 Comments is use to explain your code, to help you
edit the source code
 ignored by the browser.
 begins with "/*", and ends with "*/", like this:

 /* This is a center align */


 p{text-align: center;
 /* This is font & color */
 color: black;font-family: arial}
Grouping
 grouping selectors. Separate each
selector with a comma.
 Ex. Each header element will be green:

 h1,h2,h3,h4,h5,h6 {color: green}


Types of CSS
1. Inline Style Sheet –styles are declared
inside the HTML tag
2. Internal Style Sheet -Style sheets are
contained within the opening and closing
STYLE tags - usually in the web page's
header.
3. External Style Sheet – style sheets are
stored in another file and can be called in
an html file.
Cascading Order
 What style will be used when there is more than
one style specified for an HTML element?

All the styles will "cascade" into a new "virtual" Style


Sheet by the following rules, where number four has the
highest priority:

1. Browser default
2. External Style Sheet
3. Internal Style Sheet (inside the <head> tag)
4. Inline Style (inside HTML element)
Multiple Styles Will
Cascade Into One
 Style Sheets allow style information to be
specified in many ways.
 Styles can be specified inside a single HTML
element, inside the <head> element of an
HTML page, or in an external CSS file.
 multiple external Style Sheets can be
referenced inside a single HTML document. 
To Create Inline Style Sheet
 declare the style inside an HTML tag.
 add the style=" " attribute to an html tag.
 The general form to add one style property:
 style="property:value"
 Ex. A colored paragraph

 <p style=color:red;font-family:"algerian";>
 i am red
 </p>
To create internal CSS:
 add a new tag, <style>, inside the <head> tag.
 Ex. Body and paragraph style

<html>
<head>
<style type="text/css">
 p {color: white; }
 body {background-color: black; }

</style>
</head>
 <body>
 <p>White text on a black background!</p>
 </body>
 </html>
External CSS
 When using CSS it is preferable to keep the CSS
separate from your HTML.
 Placing CSS in a separate file allows the web
designer to completely differentiate between
content (HTML) and design (CSS).
 External CSS is a file that contains only CSS code
and is saved with a ".css" file extension.
 This CSS file is then referenced in your HTML
using the <link> instead of <style>.
To Create External CSS
1. Create CSS Code external file:
body{ background-color: gray;}
p { color: blue; } h3{ color: white; }
2. Now save the file as a CSS (.css) file
ex. test.css
3. Create a separate HTML file.
4. 4. Call the .css external file w/n the
head tag of HTML file
4. Call the .css external file w/n the head tag of
HTML file

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css“/>
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font. The background color of
this page is gray because we changed it with CSS! </p>
</body> </html>
The class Selector
 class selector- use to define different styles
for the same type of HTML element. It may
apply to SEVERAL elements on a page
 Ex. two types of paragraphs in your
document: one right-aligned paragraph,
and one center-aligned paragraph.

 p.right {text-align: right}


 p.center {text-align: center}
The class Selector
 You have to use the class attribute in your
HTML document:

 <p class="right">This paragraph will be


right-aligned.</p>
 <p class="center">This paragraph will be
center-aligned.</p>
The class Selector
 omit the tag name in the selector to define
a style that will be used by all HTML
elements that have a certain class.
 Ex. all HTML elements with class="center"
will be center-aligned:

 .center {text-align: center}


The class Selector
 Ex. both the h1 element and the p
element have class="center“ so the
rules in the ".center" selector applies: 
 
 <h1 class="center">This heading will
be center-aligned</h1>
 <p class="center">This paragraph will
also be center-aligned.</p>
The id Selector
 id selector is always applies to only ONE
element.
 An ID attribute must be unique within the
document.
 The style rule below will match a p element
that has the id value "para1":
 p#para1{text-align: center;color: red}
The id Selector
 The style rule below will match the first element
that has the id value “abc":
 *#abc {color: green}
 The rule above will match this h1 element:
 <h1 id=“abc">Some text</h1>

 The style rule below will match a p element that


has the id value “abc":
 p#abc{color: green}
Text Properties
Property What it Does Possible Values
Controls the
amount of space
normal (default)
letter-spacing between each
number of pixels
letter in a
section of text.
Controls the
amount of normal (default)
line-height vertical space number of pixels
between lines of percentage
text
Text Properties
browser
Controls the decides
alignment for (default)
text-align
a section of left
text right
center
none (default)
Controls what underline
text-decoration the text looks overline
like line-through
blink
Text Properties
Controls the
0 (default)
indentation of
number of
text-indent the first line in
pixels
a section of
percentage
text

none (default)
Changes the
uppercase
text-transform case of a
lowercase
section of text
capitalize
Text Properties
baseline (default)
sub
super
Controls the vertical
top
vertical-align alignment of a
text-top
section of text
middle
bottom
text-bottom
Font Properties
Property What it Does Possible Values

Controls the type of browser decides


font-family font shown on the (default)
page font family name

medium (default)
Controls the size of the
font-size number of pixels
font
percentage

normal (default)
Controls the style of the
font-style italic
font
oblique
Font Properties
medium (default)
Controls the size of the
font-size number of pixels
font
percentage
Controls the variant of normal (default)
font-variant
the font small-caps
normal (default)
lighter
bold ,bolder
100
200
Controls the boldness
font-weight 300
of the font
400
500
600
700
800 , 900
Color/Background
Properties
Property What it Does Possible Values

browser decides
Controls the color of the
color (default)
text
color name

Controls the scrolling of scroll (default)


background-attachment
the background fixed

Controls the color of the transparent (default)


background-color
background color name

Allows you to set a none (default)


background-image
background image image url
Color/Background
Properties
Allows different repeat (default)
patterns of repeat-x
background-repeat
background repeat-y
repetition no-repeat

0% 0% (default)
postion in pixels ie
{20,20}
percentage ie
Controls the position of
{5%,7%}
background-position the background on
top
the page
bottom
left
right
center
Box Properties
Property What it Does Possible Values
auto (default)
Controls the width of a
width number of pixels
section
percentage
auto (default)
Controls the height of a
height number of pixels
section
percentage
default text color
Controls the border
border-color (default)
color of a section
color name
none (default)
Controls the style of a
border-style solid
border
double
Box Properties
undefined (default)
number of pixels
Controls the width of a
border-width thin
border
medium
thick

medium (default)
Controls the width of a number of pixels
border-top-width
border side thin
thick

medium (default)
Controls the width of a number of pixels
border-left-width
border side thin
thick
Box Properties
medium (default)
Controls the width of a number of pixels
border-right-width
border side thin
thick
medium (default)
Controls the width of a number of pixels
border-bottom-width
border side thin
thick
Controls the width of a 0 (default)
margin-top margin from the number of pixels
specified side percentage
Controls the width of a 0 (default)
margin-left margin from the number of pixels
specified side percentage
Box Properties
Controls the width of a 0 (default)
margin-right margin from the number of pixels
specified side percentage

Controls the width of a 0 (default)


margin-bottom margin from the number of pixels
specified side percentage

Controls the amount of 0 (default)


padding-top padding from the number of pixels
specified side percentage

Controls the amount of 0 (default)


padding-left padding from the number of pixels
specified side percentage
Box Properties
Controls the amount of 0 (default)
padding-right padding from the number of pixels
specified side percentage
Controls the amount of 0 (default)
padding-bottom padding from the number of pixels
specified side percentage
none (default)
Controls the floating of
float left
a section
right
Defines whether a
none (default)
section disallows
clear left
other sections on its
right
sides

You might also like