Scribd Logo
Upload

Welcome to Scribd!

  • CSS

    Uploaded by

    blackphoenix303
    41 views58 pages
    CSS PowerPoint Presentation

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS PowerPoint Presentation

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    41 views58 pages

    CSS

    Uploaded by

    blackphoenix303
    CSS PowerPoint Presentation

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 58

    CSS

    Cascading Style Sheets

    Contents{
    1.

    What is CSS?
    1.
    2.

    A Brief History of CSS Why to use Styles?

    2. 3. 4. 5. 6.

    Syntax Cascading Order Examples of Properties Limitations CSS variations

    {What is CSS?

    CSS stands for Cascading Style Sheets Styles define how to display (X)HTML elements Styles are normally stored in Style Sheets Multiple style definitions will cascade into one

    {Why to use Styles?

    Documents written with CSS are

    more flexible short clear


    Webpage

    Basic formating tool Easy multiple document managment Save time by using selector classes New opportunities in formating

    Structure

    Styleformatting

    (X)HTML

    CSS

    Advantages of CSS

    Workflow

    Faster downloads Global control of design attributes Precise control (Advanced)


    Positioning Fluid layouts

    Basic Syntax

    Made up of three parts:


    selector {property: value}

    The selector is normally the HTML element/tag you wish to define The property is the attribute you wish to change Every property has the value

    { Syntax

    If the value is multiple words, put quotes around the value

    p {font-family: "sans serif"}

    To make the style definitions more readable, you can describe one property on each line
    p {
    text-align: center; color: black; font-family: arial }

    Selectors Classification

    Tag Selector Compound Selector ID selector Class Selector

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

    All header elements will be displayed in green text color

    This is header h1
    This is header h2
    This is header h3
    This is header h4

    { The class Selector

    With the class selector you can define different styles for the same type of HTML element.
    p.right {text-align: right} p.center {text-align: center}

    Using the class argument in (X)HTML:

    <p class="right"> This paragraph will be rightaligned. </p> <p class="center"> This paragraph will be center-aligned. </p>

    The Identifier Selector


    <p id=intro> This is my introduction text</p> #intro { border-bottom: 2px dashed #fff; }

    Using IDs

    To identify the paragraph as head, use: <p id="head"><img src="scraps.jpg" alt="Online Scrapbooks width="314" height="75" /></p>

    To reference the paragraph in the style sheet, use an id selector: #id {styles} #head {text-align: right; border-bottom: 1px solid orange}

    13

    Contextual Selectors
    Use the tree structure concept to control how styles are applied to a Web page. parent descendant {styles}

    body

    h1

    h2

    h2

    li b {color: blue} apply a blue color to boldfaced lists li b, h2 {color: blue}

    span

    apply a blue color to h2 headings and to boldfaced list items


    14

    Advanced CSS Selectors

    Descendant Selector
    body h1 { } #navigation p {}

    Adjacent Sibling Selectors


    p.intro + span {}

    Child Selectors
    div ol > p {}

    Universal Selector
    * {}

    Attribute Selectors
    div[href=http://home.org]

    Pseudo-Class Selectors
    a:active {} #nav:hover {}

    Difference between class and identifier selector

    Identifier or class? Whats the difference?


    An identifier is specified only once on a page and has a higher inheritance specificity than a class. A class is reusable as many times as needed in a page. Use identifiers for main sections and sub-sections of your document.

    p>b {color: red}


    body

    h1

    h2

    h2

    span

    p b {color: red}
    body
    b

    h1

    h2

    h2

    body {color: red}


    body

    span

    h1

    h2

    h2

    span

    {Cascading order
    1.
    2.

    Browser default External style sheet

    inside external *.css file inside the <head> tag inside an HTML element

    3.

    Internal style sheet

    4.

    Inline style

    Applying a Style Sheet

    Inline styles: A style is applied to a specific element through the use of the style attribute in the elements tag. The style affects that particular tag but does not affect other tags in the document. Embedded styles: A style sheet is placed in a documents head, setting the style definitions for the entire HTML file. External styles: A style sheet is saved in a separate external file and is applied to a group of pages in a Web site.

    19

    {External Style Sheet

    Each webpage must link to the style sheet using the <link> tag
    Browser reads styles definitions from mystyle.css file

    <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

    { Internal Style Sheet

    Should be used when a single document has a unique style Defined in the head section by using the <style> tag

    <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>

    { Multiple Style Sheets

    An internal style sheet has following properties for the h3 selector:


    h3 { text-align: right; font-size: 20pt }

    What will be the format of <h3> tag?


    color: red; text-align: right; font-size: 20pt

    External style sheet has these:


    h3 { color: red; text-align: left; font-size: 8pt }

    o
    o

    Your Web Browser has default formatting:


    h3 { color: black; font size: 10pt }

    Internal Stylesheet

    Usually embed in html elements. Example:

    <h1 style = color: red; text-decoration: overline;

    Using Inline Styles


    <element style=style declarations> element is the name of the tag (h1, h2, etc) A style declaration consists of attributes, and attributes are followed by a colon and then the value of the attribute. Multiple attributes are allowed as long as each attribute is separated by a semicolon. attribute1: value1; attribute2: value2; . . . <h1 style=text-align: right; color: gold; font-family: sans-serif>
    24

    Understanding Cascading Order


    In cases where the styles conflict, precedence is determined in the following order: an inline style overrides any embedded style or external style sheet an embedded style overrides an external style sheet an external style sheet overrides the internal style rules set by the Web browser any style attributes left undefined by an inline style, an embedded style, or an external style sheet are left to the Web browser

    25

    CSS units

    For many of the remaining CSS values, we will need to be able to specify size measurements

    These are used to specify sizes: em width of the letter m ex height of the letter x px pixels (usually 72 per inch, but depends on monitor) % percent of inherited size These are also used to specify sizes, but dont really make sense unless you know the screen resolution: in inches cm centimeters mm millimeters pt points (72pt = 1in) pc picas (1pc = 12pt)
    26

    Note: you can use decimal fractions, such as 1.5cm

    Changing Background

    Control over the background color of an element set an image as the background, repeat a background image

    background-color

    color-rgb color-hex color-name url(URL) none repeat repeat-x repeat-y no-repeat

    background-image

    background-repeat

    Text:

    color direction

    text-decoration

    ltr rtl normal length

    word spacing

    none underline overline line-through blink

    text-align
    left right center justify

    {Font:

    font-family

    font-weigh

    family-name generic-family xx-small x-small small /etc./

    font-size

    normal bold bolder lighter 100

    {List:
    <head> <style type="text/css">

    ul { list-style-image: url('arrow.gif') }
    </style> </head> <body>

    <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>


    </body>

    Setting the Display Style

    To define the display style of an element, use: display: type type is block, inline, . . .

    #links a {display: block; font-family: sans-serif; color: white; font-size: 9pt}


    Each link is displayed in its own block

    33

    The display property

    Every element that is formatted by a CSS command is considered to be in an invisible box The box containing an element can have one of three display properties:

    display: block

    The element will start on a new line, and so will the element that follows it (an HTML paragraph is an example) (default) The element will not start on a new line, or cause the next element to start on a new line (bold is an HTML example) The element is hidden and will not appear on the display

    display: inline

    display: none

    34

    CSS Fonts

    Font-family Font-weight Font-style Font-size

    CSS Text

    Text-indent Text-align Text-decoration Letter-spacing Text-transform Word-spacing White-space

    CSS Background

    Background-color Background-image Background-position Background-repeat

    CSS Lists

    List-style List-style-image List-style-position List-style-type

    Working with the div element


    <style type="text/css"> #box {width: 200px; float: right; background-color: ivory; border: 5 outset orange} #box h3 {text-align: center} #box li {font-family: sans-serif; font-size: 8pt} </style> <div id="box"> <h3>Basic Materials</h3> <ul><li>Acid-free paper, card stock, and stickers</li>
    40

    margin: 5 0 5 5;

    Boxes

    The invisible box containing a styled element has three special areas:

    The element
    padding (invisible) border (can be colored) margins (invisible)

    41

    Padding

    Padding is the extra space around an element, but inside the border To set the padding, use any or all of:

    padding-top: size padding-bottom: size padding-left: size padding-right: size padding: size to set all four sides at once

    size is given in the units described earlier Example: sidebar {padding: 1em; padding-bottom: 5mm}

    42

    Borders

    You can set border attributes with any or all of: border-top:, border-bottom:, border-left:, border-right:, and border: (all at once) The attributes are:

    The thickness of the border: thin, medium (default), thick, or a specific size (like 3px) The style of the border: none, dotted, dashed, solid, double, groove, ridge, inset, or outset The color of the border: one of the 16 predefined color names, or a hex value with #rrggbb or rgb(r, g, b) or rgb(r%, g%, b%)

    Example: section {border-top: thin solid blue;} Note: the special styles (such as groove) are not as cool as they sound
    43

    Margins

    Margins are the extra space outside the border Setting margins is analogous to setting padding To set the margins, use any or all of:

    margin-top: size margin-bottom: size margin-left: size margin-right: size margin: size to set all four sides at once

    44

    CSS Shorthand

    Consolidates many styles into a single declaration.

    font-family: verdana, sans-serif; font-weight: bold; font-size: 12px; font: bold 12px verdana, sans-serif; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 10px; padding: 5px 8px 5px 10px;

    Floating an Element

    To float an element, use: float: position position is none, left, right, or inherit #links {width: 150px; float: left; background-color: rgb(212, 142, 0); margin-right: 10px; padding: 10px; border: 2px solid black}

    46

    Positioning Objects with CSS

    The Position Style


    To place an object at a specific position, use: position: type; top: value; right: value; bottom: value; left: value type is absolute, relative, static (default), fixed, inherit With static, it is the same as not using any CSS positioning at all. All values are ignored by the browser The top, right, bottom, left styles indicate the coordinates of the top, right, bottom, and left edges of the element

    47

    #note1 {position: absolute; left: 600px; top: 150px}

    #note3 {position: absolute; left: 570px; top: 550px} #note2 {position: absolute; left: 170px; top: 400px}

    position:absolute; left: 0in; top: 0in

    position:absolute; right: 0in; top: 0in

    Setting absolute position

    To move an element to an absolute position on the page

    position: absolute (this is required!) and also one or more of left: size or right: size top: size or bottom: size size can be positive or negative top: size puts an elements top size units from the page top bottom: size puts an elements bottom size units from the page bottom left: size puts an elements left side size units from the left edge of the page right: size puts an elements right side size units from the right edge of the page Changing an elements absolute position removes it from the natural flow, so other elements fill in the gap You need to be careful not to overlap other elements
    position:absolute; right: 0in; bottom: 0in
    49

    Confusing stuff:

    position:absolute; left: 0in; bottom: 0in

    Setting relative position

    To move an element relative to its natural position, use


    position: relative (this is required!) and also one or more of left: size or right: size top: size or bottom: size size can be positive or negative to move left, make left negative or right positive to move right, make right negative or left positive to move up, make top negative or bottom positive to move down, make bottom negative or top positive Setting an elements position does not affect the position of other elements, so

    Confusing stuff:

    There will be a gap in the elements original, natural position Unless you are very careful, your element will overlap other elements
    50

    Working with Overflow

    To change how the browser handles content that overflows the size of an element, use: overflow: type

    type is visible (default), scroll, hidden (to hide content overflow), auto (to display scrollbars only when needed)

    .notes {. . . ; width: 130px; height: 100px; overflow: auto}

    51

    Using Pseudo-Classes

    To create a style for pseudo-class, use: selector:pseudo-class {styles}

    usefule pseudo-classes include the link, visited, hover, and active pseudo-classes

    #links a:link {text-decoration: none} #links a:visited {text-decoration: none} #links a:hover {color: black; textdecoration: underline} #links a:active {text-decoration: none}

    52

    Using Pseudo-Elements

    To create a style for pseudo-celement, use: selector:pseudo-element {styles}

    usefule pseudo-elements include the first-line and firstletter pseudo-elements

    <style type="text/css"> #firstp:first-line {font-variant: small-caps} #firstp:first-letter {float: left; font-size: 400%; line-height:0.8} </style> <p id="firstp">Scrapbooking is . . .

    53

    Working with Media Types

    Be default, a style sheet is applied to all devices. To create a style sheet for specific media, add the following attribute: media=type <style type=text/css> h1 {font-family: sans-serif} </style> <style type=text/css media=screen> h1 {color: red} </style> <style type=text/css media=print> h1 {color: black} </style>

    54

    Pseudo-elements

    Pseudo-elements describe elements that are not actually between tags in the XML document
    Syntax: element:pseudo-class {...}

    first-letter the first character in a block-level element first-line the first line in a block-level element (depends on the browsers current window size)

    Especially useful for XML (but not implemented in Internet Explorer):

    before adds material before an element

    Example: author:before {content: "by "}

    after adds material after an element


    55

    CSS Layout

    Margin Padding Border Z-index Positioning Width Height Float Text-align Vertical-align

    Recommendations

    Remove antiquated browser checks and deliver different sheets. Consolidate all our main styles into site.css in the App_Themes folder. All CSS files should be in the App_Themes folder and have a .css extension (not .txt). Make a decision on what standard colors, fonts, alignment, etc should go into the app. Remove spacer.gifs, table layouts, and other browser hacks in lieu of proper CSS. Make a decision on how individual modules should implement their styles. Make a decision on how the CSS file is to be structured. Move inline presentation formatting to CSS external sheets.

    { Text color
    <html><head> <style type="text/css"> h1 {color: green} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

    This is header 1
    This is header 2
    This is a paragraph

    You might also like