Week 2: Introduction to Design and CSS

Slides:

Advertisements

Similar presentations

Cascading Style Sheets Alternative to HTML tag style.

Advertisements

Cascading Style Sheets

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.

/k/k 1212 Cascading Style Sheets Part one Marko Boon

Part 2 Introduction to CSS. CSS Syntax – class selector 1 With the class selector you can define different styles for the same type of HTML element. You.

Introducing CSS CIS 133 mashup Javascript, jQuery and XML 1.

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

HTML Tables, Lists, Blocks, Colors, Styles

CSS cont. October 5, Unit 4. Padding We can add borders around the elements of our pages To increase the space between the content and the border, use.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.

Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.

Lecture 5. CSS 2 What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles.

4.01 Cascading Style Sheets

CM143 Week 4 Introducing CSS. Cascading Style Sheets A definition for the style in which an element of the webpage will be displayed Border width, colour,

Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.

TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.

Web Technologies COMP6115 Session 2: Planning, Designing, Constructing and Testing Static Web Sites Dr. Paul Walcott Department of Computer Science, Mathematics.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.

Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.

ECMM6018 Enterprise Networking For Electronic Commerce Tutorial 2 Cascading Style Sheets (CSS)

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.

Form Tag How to use Form Tag Something NEW ? PARAMETER Attribute NAME Specifies the name for a form To specify which form to submit with JavaScript, this.

Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.

Applying Color in CSS Web Design – Sec 4-5 Part or all of this lesson was adapted from the University of Washington’s “ Web Design & Development I ” Course.

Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.

Introduction to Cascading Style-sheets (CSS) Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1.

Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.

Cascading Style Sheets CSS. Source W3Schools

DYNAMIC HTML What is Dynamic HTML: HTML code that allow you to change/ specify the style of your web pages. Example: specify style sheet, object model.

XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.

CSS Cascading Style Sheets *referenced from

Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.

HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.

1 Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size, font color etc…

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

CASCADING STYLE SHEET CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

WEB FOUNDATIONS CSS Overview. Outline  What is CSS  What does it do  Where are styles stored  Why use them  What is the cascade effect  CSS Syntax.

Week 1: Introduction to HTML and Web Design

Web Basics: HTML/CSS/JavaScript What are they?

Week 3: Introduction to Javascript

4.01 Cascading Style Sheets

Web Development & Design Foundations with HTML5 8th Edition

Week 4: Introduction to Javascript

>> CSS Rules Selection

Cascading Style Sheets

Web Development & Design Foundations with HTML5

The Web Wizard’s Guide To DHTML and CSS

Intro to CSS Mr. Singh.

Introduction to Cascading Style Sheets (CSS)

Instructions for creating a template in MS Frontpage

Web Design and Development

Part 1: Cascading Style Sheets

Please bookmark your URL

4.01 Cascading Style Sheets

Web Programming and Design

Web Programming and Design

Week 5: Recap and Portfolio Site

Web Programming and Design

Web Programming and Design

© 2017, Mike Murach & Associates, Inc.

Presentation transcript:

Week 2: Introduction to Design and CSS MPT Web Design Week 2: Introduction to Design and CSS

What will we do in this class? Learn the basics of CSS Different ways and places we can write our CSS Syntax of CSS Colour

Class Plan WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 Introduction to HTML, Page Structures/layouts, Browsers Homework: Make a HTML page for your competition page. Come up with a design plan WEEK 2 Introduction to CSS and how to apply style to a web page Homework: Colour and design scheme for your competition page using paletton WEEK 3 Introduction to JavaScript and dynamic web pages Homework: WEEK 4 More JavaScript WEEK 5 HTML, CSS, JavaScript, complete portfolio site and competition site

CSS

How does CSS Work?

What Does CSS do?

CSS Hierarchy 3 Places the Style can go External CSS (.css) File <style> tags in <head> Inline in a html tag <div style=” ”></div>

Colour

Colour in CSS Colors in CSS are most often specified by: A valid color name - like "red" An RGB value - like "rgb(255, 0, 0)" A HEX value - like "#ff0000" rgb(red 0-255, green 0-255, blue 0-255) #r8r1g8g1b8b1 - e.g. “#00ff00” is just green Hex uses 0-9 and a-f

CSS Animations

CSS3 Animations CSS3 animations allows animation of most HTML elements An element's style can be gradually animated over time To do this we must specify keyframes (discussed more in web animation) Simply keyframes mark a change in something over time Every keyframe must be bound to an element

CSS3 Animation Examples

Resources W3schools: http://www.w3schools.com/css/ W3schools Colour Picker: http://www.w3schools.com/colors/colors_pic ker.asp Palleton: http://paletton.com/