Scribd
Upload
130 views

Introcss PPT 01 02 PDF

Uploaded by

varsha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
130 views

Introcss PPT 01 02 PDF

Uploaded by

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

INTRODUCTION

01.02 CSS3: Cascading Style Sheets TO CSS

CSS3!
Cascading Style Sheets!

Adding Style to your Pages!


INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Browser Default Styling!

•  The same html file may look different when


viewed on different browsers. !
•  Some tags are supported, some aren’t!
•  Browsers may have different default styles!

•  In general, default looks are plain.!


INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Adding Style!
•  As styling tags were phased out of html, styling
was done with style attribute !

•  Violated separation of content/style!


INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Cascading Style Sheet!


•  CSS defined generic rules that can apply to
multiple elements!
selector {
property: value;
}
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Rule Syntax!

•  Brackets and semicolons are very


important!
•  This is where a good editor can make a
BIG difference!
!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Multiple Properties!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Internal Style Sheet!


•  Styling is defined within
<head>!
•  Rules are defined within
<style>!
•  Styles are applied to all
elements in that file!
•  Don’t forget to
close the style tag!!!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

External Style Sheet!


•  You can put rules in an external file (don’t use the
style tag!!)!
•  A link to the style sheet is put in the head section.!
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.

!
•  Styles are applied to all elements in all files that links
to the style sheet!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

The “Cascading” part of CSS!

•  Browser default !
•  External style sheets!
•  Internal style (in the head section)!
•  Inline style (inside an HTML element)!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Rule precedence!
•  What if one selector is defined in two external files?!
•  The rules from the most recent file have precedence!
•  What if one selector has more than one rule in the same
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you

file?!
may have to delete the image and then insert it again.

!
•  The most recent rule has precedence!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

!important!
•  It is possible to override later rules, use !
!important!
The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Example!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Review!
•  Why do we want/need to separate content
from formatting?!
•  How does this also tie in to external/
internal style sheets?!
•  Understand that this is very powerful. See
http://www.csszengarden.com/!
INTRODUCTION
01.02 CSS3: Cascading Style Sheets TO CSS

Acknowledgements/Contributions!
These slides are Copyright 2015- Colleen van Lent as part of http://
www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel free
to add your name and organization to the list of contributors on this
page as you republish the materials.!
!
Initial Development: Colleen van Lent , University of Michigan School of
Information! The image cannot be displayed. Your computer
may not have enough memory to open the image,
or the image may have been corrupted. Restart
your computer, and then open the file again. If the
red x still appears, you may have to delete the

!
image and then insert it again.

You might also like