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?