Download presentation
Presentation is loading. Please wait.
1
CSS Intro
2
Benefits of CSS Precise type formatting and layout
Less work (single sheet can control many pages) Improve accessibility Ample browser support
3
Rules are building blocks
Rules work by selecting an element and declaring how it looks Syntax: Selector{ Property: value; … }
4
Rules Example: P{ Font-size: 15px; }
‘P’ is the selector and ‘font-size: 15px;’ is the declaration Declarations are made up of: property, value, and units (no space between unit and value)
5
Attaching styles to documents
External files: stored in .css files. Defined using a text editor. Import using: <link rel=“stylesheet” href=“filename.css” type=“text/css”>
6
Attaching styles Document Level: included in html document. Included using: <!doctype html> <html><head> <style type=“text/css”> /*This is a CSS comment *Rules here */ </style></head> <body>…</body></html>
7
Attaching styles Inline styles: Defined as part of the HTML element as an attribute <p style=“file-size: 15px;”>Content</p>
8
Document Structure Root Child, Siblings, Descendants
9
Inheritance HTML elements can inherit CSS rules from their parents
Example: <p style=“color:blue”> Hello <em>World</em> </p> Text formatting elements are inherited while margins, backgrounds and other box properties are not inherited
10
Selectors Type Selector (Simple Selector): Selects all elements that match the selector name P, ul, strong, em, elementName Class Selector: Select all elements that have the specified class name. Allows applying same rules to different elements .top, .banana, .className <p class=“top”>Content</p>
11
Selectors ID Selectors: Selects one specific element. An ID is unique to one element while many elements can have the same class #top, #banana, #idName <p id=“top”>Content</p> Universal Selector(*): Selects all the elements in the document *{color: black;}
12
Selectors Attribute Selector: Selects elements based on the specified attribute. [attribute=value] [type=text] selects all elements with value ‘text’ defined for attribute ‘type’ Input[type=text] selects all input elements with a text type
![Selectors Attribute Selector: Selects elements based on the specified attribute. [attribute=value]](http://slideplayer.com/slide/14037504/86/images/12/Selectors+Attribute+Selector%3A+Selects+elements+based+on+the+specified+attribute.+%5Battribute%3Dvalue%5D.jpg "[type=text] selects all elements with value ‘text’ defined for attribute ‘type’ Input[type=text] selects all input elements with a text type.")
13
Selectors Descendant Selector (Contextual Selector): Selects elements that are descendants of the parent. P a: selects anchor elements that are descendants of paragraph elements <p> Content<a>Link</a></p> <a>link</a>
14
Selectors Pseudo Elements: Keywords that allow you to style part of an element P::first-line selects the first line of all paragraphs Pseudo Classes: Select elements when the specified event occurs. A:hover selects anchor elements only when the mouse is moved over them. Input:focus selects input elements when they receive focus and become active
15
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Resources For a list of all CSS selectors, check:
Similar presentations
