Web Concepts_Introduction to presentation.pptx

1 •History
2 •Basic Website
3 •Factors affecting Website design
4 •Planning to build a Website
5 •From basic to “wow” Website
6 •Another way to build a Website

“WOW” Website
ADDING STYLE TO A BASIC WEBSITE

Cascading
Style Sheets
Typography Boxes
Page
Layouts
Graphics
and Colour
Navigation
Tables Forms
Responsive
Website

(1) Responsive, (2) Logo, Font, Colour, (3) Eye-catching Image, (4) Clear Navigation, (5) Contact Details,
(6) Persuasive Title, (7) Important Info (“above the fold”), (8) Videos/Audios/Animation, (9) Calls to Action, (10) Trust Indicator
https://blog.hubspot.com/marketing/anatomy-web-design

CSS
let’s you control the display characteristics of your website
o CSS syntax
o How CSS will work with HTML (style rules)
o Techniques
o Inheritance
o Apply styles only to certain groups of elements or sections of text (<div> and <span>)
o Attributes (i.e. class, id)

Benefits of CSS
CSS Style Rules
o Combining CSS Style Rules with HTML
 External Style Sheets
 Internal Style Sheets
 Inline Styles
Writing Clean CSS Code
o Using Comments

Style Rules
Style rules express the style characteristics for an HTML element
A set of style rules is called a style sheet
Style rules are composed of two parts: a selector and a declaration
1. The selector determines the element to which the rule is applied
2. The declaration details the exact property values

Style Rules
The declaration contains a property and a value
1. The property is a quality or characteristic
2. The precise specification of the property is contained in the value
CSS includes a wide variety of different properties, each with a specific number of values
CSS Tutorial

Combining CSS Style Rules with HTML
You combine CSS with HTML in three ways:
Inline style
Internal style sheet
External style sheet

Combining CSS Style Rules with HTML
External Style Sheets
o text documents that contain style rules
o let you specify rules for multiple web pages
o they have a .css extension
o on your HTML document, use the link element within the <head> section to specify the external style sheet
Internal Style Sheets
o contained within the <style> element within the <head> section
o only affect the document in which they reside
Inline Styles
o can define styles for a single element with the style attribute
o the style attribute can be used to override a style that was set at a higher level

Writing Clean CSS Code
Write CSS code that is consistent and easy to read
o Correct but hard-to-read:
o Better:
Use Comments in your code /* This is where you place your CSS comments*/

Inheritance
(to Write Simpler Style Rules)
Elements in an HTML document are structured in a hierarchy
o Parent elements contain child elements
You can style multiple document elements with just a few style rules
using inheritance
o CSS properties inherit from parent to child
The property descriptions list whether a property is inherited

Using Inheritance to Write Simpler Style Rules
o Specific style rules: o Using inheritance:

Examining Basic Selection Techniques
In this section, you will review style rule syntax and learn about the following basic selection
techniques:
1. Using type selectors
2. Grouping selectors
3. Combining declarations
4. Using descendant selectors
5. (Universal selector)

1. Using Type Selectors
The selector determines the element to which a style declaration is applied
Type selectors are the simplest form of selector
They select every element in the document that matches the style rule
In the following example, all h1 elements are red

2. Grouping Selectors
You can group selectors to which the same rules apply
o Specific style rules: o Grouping selectors:

3. Combining Declarations
You can state multiple property declarations for the same selector
o Specific style rules: o Combining declarations:

4. Using Descendant Selectors
You can select elements that are descendents of other elements
Examples:
o selecting only <em> elements that are contained within <p> elements
o selecting only <em> elements within <li> elements within <ul> elements – more specific

5. Using the Universal Selector
Universal selector (*) lets you select groups of elements
The universal selector is always overridden by more specific selectors.
Examples:
o setting default color for all elements
o selecting all children of the <div> element

Using class and id Selectors
In this section, you will learn to select elements of an HTML document using the following
methods:
1. The class selector
2. The id selector
3. The <div> and <span> elements

1. Using the class Selector
The class selector lets you write rules and give them a name
o You can apply that name to any element you choose
The class attribute lets you apply the style rule name to an element
The period (.) flag character indicates the selector is a class selector

2. Using the id Selector
The difference between id and class is that ID refers to only one instance of the id attribute value
within a document
The ID attribute is used to identify layout sections of the page
The ID attribute uses a pound sign (#) flag character

3. Using the <div> and <span> Elements
The <div> (division) and <span> (span of words) elements are designed to be used with CSS
They let you specify logical divisions within a document that have their own name and style
properties
They are used with the Class and ID attributes

<div>
block element used to create logical divisions on a web page

<span>
lets you specify in-line elements that have their own name and style properties

Other Selectors
o Attribute selector
o Pseudo-class and pseudo-element selectors
o (Advanced: Structural Pseudo-Class selector, UI Element States selector)

Attribute Selectors
Attribute selectors let you select an element based on whether the element contains an
attribute
Elements can be selected based on a specific value the attribute contains
Attribute selectors match against attributes and their values

Pseudo-Class and Pseudo-Element Selectors
Pseudo-classes
o select elements based on characteristics other than their element name
o for example, you can change the characteristics of hypertext links with pseudo-classes
Pseudo-elements
o let you change other aspects of a document that are not classified by standard elements such as the
first letter or line of a paragraph

Using the Link Pseudo-Classes
•The link pseudo-classes let you change the style characteristics for four different hypertext
link states
o Because of the specificity of the pseudo-class selectors, you should always place your link pseudo-class in the order listed
above (see example next page)
only apply to the <a> element with an href attribute

Using the :first-letter Pseudo-Element
•used to apply style rules to the first letter of any element:
to apply style rules to the first letter of any element

Want to apply to one paragraph rather than all?
Use CLASS Selector

Want to Drop the First Letter?
Use Float

Using the :first-line Pseudo-Element
affects the first line of text in an element

Using the :Before and :After Pseudo-Elements
let you insert created content - useful for repeated content

CONFLICTS
Multiple style sheets can apply to the same document
Only one rule can apply to an element
The CSS cascading mechanism determines which rules apply based on three variables:
◦ Specificity of the selector
◦ Order of the rule in the style sheet
◦ Use of the !important keyword

Specificity
(More Specific = Higher Precedence)
Inline style > Internal style sheet > External style sheet
ID selector > Class selector > Type selector

Order
(Latest = Higher Precedence)

Thank you!
IT4101 – WEB CONCEPTS

Web Concepts_Introduction to presentation.pptx

Recommended

Recommended

More Related Content

Similar to Web Concepts_Introduction to presentation.pptx

Similar to Web Concepts_Introduction to presentation.pptx (20)

More from clement swarnappa

More from clement swarnappa (14)

Recently uploaded

Recently uploaded (20)

Web Concepts_Introduction to presentation.pptx