Comp 135 web site design intermediate
Download
1 / 35

COMP 135 Web Site Design Intermediate - PowerPoint PPT Presentation


  • 116 Views
  • Uploaded on

COMP 135 Web Site Design Intermediate. Week 4. How to Apply CSS to HTML. Three ways to apply CSS: Inline CSS Internal style sheets ( header style information) External style sheets. Inline CSS. Add style declarations directly to elements by specifying values into style attributes

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'COMP 135 Web Site Design Intermediate' - drago


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Comp 135 web site design intermediate

COMP 135Web Site Design Intermediate

Week 4


How to apply css to html
How to Apply CSS to HTML

  • Three ways to apply CSS:

    • Inline CSS

    • Internal style sheets ( header style information)

    • External style sheets


Inline css
Inline CSS

Add style declarations directly to elements by specifying values into style attributes

<p style=“color: red;”>This is a paragraph.</p>

<p style=“color: red;”>This is another paragraph with more text.</p>


Internal style sheet
Internal Style Sheet

CSS rules placed inside the <style> element within the document <head>

<head><title>Internal Style Sheet Example</title><style type=“text/css”>p { color: red; }</style>

</head>

<body><p>This is a paragraph.</p><p>This is another paragraph with more text.</p>

</body>


External style sheet
External Style Sheet

CSS rules placed inside a separate file with a .cssextension; file is referenced with a <link> element in the document <head>

<head><title>Internal Style Sheet Example</title><link rel=“style sheet” type=“text/css” href=“external_stylesheet.css”>

</head>

<body><p>This is a paragraph.</p><p>This is another paragraph with more text.</p>

</body>


Best practice
Best Practice

You won’t likely use inline CSS unless you want to override an internal or external style sheet (troubleshooting inheritance or cascade problems)

Inline style sheets better – all rules in one place for easy updating but, this only applies to that document

External style sheets are best – allows for styling many documents from one place and separates presentation from content


Css selectors
CSS Selectors

Element selector: p

ID selector: #

Class selector: .

HTML

<h1 id=“chapter”>Chapter 1</h1>

<p class=“summary”>Loremipsum</p>

CSS

<style type=“text/css”>

#chapter { font-size: 3.5em; }

.summary { font-style: italic; }

p { font-family: Arial, Helvetica, sans-serif; }

</style>


Child selector
Child Selector

This is a child selector combinator

Selects the right-hand element only if it’s a direct child of the left-hand element. Not supported in IE 6 or earlier

CSS

li > p { color: red; }

HTML

selects

<li>

<p>Loremipsum</p>

</li>

But not

<p>Loremipsum</p>


Descendant selector
Descendant Selector

The white space is the descendant selector combinator

Similar to child selector except right-hand element does not need to be direct child of left-hand element – it can select elements further down the DOM hierarchy

CSS

li p { color: red; }

HTML

selects

<li><p>Loremipsum</p></li>

and

<li><div><p>Loremipsum</p></div></li>

But not

<p>Loremipsum</p>


Universal selector
Universal Selector

Select every single element in a document

* { border-color: red; }


Attribute selector
Attribute Selector

Select any element with the attribute specified in the square brackets. Can be just the attribute type or an attribute with a specific value

CSS

img[alt] { border-color: red; }

img[src=“image.png”=] { border-color: red; }

HTML

<img alt=“An image” src=“image.png”>


Adjacent sibling selector
Adjacent Sibling Selector

This is the adjacent sibling selector combinator

This selects the right-hand element only if it has an instance of the element on the left-hand side next to it, on the same level of the DOM hierarchy. These selectors not support in IE6 or earlier

h2 + p { color: red; }

<h2>Heading</h2>

<p>A paragraph</p>

But not

<p>A paragraph</p>

Nor

<h1>Heading</h1>

<p>A paragraph</p>


Pseudo classes
Pseudo Classes

Styles elements based on their states, typically link behaviour

a:hover { color: red; }

All links will change to the colour red when the mouse hovers over them


Pseudo elements
Pseudo Elements

Allows for styling of specific content parts of an element rather than the whole element

p:first-letter { font-size: 300%; }

Triples the size of the first letter of each paragraph

p:first-line { font-weight: bold; }

Bolds the first line of each paragraph


Group selector
Group Selector

Give multiple selectors the same style by listing them together separated by commas

HTML

<h1 id=“chapter”>Chapter 1</h1>

<p class=“summary”>Loremipsum</p>

CSS

<style type=“text/css”>

#chapter, .summary { font-style: italic; }

p, #chapter { color: rgb(240,128,96); }

</style>


Joining selectors
Joining Selectors

Create even more specific selectors by joining selectors

HTML

<h1 id=“chapter”>Chapter 1</h1>

<p class=“summary”>Loremipsum</p>

CSS

<style type=“text/css”>

p.class { color: red; }

h1#chapter { color: red; }

</style>


Conflicting style rules
Conflicting Style Rules

Sometimes two or more conflicting styles may be applied to the same element

How do you resolve this conflict and decide which one actually gets applied?

You need to understand inheritance and the cascade


Inheritance
Inheritance

Just as in genetics where traits can be inherited by children from their parents,

This is the mechanism by which certain properties can be passed from a parent element to its child elements

Without it you’d have to specify every property for every element every time you wrote a web page


Comp 135 web site design intermediate

Much easier to specify the default font on the <body> element knowing that all child elements of <body> will inherit that property

body { font-family: Georgia; }

h1, h2, h3 { font-family: Helvetica; }/* This overrides the first rule because it is listed later in the code */


Comp 135 web site design intermediate

  • Not all properties are inherited

  • e.g., margins, borders

  • Common sense should tell you what is and isn’t inheritable, or review the CSS 2.1 specification property summary table:

    www.w3.org/TR/CSS21/propidx.html


The cascade
The Cascade

  • The “Cascade” in Cascading Style Sheets (CSS)

  • The mechanism that determines the end result when when multiple conflicting and overlapping rules apply to the same element

  • Three concepts:

    • Importance

    • Specificity

    • Source order


How it works
How it works

Importance is important; if two declarations have the same importance then the specificity of the rule determines which one is applied

If two declarations have the same specificity, then the source order determines which rule wins


Importance
Importance

  • Importance of a CSS declaration depends on where it is specified.

  • Conflicting rules are applied using the following order; later ones override earlier ones:

    • User agent style sheets

    • Normal declarations in author style sheets

    • Normal declarations in user style sheets

    • Important declarations in author style sheets

    • Important declarations in user style sheets


Comp 135 web site design intermediate

  • User agent style sheet

    • Built-in browser style sheet (default properties)

  • User style sheet

    • Not all browsers support this but users can add their own. Typically used to enhance accessibility

  • Author style sheet

    • This is the “style sheet” that we normally think of

    • Written by the web designer


Important declarations
Important Declarations

Normal declarations are normal declarations

Important declarations are just the opposite: important; these are declarations followed by the !important directive:

* { font-family: Helvetica !important; }

Default browser rendering of elements are not overridden unless a rule in user or author style sheet is specified


Specificity
Specificity

Key concept that all web designers need to understand

A measure of how specific a rule selector is

Selectors with low specificity may match many elements on the page

Selectors with high specificity may match a single element on a page

e.g., p matches every paragraph in a document whereas #nav, only matches the element with the id of nav


Calculating specificity
Calculating Specificity

If two or more rules conflict and all have equal importance, then the rule with the most specific selector wins

Specificity has four components; call them a, b, c, and d

Component “a” is the most distinguishing and “d” the least


Scoring specificity components
Scoring Specificity Components

Component “a” given 1 for declaration in a style attribute, otherwise it’s 0

Component “b” is the number of id selectors in the selector (those that begin with #)

Component “c” is the number of attribute selectors, class selectors, and pseudo-classes

Component “d” is the number of element selectors and pseudo-elements



Comp 135 web site design intermediate

Combinators like >, + and the white space (descendant selector) have no effect on specificity

id selector is not the same specificity as an attribute selector that refers to the same id attribute

[id=“nav”] has a specificity of 0,0,1,0 wheras#navhas a specificity of 0,1,0,0


Source order
Source Order

  • Given conflicting rules with the same importance and the same specificity, source order is used to determine the winner: the declaration that appears later in the style sheet

  • In a single external style sheet the declarations at the end of the file override those at the beginning when they conflict

  • If the conflicting rules appear in different style sheets the order in which they are linked or imported controls which one is applied

    • If there are two linked style sheets in the <head> of a document the one linked last overrides the one linked first


The css box model
The CSS Box Model

Content

Padding

Border

Margin

The space around a block element

Height

Width

  • Border – sets a visible border around the element’s content

  • Padding – sets the space between the content and inner border edge

  • Content – represented by text characters and displayed in a typeface

  • Width – default is width of the line of text

  • Height – default is distance between ascender and descender

Margin – defines the space between block elements


Collapsing margins
Collapsing Margins

When adjacent elements have top and bottom margins that meet, you would assume the total space between the two elements is the sum of the bottom margin of one element and the top margin of the next element

In CSS the value collapses to the larger value of the two element margins

If the values were 5 + 10 the effective value is 10

If they were 5 + 5 the effective value is 5