CSS introduction
Download as PPTX, PDF1 like919 views
Cascading Style Sheets (CSS) is used to format and lay out web documents. CSS works with HTML and JavaScript. CSS uses rules and selectors to style elements by changing properties like colors, sizes, and positioning. A style sheet contains rules with selectors that match HTML tags and attributes. The declaration block then sets property values. Common properties include width, background color, text alignment, and borders. Selectors target elements by type, ID, class, and placement. Examples demonstrate styling navigation bars and clouds. The presentation concludes with a Q&A.
CSS introduction
- 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?