Web Authoring Task 1– Create Style Sheet List – LI { Table Body

Slides:



Advertisements
Similar presentations
Cascading Style Sheets
Advertisements

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
CSS Cascading Style Sheets. What is CSS? CSS stands for Cascading Style Sheets (the page—or sheet—helps you create a style that will cascade across all.
Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
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
Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.
Adding styles. Three alternatives HIT151 Web 'n' Net Web Page Basics /*stylesheet*/ h1,h2,h3 { font-family: verdana, arial, 'sans serif'; } p,table,li.
CSS. CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
Very quick intro HTML and CSS. Sample html A Web Title.
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.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
1 Web Developer & Design Foundations with XHTML Chapter 9 Key Concepts.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
Cascading Style Sheet CSS CS1520 Ali Alanjawi. 2 TA Information Ali Alanjawi Homepage: Office:
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
CSS(Cascading Style Sheets )
กระบวนวิชา 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.
Unit 20 - Client Side Customisation of Web Pages
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
211 Multimedia Web Design Lesson 5/6 Dreamweaver Practice.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
Web Authoring Task 8– Create the following Style Sheet: 1.Create a new CSS called Tiger.CSS Style Sheet Body Horizontal Tile using the Tiger.JPG H1 Browsers.
CSS Cascading Style Sheets *referenced from
WebD Introduction to CSS By Manik Rastogi.
CSS.
Create a new stylesheet called Hotel Style
Chapter 17: Document Production (Word)
Open the Nissan.html page in a suitable application and create the table shown below between Table 3 and 4. Set the appropriate sizes for each cell. A.
CS3220 Web and Internet Programming CSS Basics
The Internet 10/11/11 Fonts and Colors
Chapter 17: Document Production (Word)
( Cascading style sheet )
Semester - Review.
Creating Your Own Webpage
Creating Page Layouts with CSS
Cascading Style Sheets
Web Authoring (Ski Resort Task)
Introduction to Web programming
Cascading Style Sheet (CSS)
Web Authoring Task 1– Create Style Sheet H1 H2 P LI OL UL Table Body
Web Authoring Task 8– Create the following Style Sheet:
Style Sheet Create a new CSS called Cameras.CSS TD Web Authoring
Introduction to Web programming
Table CSS Create a new CSS called tablestyle.CSS Green Background
The Internet 10/13/11 The Box Model
Web Authoring Task 1– Create Style Sheet H1 H2 P LI Table Body
Software Engineering for Internet Applications
CSS Style Sheets: Intro
Web Authoring Task 1– Create Style Sheet H1 H2 H3 P LI Table Body
Cascading Style Sheets Color and Font Properties
What are Cascading Stylesheets (CSS)?
The Internet 10/6/11 Cascading Style Sheets
How to use the CSS box model for spacing, borders, and backgrounds
CS3220 Web and Internet Programming CSS Basics
CS3220 Web and Internet Programming CSS Basics
Johan Ng and Muhammad Hazzry
Stylin’ with CSS.
Web Client Side Technologies Raneem Qaddoura
Title Subtitle..
Introduction to Cascading Style Sheets (CSS)
Introduction to Styling
Presentation transcript:

Web Authoring Task 1– Create Style Sheet List – LI { Table Body Write your own CSS for common styles like: h1, h2, h3, P, li – Save style sheet as “Text styles” Attach the style sheet and apply the text styles. Heading 1 – H1 { font- family: San serif; font-size: 24; font-style: italic; colour: RED; font-weight: bold; text-align: Center; } Heading 2 – H2 { font- family: Serif; font-size: 16; colour: Dark Red; text-align: left; Heading 3 – H3 { colour: Red; Paragraph – P { font-size: 12; colour: Black; text-align: Justify; List – LI { font-size: 14; colour: DARK BLUE; List style: disc; Table External border: Black, solid line, 3PX Internal Border: Red, solid line, 1PX Internal colour: Yellow Body Set the background colour to Grey.

Web Authoring Task 2 – Create Table Cell A -H1 Cell B - H2 Cell E – Create a new html file called homepage and attach the stylesheet. Create the table shown below Table Settings: Height: 400Px Width: 400PX Insert the following text into the cells: Cell A: FC Barcelona Cell B: Lionel Andres Messi Cell C: Position: Forward, Date of birth: 24/06/1987 Cell D: Messi is a Argentinian footballer who plays as a striker for FC Barcelona. Cell E: Title: Previous Clubs Newell’s Old Boys FC Barcelona C FC Barcelona B FC Barcelona Insert Messi image into Cell F. Cell A -H1 Cell B - H2 Cell E – Title as H3 Clubs as li Cell F Cell C - P Cell D -P