AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing.

Slides:

Advertisements

Similar presentations

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

Advertisements

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

CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.

Today CSS HTML A project.

CSS CSS Precise Aesthetic Control. Cascading Style Sheets Though they can be put in HTML header, usually a separate page that the HTML links to Contains.

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

Very quick intro HTML and CSS. Sample html A Web Title.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

กระบวนวิชา 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.

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

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.

Prepared by ackoo Styli n g your page (font type, font size, colors, text decoration, alignment, set margin, table padding, etc.) References: W3Schools.

Controlling Page Style: Cascading Style Sheets (CSS) References: 1.Wang, P.S & Katila, S. (2004). A Introduction to Web Design and Programming. CA: Thomson.

1 Cascading Style Sheets C S S. 2 What is CSS? A simple mechanism for controlling the style of a Web document without compromising its structure. It allows.

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,

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.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Cascading Style Sheets Example

CSS Dvijesh Bhatt.

Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –

I NTRO TO CSS IAT100 Spring I NTRO TO CSS Covered in this lesson: Overview What is CSS? Why to use CSS? CSS for Skinning your Website Structure.

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.

ITCS373: Internet Technology Week 3: Introduction to CSS Dr. Faisal Al-Qaed.

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

Click to begin Click to begin Mr. Thomas CSS Multiple Multiple Choice Fill-In The Fill-In The Blank Fill-In The Fill-In The Blank 10 Points 20 Points.

WRT235: Writing in Electronic Environments CSS Classes, IDs, divs.

CO1552 – Web Application Development 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.

Cascading Style Sheets in.NET Lilian Kiilu, Client/Server & Web Applications, Coms 463/563, Section 1pm, Fall 2005, November 16 th 2005.

Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.

CHAPTER 3 CSS & CSS3 อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.

IS 360 Declaring CSS Styles. Slide 2 Introduction Learn about the three ways to declare a style Inline / embedded / external Learn about the effect of.

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Tutorial 7.

Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)

CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.

Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.

>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.

Cascading Style Sheets

CSS Fun damentals The Document Hierarchy Element Relationships The Box Model.

REEM ALMOTIRI Information Technology Department Majmaah University.

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.

Intro to CSS Christy. What is CSS?  Cascading Style Sheets  Separates content from presentation  Defines how to display HTML elements  Provides control.

1 CSS محمد احمدی نیا 2 Of 21 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements 

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to

HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,

Html: structure & content CSS: presentation & style A CSS Primer chapter 4.

CSS DHS Web Design. Location Between the & Start with – End with –

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.

1 Cascading Style Sheets

WebD Introduction to CSS By Manik Rastogi.

4.01 Cascading Style Sheets

CSS Rule Selector Declaration Block Value Attribute Name body {

IS 360 Declaring CSS Styles

Cascading Style Sheets

Intro to CSS CS 1150 Fall 2016.

Cascading Style Sheet (CSS)

CASCADING STYLE SHEET CSS.

Website Design 3

Intro to CSS CS 1150 Spring 2017.

What are Cascading Stylesheets (CSS)?

The Internet 10/6/11 Cascading Style Sheets

4.01 Cascading Style Sheets

Presentation transcript:

AGENDA Introduction Syntax How to use style specifications. Styles CSS Tutorial Miftahul Huda Speech Signal Processing Research Group Digital Signal Processing Laboratory EEPIS

Introduction Introduction Applying multiple sheets to a single document

Introduction Introduction WARNING Don't go there!

Introduction Introduction.warning {color:#ff0000} h1.warning {text-decoration:underline} p.warning {font-weight:bold} WARNING Don't go there!

Syntax Syntax selector {property: value} Examples: body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red}

How to... - External Style Sheet Styles are specified in an external file. This is the most common and useful way of using style specifications. <link rel="stylesheet" type="text/css" href="mystyle.css">... relationship

How to... - Internal Style Sheet Styles are specified inside the header of the HTML document. hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}...

How to... - Inline styles A style is applied to only one occurrence of an element. This is a paragraph Use this method sparingly!

Follow a demonstration

Working with the Box Model The box model is an element composed of four sections: –Margin –Border –Padding –content

Rounded corners in CSS

.roundcont { width: 250px; background-color: #f90; color: #fff; }.roundcont p { margin: 0 10px; }.roundtop { background: url(tr.gif) no-repeat top right; }.roundbottom { background: url(br.gif) no-repeat top right; } img.corner { width: 15px; height: 15px; border: none; display: block !important; }

<img src="tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> Teks isi <img src="bl.gif" alt="" width="15" height="15" class="corner" style="display: none" />