CSS introduction

What is CSS? See how The Simpsons appear in CSS!

1. Cascading Style Sheets Omer Simon Salesforce Developer 06/03/17

2. Agenda Overview - What is CSS? How to Use Basic Selectors and Properties Outstanding Examples Q&A

3. Overview The web standards model includes HTML, CSS, and JavaScript. HTML - Markup language composed of elements, which contain attributes (some optional and some mandatory.) These elements are used to mark up the various different types of content in documents, specifying what each bit of content is supposed to be rendered as in web browsers (for example headings, paragraphs, tables, bulleted lists, etc.) CSS - Gives you fine control over the formatting and layout of your document. CSS works on a system of rules, which select the elements you want to style, and then set values for different properties of the elements. You can change or add colors, backgrounds, font sizes and styles, and even position things on your web page in different places. JavaScript - The scripting language that you use to add behavior to your web pages. It can be used to validate the data you enter into a form (tell you if it is in the right format or not), provide drag and drop functionality, change styles on the fly, animate page elements such as menus, handle button functionality etc.

4. How To Use ? A style sheet consists of a list of rules . Each rule or rule-set consists of one or more selectors and a declaration block . In CSS, selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself. Selectors may apply to: all elements of a specific type, e.g. the second-level headers h1 elements specified by attribute , in particular: id : an identifier unique within the document class : an identifier that can annotate multiple elements in a document elements depending on how they are placed relative to others in the document tree . Declaration block would look like that: selector { property : value ; property : value ; property : value ; property : value ; }

5. How To Use ?

6. How To Use ?

7. Properties: width - sets the width of an element. width: 100% | width: 15px; background-color - specifies the background color of an element. background-color: blue | background-color: #4286f4 text-align - specifies the horizontal alignment of text. text-align: left | text-align:center | text-align: right border - border-width, border-style, and border-color. border: 5px solid red | border: 3px dotted black | border: dashed blue Selectors: selector:nth-child(n) - matches every element that is the nth child. div:nth-child(3) | p:nth-child(even) selector:hover - is used to select elements when you mouse over them. div:hover | td:hover Basic Selectors and Properties

8. Outstanding Examples The Simpsons Clouds Navigation Bar Website Example

9. Questions?