Scribd
Upload
13 views

Cascading Style Sheets: Eduardo Rosado Eduardo Juárez

Cascading Style Sheets (CSS) allow imposing consistency across web documents. CSS can be defined at three levels - inline, document, and external - with lower levels overriding higher ones. Properties of a tag result from merging applicable style sheets. If no style sheet is specified, browser defaults are used. CSS controls borders, padding, margins, fonts, colors, lists, and more using selectors like classes, IDs, and pseudo-classes. Conflicts are resolved through specificity and the !important rule.

Uploaded by

Miguel Ángel Becerra Ayala
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
13 views

Cascading Style Sheets: Eduardo Rosado Eduardo Juárez

Cascading Style Sheets (CSS) allow imposing consistency across web documents. CSS can be defined at three levels - inline, document, and external - with lower levels overriding higher ones. Properties of a tag result from merging applicable style sheets. If no style sheet is specified, browser defaults are used. CSS controls borders, padding, margins, fonts, colors, lists, and more using selectors like classes, IDs, and pseudo-classes. Conflicts are resolved through specificity and the !important rule.

Uploaded by

Miguel Ángel Becerra Ayala
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 19

Cascading Style

Sheets
Eduardo Rosado
Eduardo Juárez
Cascading Style Sheets
 CSS have the capability to impose
consistency of the style in web documents
 CSS are called cascading because they
can be defined at three levels to specify
the style of a document.
 Lower-level style sheets override higher-
level style sheets
Levels of Style Sheets
 Inline (lowest level)
 Single XHTML element
 Document
 Whole body of a document
 External (highest level)
 Bodies of any number of documents
Levels of Style Sheets
 The properties of a specific tag are those
that result from a merge of all applicable
style sheets
 If no style sheet information is specified,
the browser default property values are
used.
Inline level
 Appear within the opening tag in the style
attribute
 <p style="font-size: 20pt; color: #6666ff">
 Do not separate presentation from content
 Deprecated in XHTML 1.1 by the W3C
Document level
 Appear embedded in the document head
section in the tag <style>
<head>
<style type="text/css">
p { font-size: 20pt;
color: #6666ff }
</style>
</head>
External level
 Are not part of any of the documents to
which they apply.
 CSS are written as text files with the MIME
type text/css
 The <link> tag is used to specify external
style sheets
<link rel="stylesheet" type= "text/css" href="mycss.css" />
External style sheet
 mycss.css
/* External style sheet comment */
/* Simple selector format:
XHTMLtag { style-rules }
*/
body { font-family: arial, helvetica, sans-serif }
h1 { font-size: 24pt; }
ul, li { margin-left: 20px } /* Applies to both tags */
li em { font-weight: bold } /* Applies to <em> tag insdide <li> */
ul ul { font-size: .8em; } /* Applies to <ul> tag insdide <ul> */
Class selectors
 Are used to allow different ocurrences of the
same tag to use different style specifications
 A style class is defined in a style element by
giving it a name
p.normal { font-size: 95%; }
p.warning { background-color: #FFD700; }

<p class="normal">Normal presentation</p>


<p class="warning">Warning presentation</p>
Generic selectors
 Apply to the content of more than one
kind of tag
.info { background-color: #00AACC; }

<p class="info">Information in a paragraph</p>


<h3 class="warning">Information in a level 3 header</h3>
<li class="warning">Information in a list item</li>
<div class="info">…</div>
id selectors
 Allows the application of a style to one
specific element (workaround for inline styles)
#paragraph2 { font-size: 20pt; color: #6666ff; }

<p id="paragraph2">Paragraph 2 information</p>


Universal selectors
 Apply to all elements in the document
* { color: red; }
Pseudo classes
 Apply when something happens
Input:hover { color: red; }
Input:focus { color: green; }
Color properties
 Color names: red, green, blue
 RGC: rgb(255, 255, 255)
 Hexadecimal: #0077FF
Font properties
 font-family: serif, sans-serif, cursive, fantasy,
monospace
 font-size:
 Relative: xx-small, x-small, small, medium, large,
x.large, xx-large, 50%, 90%, 1.5em (M-height of the
font)
 Absolute: 10pt

 font-style: italic
 font-weight: bold
List properties
 list-style-image: url(bullet.gif)
 List styles:
ol { list-style-type: upper-roman }
ol ol { list-style-type: upper-alpha }
ol ol ol { list-style-type: decimal }
The box model
The box model
 CSS controls the border using three properties:
border-width, border-color, border-style
 padding: Distance between the content inside an
element and the inside of the element’s border
 padding and margin can have a specific value for
individual sides: margin-top, padding-bottom,
margin-right, padding-left, etc.
Conflict resolution
 !important
 Property values can be declared as !important
 Precedence
 Idselectors
 Class and pseudo-class selectors
 Contextual selectors (more element type names
means they are more specific)
 Universal selectors

You might also like