LT: I can use CSS to decorate a web page. Do Now: Get your storyboard, and log in to winhome. Write our a list of colors you want in your website. (Minimum.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
กระบวนวิชา 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.
Cascading Style Sheets Understanding styles. The term cascading describe the capability of a local style to override a general style. CSS applies style.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
Prepared by ackoo Styli n g your page (font type, font size, colors, text decoration, alignment, set margin, table padding, etc.) References: W3Schools.
Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.
Workshop: CSS-Part I Cascading Style Sheets add style to your HTML web pages.
4.01 Cascading Style Sheets
Computing Concepts: CSS. Aims  To understand the uses of css  To understand the different types of css  To be able to create a css file  To be able.
Cascading Style Sheet Basics Pepper. Looking at the HTML See the surrounding tags See head, body, paragraph, header See the ending tags See the list.
Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.
HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
INTERNAL CSS Casey Ames Different types of CSS There are three different types of CSS: ◦ External CSS ◦ Internal CSS ◦ Inline CSS In this presentation.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Introduction to CS520/CS596_026 Lecture One Gordon Tian Fall 2015.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Lesson 2 Adding more content to your web page. Thanks to Richard Hudnutt, Luella HS.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
CO1552 – Web Application Development Cascading Style Sheets.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
Moving Boxes The CSS ‘box’ Model and moving elements around the page 1.
Colors & Fonts Building a Website Lesson 7. Font Font The tag specifies the font face, font size, and color of text. The tag can have any or all of these.
DIV, Span, CSS.
Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.
Cascading Style Sheets
Quick Questions 1. What does HTML stand for? 2. What are the three main languages of the Web? 3. What is the purpose of the tags? 4. Why do we indent different.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
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.
HTML & CSS BasicsHTMLCSSQuizAnswers  The logo In this website(made of html and css Codes), you will learn some basics of How to use HTML and CSS codes.
CSS Fun damentals The Document Hierarchy Element Relationships The Box Model.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain.
Designing Web Pages The case for CSS. The Power of CSS css Zen Garden
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Practice for Chapter 3: Assume that you are a freelance web designer and need to create a website to promote your freelance company.
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.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
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.
CSS (Cascading Style Sheets). CSS CSS – Cascading Style Sheets – Cascade because of the way CSS rules can stack on top of each other. Allows you to add.
CSS.
Web Protocols, Technologies and Applications
Cascading Style Sheets (CSS) Internal Style Sheets Classes
Cascading Style Sheets
Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.
4.01 Cascading Style Sheets
>> Introduction to CSS
Key concepts of Computing
Cascading Style Sheets
Web Development & Design Foundations with HTML5
CASCADING STYLE SHEET CSS.
Software Engineering for Internet Applications
Cascading Style Sheets
Web Design and Development
4.01 Cascading Style Sheets
Web Programming and Design
Presentation transcript:

LT: I can use CSS to decorate a web page. Do Now: Get your storyboard, and log in to winhome. Write our a list of colors you want in your website. (Minimum 3 colors not including Black or White.) Unit 3 – Web Design

LT: I can use CSS to decorate a web page. What is CSS CSS stands for Cascading Style Sheets CSS is used to add color and style CSS provides formatting options

LT: I can use CSS to decorate a web page. CSS Can be written as: Inline styles Internal style sheets External style sheets

LT: I can use CSS to decorate a web page. Inline Styles Go inside tags in an HTML page. Have ordered pairs that define the style elements This text is blue

LT: I can use CSS to decorate a web page. Internal Styles Go inside the head of an HTML page. Are defined by the tag Have ordered pairs that define the style elements

LT: I can use CSS to decorate a web page. My Page body { background-color: linen; } h1 { color: maroon; margin-left: 40px; }

LT: I can use CSS to decorate a web page. Reflection: Add styles to your page for the tag that set the left margin to 85 pixels and the line height to 2 (hint: use w3schools.com) Turn in your html page by .