CSS. What does it stand for? Cascading Style Sheets.

Slides:

Advertisements

Similar presentations

LIS650 lecture 4 Thomas Krichel today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.

Advertisements

LIS901N: Style sheet Thomas Krichel Style sheets Style sheets are the officially sanctioned way to add style to your document We will cover.

Working with Web Tables

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)

CSS Nael Alian div.ex { width:220px; padding:10px; border:5px solid gray; margin:0px; } The line above is 250px wide. The.

9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.

Today’s objectives Site performance Padding, Margins, Borders

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

CSS provides a way to stray away from the traditional methods of using tables to lay out pages. Success with this technique depends on understanding of.

Tutorial 4: Creating page layout with css

Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.

CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.

1 Lesson Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.

Style sheets can also affect the BODY. style4.css BODY {BACKGROUND-COLOR : white} H1 {COLOR : red; FONT-SIZE : 50; FONT-FAMILY : arial} H2 {COLOR : green}

Style sheets can also affect the body. style4.css body {background-color : white} h1 {color : red; font-size : 50; font-family : arial} h2 {color : green}

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

XHTML1 Tables N100 Creating a Simple Web Page. XHTML2 Creating Basic Tables Tables are collections of rows and columns that you use to organize and display.

1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.

HTML Line Breaks and HTML Horizontal Rules (Lines)

CSS Dvijesh Bhatt.

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.

ASP.NET Web Server Controls Basic Web Server Controls.

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

Today’s objectives  Assignment 1  Padding, Margins, Borders  Fluid Layout page  Building accessible Table  Element size with padding and border 

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.

CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.

Part 4 Introduction to CSS. CSS Table Table Borders table, td, th { border:1px solid black; } Firstname Lastname Bader Ali Paul Manuel The example below.

Cascading Style Sheets Chapters 5-6 Color and Background Controls Border and Margin Controls.

Web Foundations THURSDAY, OCTOBER 3, 2013 LECTURE 6: CSS CONTINUED.

>> 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.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.

Advanced Web Development Instructor: Thomas Bombach.

Cascading Style Sheets CSS. Source W3Schools

1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.

Table Styling. Using CSS to Style Tables: So far, our table styling - such has "width" and "border" - has not used CSS. CSS provides us with many tools.

Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.

Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ CSS Training.

Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains.

Tutorial 4 Creating Page Layouts with CSS

CIS234A Lecture 6 Instructor Greg D’Andrea. Span and Div The span and div elements are a generic means by which we can add structure to documents. The.

CSS Table Styling. Up to this point, as we haven't applied any CSS styling to our tables, our example tables have not been too pleasing to the eye. CSS.

CIS 228 The Internet 10/18/11 Grouping XHTML. CSS Selectors Rule: selector-group { property-declaration* } Selector-group: selector *, Selector: simple-selector.

Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,

CSS. What does it stand for? ___________________.

CSS. What does it stand for? Cascading Style Sheet.

Chapter 6 - Cascading Style Sheets™ (CSS)

Cascading Style Sheets Boxes

( Cascading style sheet )

CSS Table Styling.

>> The “Box” Model

CSS Applications to XML 19-Sep-18.

CSS Table Styling.

Objectives Create a reset style sheet Explore page layout designs

Cascading Style Sheets

CSS Borders and Margins.

Second CSS Lecture Applications to XML

List Properties Box Properties Pseudoclass

More CSS Page layout Boriana Koleva Room: C54

More CSS 22-Feb-19.

CSS Boxes CS 1150 Fall 2016.

CSS Applications to XML 20-May-19.

CSS Applications to XML 3-Jul-19.

Presentation transcript:

CSS

What does it stand for? Cascading Style Sheets

What is it? CSS is a method for styling tags

How do we use it? By including a style attribute in the tag to be styled For example: content

What’s the format? The format is as follows: property:value;

Give me an example Content

What about adding other styles? No problem! Just add to the style attribute Here’s an example: Content

How do we know what properties exist? Easy, the web has loads of information on CSS style properties and their possible values. A good reference can be found at:

What are other possible values for a property? Again, you can find your answers by looking at sites with info on CSS At the site listed in the previous slide, do some research and find out what other values you can assigned to the border-style property. See next slide for all the possibilities!

none - no border. dotted - A series of dots (IE will display this as dashes if the border width is one pixel). dashed - A series of dashes. solid - A solid line. double - Two solid lines. groove - Patterned border that is supposed to represent a carved groove (opposite of ridge). Renders differently in different browsers. ridge - Patterned border that is supposed to represent an embossed ridge (opposite of groove). Renders differently in different browsers. inset - Patterned border that is supposed to represent an inset depression (opposite of outset). Renders differently in different browsers. outset - Patterned border that is supposed to represent an outset extrusion (opposite of inset). Renders differently in different browsers. hidden - Used with tables. Same as "none", except where there are conflicting borders. Not supported by IE. border-style can have: – one value, such as solid, to specify the style of the entire border – two values, such as solid dotted, to specify the style of top/bottom (first value) and right/left (second value) borders – three values, such as solid dotted dashed, to specify the style of top (first value), right/left (second value) and bottom (third value) borders – or four values, such as solid dotted dashed groove, to specify the style of top, right, bottom and left borders respectively