CSS.

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.
Cascading Style Sheets
Today CSS HTML A project.
Introduction to CSS.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา 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.
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.
Design, Formatting, CSS, & Colors 27 February, 2011.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
Design, Formatting, CSS, & Colors September 9, 2010.
4.01 Cascading Style Sheets
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.
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.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
CSS Basic (cascading style sheets)
CSS. HTML: Looking Back HTML dictates order, structure, and function Does very little to specify layout or visual rendering.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
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.
HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser.
 Look especially at › File Tips and Shortcuts › Student video.
Main page banner area Navigation bar area Main area for information content Look at a simple page from the Waitrose supermarket site. It has three main.
Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.
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.
WebD Introduction to CSS By Manik Rastogi.
CSS.
Laying out Elements with CSS
Getting Started with CSS
CS3220 Web and Internet Programming CSS Basics
4.01 Cascading Style Sheets
( Cascading style sheet )
Google fonts CSS box model
UNIT-II CSS.
Display Property.
Introduction to Web programming
Box model.
Intro to CSS CS 1150 Fall 2016.
Web Systems & Technologies
Cascading Style Sheets
Filezilla problems continuing
COMP 101 Review.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Website Design 3
Cascading Style Sheets - Building a stylesheet
Introduction to CSS.
Introduction to Web programming
Intro to CSS CS 1150 Spring 2017.
CSS.
CSS Borders and Margins.
CSS Box Model.
DynamicHTML Cascading Style Sheet Internet Technology.
CS134 Web Design & Development
Introduction to Cascading Style Sheets (CSS)
What are Cascading Stylesheets (CSS)?
Cascading Style Sheets™ (CSS)
DynamicHTML Cascading Style Sheet Internet Technology.
Training & Development
CS3220 Web and Internet Programming CSS Basics
CSS.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Web Design & Development
CSS and Class Tools.
Cascading Style Sheets - Building a stylesheet
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
4.01 Cascading Style Sheets
Cascading Style Sheets III B. Com (Paper - VI) & III B
Web Programming and Design
Introduction to Cascading Style Sheets (CSS)
CGS 3066: Web Programming and Design Fall 2019
Presentation transcript:

CSS

Web Instructions: Three Legs HTML Content CSS Presentation JavaScript Behavior

Special symbols in HTML < and > are special symbols with special meanings How would you display A < B ? Suggestions? < for < and > for > & is an escape symbol, handled specially. Always ends with ; Means that you need a special way to display “&” too: & Good list at http://www.utexas.edu/learn/html/spchar.html

CSS... CSS is for giving style to your content HTML: content CSS: style CSS Zen Garden

What can you change? Font: size, color, style Background Border More on color next week For now, by name Background Border Must have size color and style Position: margins, centering Size

Font Families Preferable to use: universality Multiple fonts: use first available

Defining size pt refers to printer’s font measurement px refers to pixels em is a relative measure 1 em = base size (defined in body or default) Great for changing all at once

Syntax (how it looks) Selector specifies the HTML element to style Declaration: always contains a property & value ends with a semicolon Property: style element you want to change Value: what you are changing the property to Next we’ll discuss the syntax of css. It’s a different language from html, so it will look a little bit different. Selector allows us to choose a tag from the html to edit

Formatting your CSS Formatting Practices: some flexibility, but you must be consistent. always comment unclear code! /* someCommentHere */ curly braces tab alignment Bad practices: declarations on the same line as braces or selector multiple declarations on the same line leaving off the last semi-colon

Commonly Used Tags & Properties full reference sheet

Every element is in box With very few exceptions, every element in HTML has a box that it is held in Can make it visible with background and border

Centering centering the TEXT text-align: center; centering the BOX Need to tell it to treat as a block display: block; Must have a width (px or %) display: table; computes it for you center using margin margin-left: auto; margin-right: auto;

Centering list items One of the areas with browser differences In some cases (Firefox), centering text centers the bullet In other cases (Chrome), centering text does not center the bullet Solution: list-style-position: inside; bullets INSIDE the list item’s formatting

PSEUDO-ELEMENTS selector::pseudo-element Style the first letter, or line, of an element first-line first-letter Insert content before, or after, the content of an element before after