CSS Nick Sims.

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Advertisements

Cascading Style Sheets
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
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.
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.
Introduction to CSS.
“Cascading Style Sheets” for styling WWW information DSC340 Mike Pangburn.
Chapter 8 Creating Style Sheets.
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.
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,
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
 ult.htm ult.htm  This website illustrates the use of CCS (style sheets)
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
The Characteristics of CSS
1 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
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.
© 2011 Delmar, Cengage Learning Chapter 8 Using Styles and Design Style Sheets for Design.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
DHTML. What is it? Dynamic HTML. Not a standard unlike HTML or Java It is a term applied by both Netscape and Microsoft to a collection of technologies.
Cascading Style Sheets Creating a Uniform Site. Style Sheets  Style sheets are used for conformity on a web page or web site.  Style sheets eliminate.
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.
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.
Introduction to CSS. Why CSS? CSS Provides Efficiency in Design and Updates CSS relatively easy to use Can give you more flexibility and control Faster.
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.
CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.
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.
Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.
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…
Cascading Style Sheets - CSS December 20, 2008 NTPCUG Expression Web SIG.
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.
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.
Cascading Style Sheets (CSS)
CSS 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.
Web Development & Design Foundations with XHTML
Web Basics: HTML/CSS/JavaScript What are they?
Style Sheets.
4.01 Cascading Style Sheets
>> Introduction to CSS
Cascading Style Sheets
Styles with Cascading Style Sheets (CSS)
Concepts of HTML, CSS and Javascript
IS 360 Declaring CSS Styles
Madam Hazwani binti Rahmat
Cascading Style Sheets (CSS)
Intro to CSS CS 1150 Fall 2016.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Website Design 3
Introduction to CSS.
Intro to CSS CS 1150 Spring 2017.
5.2.3 Be able to use HTML and CSS to construct web pages
Stylin’ with CSS.
Cascading Style Sheets
Introduction to Cascading Style Sheets (CSS)
What are Cascading Stylesheets (CSS)?
Training & Development
Tutorial 3 Working with Cascading Style Sheets
Web Design and Development
Stylin’ with CSS.
4.01 Cascading Style Sheets
Stylin’ with CSS.
Cascading Style Sheets Part 1
Presentation transcript:

CSS Nick Sims

Cascading Style Sheets It’s a form of web language which standardises the layout throughout a website It’s good practice to use the same layout for a website CSS allows you to create a standard layout and style which can be used on each web page of a website It is easier to alter and maintain Otherwise the web designer would have to change each reference to a particular style

Cascading Style Sheets (CSS) CSS is made up of a series of styles like: Bold, Italics, Colour, Size The style is defined in the CSS and then used in the HTML – style tags are placed around the content that is to be affected by the style

CSS frameworks CSS can be written into the HTML in three ways: inline, header and external Inline: the CSS is defined in the same area of the code as that to which it is to be applied For example: <p style=“background: red; colour: white; font-family: Times New Roman;” >An Example of Inline CSS</p>

CSS frameworks CSS can be written into the HTML in three ways: inline, header and external Header: the CSS is defined in the head section of each web page and applied throughout the body: For example: See Next Slide

CSS frameworks Header For example: <HEAD> <Style> H1{ Background: red; Color; white; Font-family: times new roman; } </Style> </HEAD> <body> <h1>An example of header CSS</h1> </body> CSS frameworks

CSS frameworks CSS can be written into the HTML in three ways: inline, header and external External: the CSS is defined in a separate file, which all web pages can reference. This is called a CSS file (.css file) there are two lines which can be put in the head of the HTML to link the external file: For example: See Next Slide And see Page 61 of the BTEC IT Level 3 – Book 2

CSS frameworks

Box model CSS is used to create layouts on web pages. Using this method, the pages can be viewed in any browser or resolution and the integrity of the design should remain the same This is because the layout is recalculated on each opening. The resulting page can therefore be designed very accurately