Introduction to CSS: Selectors

Slides:



Advertisements
Similar presentations
Table, List, Blocks, Inline Style
Advertisements

CSS-Formatting Review Cascading Style Sheets addstyle to your HTML web pages.
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
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
Today CSS HTML A project.
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.
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.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
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.
“Cascading Style Sheets” for styling WWW information DSC340 Mike Pangburn.
กระบวนวิชา 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.
Chapter 8 Creating Style Sheets.
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 3 Style Sheets: CSS WEB.
 Missing (or duplicate) semicolons can make the browser completely ignore the style rule.  You may add extra spaces between the properties/values to.
Basics of HTML.
Cascading Style Sheet. What is CSS? CSS stands for Cascading Style Sheets. CSS are a series of instruction that specify how markup elements should appear.
© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.
Chapter 4 Cascading Style Sheets Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
 ult.htm ult.htm  This website illustrates the use of CCS (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.
Cascading Style Sheets (CSS) 1.  What is CSS?  Why CSS?  How to write a CSS? 2.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
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.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
ECA225 Applied Interactive Programming Cascading Style Sheets, pt 1 ECA 225 Applied Online Programming.
DIV, Span, CSS.
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.
CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.
Developing Web Applications with HTML and CSS “Selectors and Properties”
1 Lecture 7 Style Sheets: CSS. 2 Motivation HTML markup can be used to represent –Semantics: h1 means that an element is a top-level heading –Presentation:
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
HTML5 and CSS3 Illustrated Unit C: Getting Started with CSS.
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 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.
Cascading Style Sheet.
Getting Started with CSS
CSS: Cascading Style Sheets
Cascading Style Sheets
>> Introduction to CSS
Introduction to CSS.
INTRODUCTION TO HTML AND CSS
Web Developer & Design Foundations with XHTML
Cascading Style Sheets (CSS)
Introduction to Web programming
Intro to CSS CS 1150 Fall 2016.
Cascading Style Sheets
CASCADING STYLE SHEET CSS.
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Website Design 3
Cascading Style Sheets - Building a stylesheet
Intro to CSS CS 1150 Spring 2017.
Intro to CSS Mr. Singh.
IS 360 Understanding CSS Selectors
Cascading Style Sheets (Introduction)
Introduction to Cascading Style Sheets (CSS)
Cascading Style Sheets (Introduction)
Lesson 4 – Introduction to CSS
INTRODUCTION TO HTML AND CSS
Training & Development
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Web Design & Development
Cascading Style Sheets - Building a stylesheet
Cascading Style Sheets III B. Com (Paper - VI) & III B
Focusing Your CSS Selectors
Presentation transcript:

Introduction to CSS: Selectors

Anatomy of a Website: As I’ve mentioned in previous lectures websites are made up of many different types of files that are interpreted by your browser to look and contain the information that they do. One file we know websites are made up of is HTML Today we will be working with another important file that makes up websites and that is a CSS file. Your Content + HTML: Structure + CSS: Presentation = Your Website CSS is basically the language you will use to make your content look good

What is CSS? CSS stands for Cascading Style Sheets. It is a “style sheet language” that lets you style elements on your webpage. CSS is embedded inside HTML but is not HTML itself. We use link CSS files in the HTML code. CSS is useful for changing fonts, colors, size, underline, highlighting, positioning, etc.

Anatomy of CSS CSS consist of “style rules”. Each style consists of a “selector” and “declarations” of property-value pairs:

CSS in HTML: CSS can be embedded in HTML in several ways. One way is to include all CSS in a style tag, usually inside the head tag like shown in the example to the right. You can also have CSS be defined in a separate file, and imported using either the link tag or the @import statement in CSS.

Selectors: Element The selector is used to select which elements(tags) in the HTML page will be given the styles in the curly brackets. There are 4 types of selectors: 1. Element 2. id 3. class 4. position in document. The example above is of the first type of selector, element. The code inside the curly brackets affects all the p elements in the entire HTML document. This can be used with many other HTML tags, like div, table, a, ul, li, h1, etc.

Selectors: IDs The code below shows an example of how to use a header. Element IDs are unique, so that should only be used for one element. The “#” is how you tell CSS “this is an ID.”

Selector: Class The code below shows an example of how to create a class in CSS. Multiple elements(tags) in an HTML document can have the same class name. The “.” is how you tell CSS “this is a class name.”

Selector: Class continued An element can only have 1 ID but multiple classes, so you can take advantage of that for greater flexibility.

Selector: Position in Document You can actually style elements(tags) embedded within other elements(tags)

Selectors: IDs + Position The code below will select(style) any <li> element that is embedded from an element with an ID that equals “related-brands.”

Selectors: Elements + Class You can also only select all elements that contain a specific class name. The example below selects any li element with a class attribute that contains the word “special.” WARNING: If you place a space after the “.”, it’ll look for descendants of li with class of “special.”

Selectors : All of them combined The example above selects any em element with a class attribute that contains the word “required” that is a embedded within a p element that is embedded within a form element that is embedded within a div element with the class attribute “content”, that is a descendant of any element with an ID attribute that equals “header.”

Selector: Pseudo classes/actions A set of “pseudo classes” can style anchor elements based on their state: Unvisited Visited Mouse Over Current link(clicked) Focused link

Grouping Selectors and Selector Rules: You can group selectors to apply the same style to all of the selectors by separating them with commas: Cascade Rules: ID is more specific than a class, class is more specific than element. The longer the selector, the more specific it is If style rules are equally specific, the last one wins!

CSS Assignment: Starting with the solution from the second HTML exercise, add CSS rules to the webpage so that it looks like the screenshot to the right. All the CSS rules should have "color: red;" or "color: blue;" as the property-value pair. Just use different selector types to style the different parts of the page. Note that there are often multiple ways to achieve the same result in CSS. Try to use a mix of the different types of selectors- id, class, position in document, etc. Add CSS using the Style tag or link a CSS file to your HTML page.