APPDEV.pdf

LESSON 1: APP DEVELOPMENT AND EMERGING Examples of IT Services TECHNOLOGIES - Help Desk - Network Security HTML - HyperText Markup Language...

LESSON 1: APP DEVELOPMENT AND EMERGING Examples of IT Services TECHNOLOGIES - Help Desk - Network Security HTML - HyperText Markup Language - Data Storage and Management - Cloud Services Evolution of Application Development - Data Backup - IT Consulting Operating Systems Overview - Social Media Consulting - Repair Services - Web Designing Services - Email Marketing Why need services? - Well-defined, self-contained - As a contract between the service consumer and service provider - Ability to discover and consume services is the fundamental of SOA (Service Oriented Architecture) level TYPES OF SYSTEM ARCHITECTURE 1. Service-Oriented Architecture (SOA) - Loosely coupled architecture where software components are reusable, interoperable, and can be integrated to new applications Operating System - loaded to the computer by a boot - Each service in a SOA is independent and program communicate with each other over a network using protocols STANDALONE PROGRAMS - programs/apps that are running in your local 2. Application Programming Interface (API) machine - Allows to sync data from a client to a server (it - It is called “standalone” since it is not connected allows them to access the services) to the internet doesn’t need internet or a - Sharing data between applications(system to server) dedicated server to run them - The middlemen of apps and web services - Allow developers to sync data between multiple Problems in this approach: platforms and can facilitate communication 1. Scaling among the various micro services in web - Can’t support expansion (storage and users) applications. API integration is what does the - Device storage is maximum work when, for example, you enter a new contact - Users are limited (can’t connect or interact with in Salesforce and it auto-populates to Market as other users) well 2. Concurrency Handling - APIs work by sharing data between applications, - Can’t perform so many tasks at the same time systems, and devices. In order to better 3. Efficient management of resources understand this process, it can be useful to think 4. No server environment of APIs like restaurants. In this metaphor, the 5. No standards customer is like the user, who tells the waiter - Since there are no other users than yourself what she wants 6. Everything has to be written from scratch every time Applications - opposite of standalone programs ADVANTAGES OF APPLICATIONS OVER STANDALONE PROGRAMS - Devs only need to focus on the business logic - All complexities are now handled at the application server layer Types of API - Concurrency (one server, support many) 1. Public - Standards (HTTP - Hypertext Transfer - accessible for public use Protocol) - open and available for use by any outside - Resource management (ie. memory) developer or business - Easy to port applications from one server to 2. Partner another - share your service with a partner (partner company/dev); only available authorized?? SERVICES - only available to specifically selected and - functionality/set of functionalities with a purpose authorized outside developers or API consumers, that can be utilized by different clients for is a means to facilitate business-to-businesses different purposes activities. For example, if a business wants to selectively share its customer data with outside CRM firms, a partner API can connect the internal customer data system with those external parties - no other API use is permitted 3. Private APPLICATION DEVELOPMENT REQUIREMENTS - using the API within the business only - an internal or private API is intended only for use Web Application Development Process within the enterprise to connect systems and data 1. Roadmap Document: Defining Web within the business. For example, an internal API Application, Purpose, Goals and Direction might connect an organization’s payroll and HR 2. Research and Defining Audience Scope and systems Security Documents 4. Composite - Requires researching clients who will - combination of two or more types of API; most of possibly use your application or what to the time Partner & Public; to leverage advantages prepare for your web app of API 3. Create Functional Specifications or Feature - generally combine two or more APIs to craft a Summary Documentations sequence of related or interdependent - Identify features & decompose the operations. Composite APIs can be beneficial to system (decomposition charts) address complex 4. Third party vendors identification, analysis and selection API PROTOCOLS AND ARCHITECTURE - Not everything can be done by one 1. REST (Representational State Transfer) company(or programer) only; sites like - Exchange documents Shoppee subscribed to third party - Relies on client-server approach vendors to manage their payment - Provides communication between client and transactions server 5. Technology Selection, Technical Specifications, Web Application Structure and Timelines - Certificates, environment, licenses, etc. 2. RPC (Remote Procedural Call) - Hardware/ Software Requirements - apply two different language for API 6. Application Visual Guide, Design Layout, - subroutine/functional call Interface Design, Wire Framing 3. SOAP (Simple Object Access Protocol) - Create the looks and feels of the system - Used as a standard of messaging by the WWW (Prototype that wont function yet); GUI Why do we need APIs? 7. Web Application Development - Standard way to secure and manage API - Actual development happens (code, endpoints framework, database, custom modules, - External consumers/developers interact with your etc.) after successfully creating layout system using the APIs expose 8. Testing and Bug Fixing - We need security, analytics, and monetization with the help of APIs - Other requirements such as throttling, WWW - The World Wide Web caching(cache – temporary storage), etc. are also - A way of exchanging information between needed computers on the internet - Allows to connect the information seen on - Network of pages of images, texts, and other browsers to other servers media files on the internet which can be viewed using browser software MICROSERVICES ARCHITECTURE (MSA) - Consists of a worldwide collection of electronic - Small modules that provide service documents (web pages) - A method of developing software applications as - Big library of many information located in a suite of independently deployable, small, web pages modular services in which each service run a - A website is a collection of related webpages unique process and communicates through a and associated items well-defined, lightweight mechanism… - A web server is a computer that delivers CHARACTERISTICS OF MSA requested Web pages to your computer - Small - A web browser allows users to access web - Organized around business capabilities pages and web 2.0 programs. - Componentization via services - Web 2.0 refers to websites that provide means - Decentralized data management for users to interact - Support for technology heterogeneity (multiple platforms can use multiple services) Internet vs. Web - Design for failure (designed to catch errors or prepared to accommodate any conditions or Internet Web different unexpected situations International network Interlinked by internet - Disposable of connected computers Microservices for Java (MSF4J) (??) What does it provide? Not owned by anyone It allows documents to be linked to - Lightweight and fast runtime one another via hyper-text links – - Uses Java annotations as a way of defining thus forming a huge “web” of microservices APIs as well as metrics connected information - Supports well known and widely used methods such as JAXRS annotations Massive network of Way of accessing information - Provides simple ways to develop and deploy networks microservices Uses TCP/IP Uses a protocol called HTTP BOTTOMLINE: the web is a subset of the internet. It is 4. Business and marketing (also includes company just one of many ways information can be transferred websites) over network computers. 5. Blog 6. Wiki Protocols 7. Online Social Network - Rules/ instructions 8. Educational 9. Entertainment How can information be passed between 10. Advocacy - (UNICEF, WHO, etc) computers? 11. Web Application 1. Email (POP3, IMAP, SMTP) 12. Content Aggregator - POP3 - post office protocol 13. Personal - IMAP - Internet message access protocol - SMTP - Simple mail transfer protocol ANATOMY OF THE WEB BROWSER 2. FTP - File transfer protocol Web Browser Components 3. SSH - Secure Shell (for remote access) 1. Menu Bar - this is the horizontal line of text-buttons that all These standardized methods for transferring data or windows have in most computer environments documents over a network are called protocols. - Menu Items in the Menu Bar usually include: - File WWW COMPONENTS - Edit Structural Components - View 1. Clients/ Browsers - Privacy Settings 2. Servers - Addons/Plugins 3. Caches - Developer Tools 4. Internet - Help 2. Browser Tool Bar Semantic Components (semantics - logical component - Access all tools we can use when navigating of www) through the web 1. HTTP/HTTPS - Includes: - Designed to transfer information between - Address Bar (Includes Protocols and networked devices and runs on top of other Domains of websites) layers of the network protocol stack - Back Button 2. HTML - used in creating web pages - Forward Button 3. XML - lets you define and store data in a shareable - Stop Button manner - Refresh Button (Reset/Request the page - extensible mark-up language again to the server) 4. URIs - a character sequence that identifies a logical - Bookmark Button (Save link & address) (abstract) or physical resource. - Menu Button (hamburger menu) - Uniform Resource Identifiers 3. Main Viewing Panel - Everything seen below the tool bar - This is the largest area in which the website’s WEB APPLICATION IN THE SOCIETY contents actually appear 4. Info Bar Web Application Architecture - Isn’t always visible - When you hover over a link with your mouse, the URL of the linked page will display in a little bar that pops up at the bottom of the Viewing Panel, usually on the left side - Address of that link 5. Things Under the Hood - All browsers have a few common components “under the hood” - RENDERING ENGINE - the rendering engine is a sub-program that converts the code of a website into a viewable page image for you to look at. Each major browser has a different rendering engine EFFECTS OF WEB APPLICATION IN THE SOCIETY - CACHE - is a storehouse of content (page text, 1. New mode of delivery- nowadays, most images, files, resources, etc) from sites you have newspaper outlets already produce virtual visited already. Cache files are set to expire on a newspapers schedule, so that you don’t view outdated content 2. Educational materials are now accessed via - HISTORY - all browsers keep a list of every different web applications website you visit 3. Easier and more efficient access to information - COOKIE STORAGE - websites can store tiny bits a. Also becomes a means to misinformation of data on your browser, called cookies, and disinformation - which can help them keep track of you as a specific user TYPES OF WEBSITES - OFFLINE DATA STORAGE - newer browsers have 1. Portal - (ORUS portal of BIR) a data storage mechanism more robust that 2. News cookies, which allows web-based applications to 3. Informational store relevant data on your computer Examples of Web Browsers MARKUP LANGUAGE - FF - A modern system for annotating a text in a way - IE that is syntactically distinguishable from that text - Edge - Texts in blue: - Brave - marked up text; handled differently by a - Opera web browser - Chrome - Safari - Markup tags Sample Code: WEB PAGE EDITOR - Web page editor is an application that can help Peanut-butter On A Spoon you build a website in an easy and convenient manner Peanut- - You can develop your web page visually on your butter own without any coding at all, as most - website software are based on the WYSIWYG(what you see is what you get) Stick a spoon in a jar of peanut-butter, principle scoop and pull out a big glob of peanut- - Ex (Word Quest & SquareSpace) butter. TYPES OF WEB PAGE EDITOR Text-Based WYSIWYG HTML Tags - HTML markup tags Basic editor, work with Provide editing interface - HTML tags are keywords surrounded by angle HTML to create webpages to create webpage design brackets like - Pairs of angle brackets Uses Notepad. Uses FrontPage, - HTML tags normally comes in pairs like Notepad++ Dreamweaver and - Distinguishable from each other; there is an Require HTML knowledge Requires less HTML opening tag and closing tag knowledge - Opening tag (signifies start of element) Less user-friendly More user-friendly (put attributes) - The first tag in a pair is the start tag, and the No Junk HTML coding Have Junk HTML coding second is the end tag because user does not because the codes are - Start tag only has a simple keyword write unnecessary code generated by web editor inside the angle brackets software - End tag has “/” - Start and end tags are also called opening tags Cannot visualize the Easy to visualize the and closing tags design design - Self-closing tags (no pair) Difficult to insert specific Easy to insert specific tag WHAT DO YOU NEED FOR CREATING A WEB PAGE tag such as video clips, (automatic / live changes) - Working computer flash player - OS (Windows, Linux, Mac) - Notepad or Wordpad LESSON 2: HTML THE BASICS - Advanced HTML Editor (Dreamweaver, Sublime, Text for Mac) HTML (Hypertext Markup language) - Internet or Web Browser (Internet Explorer, - Standard markup language to creating web pages Firefox, Safari, Opera, Google Chrome) - It is a language for web pages - Building, developing, and showing your webpage GETTING STARTED - Describes the structure of a webpage - HTML documents describe web pages - Language for web pages - HTML documents contain HTML tags and plain - Building blocks of all websites text - Tim Berners-Lee invents the web with HTML as - HTML documents are called web pages its publishing language - Whole system is enclosed with - It all started in the year 1989 when the user of World Wide Web began one HTML file is equal to one webpage - He wrote a memo proposing about an Internet-Based hypertext system HTML tags are not case sensitive - It consists of a series of elements lowercased - These elements tell the browser how to display - is the same with the content - These elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. - The purpose of a web browser is to read HTML documents and display them in a browser - The browser does not display the HTML tags, but uses tags to interpret the content of the page - It is NOT a programming language - It is a MARKUP LANGUAGE (Annotations) - Usually has pairs PURPOSE OF HTML TAG bgcolor Numeric, Places background color - The element is the root element of an hexadecimal, behind an element HTML page (identifier) RGB values background URL Places a background image - behind the element Example explained: id User defined Names an element for use with Cascading Style Sheets - declaration defines that this document is an class User defined Classifies an element for HTML5 document use with Cascading Style Sheets - inside html tags, contains meta information about width Numeric value Specific the width of tables, the HTML page images, or table cells - Not available to the users (unless you inspect the height Numeric value Specifies the height of page) tables, images, or table cells title User defined “Pop-up” title for your - Inside the HTML tag, contains the elements document(anything visually available or visible to href URL Hypertext reference source URL Source reference viewing panel) - Headings, paragraphs, images, hyperlinks, tables, lists, etc HTML COMMENTS - Below your head down to the end of the page - Comments can be used to hide content - Can be used to hide more than one line - Specifies the title of the HTML page - Everything between , - Comments are also great for debugging HTML, - The element that defines a large heading because you can comment out HTML lines of code, one at a time, to search for errors - Defines a paragraph - - break tag (self-closing tag) HTML LINKS - Move text next line - HTML links are hyperlinks - You can click on a link and jump to another - Horizontal line tag document - HTML tag defines a hyperlink - Tag to add images - The most important attribute of the element is the href attribute, which indicates the link's destination HTML ELEMENTS - Appearance: - An HTML element starts with a start - unvisited link - underlined and blue tag/opening tag - visited link - underlined and purple - Ends with an end tag/ending tag - active link is underlined and red - The element content is everything between the - link text start and end tag - The target attribute specifies where to open the - Some HTML elements have empty content linked document - Like the element - _self - Default. Opens the document in - Has no pair the same window/tab as it was clicked - Empty elements - _blank - Opens the document in a new - Empty elements are closed in the start tag window or tab - Most HTML elements have attributes - _parent - Opens the document in the - Content here parent frame - _top - Opens the document in the full NESTED HTML ELEMENTS body of the window - Elements can contain other elements - Visit W3Schools! elements - To use an image as a link, just put the tag - An element within an element inside the tag - - alt="HTML tutorial" style="width:42px;height:42px; HTML ATTRIBUTES "> - Provide additional information about elements - Always specified in the start tag - Usually come in name/value pairs like: HTML TABLE name="value" - Defined with the tag - Link - Divided into rows (with the tag) - Each row is divided into data cells (with the List of Attributes tag); td stands for “table data” and holds the content of a data cell Attribute Options Function align Right, left, Horizontally align tags - tag can contain text, links, images, lists, center forms, other tables, etc. valign Top, middle, Vertically aligns tags with bottom HTML element  HTMLFORMS - Used to select different kinds of user input - Used to pass data to a server - Can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more - A form can also contain select lists, textarea, fieldset, legend, and label elements - The tag is used to create an HTML form - Groups elements inside into one single form - element can contain one or more elements HTML FORMS - INPUT - The most important form element - Used to select user information - Can vary depending on the type attribute - Types: HTML TEXT FORMATTING - Text field, Checkbox, Password, Radio - / - Boldface Button, Submit Button, etc - - Italic - - Subscript Input Types - - Superscript 1. Text Field HTML DIV (Divisions) - defines a one-line input field that a user can - Div stands for division enter text into - Divisions are defined with the tag - Holds the whole page - Used in table-less web pages 2. Password Field - By default a block element - Logical grouping of all the elements - defines a password field HTML LISTS - Group a set of related items in lists - (list items) 3. Radio Buttons 3 different types: - Ordered list - defines a radio button that lets a user select only - Has numbers; used in enumeration one of a limited number of choices - - Each list item starts with the tag - List is marked with numbers 4. Checkboxes - defines a checkbox that lets a user select one or more options of a limited number of choices - - Unordered list - No specific way of writing your list; no particular order 5. Text Area - - Each list item starts with the tag - defines a multi-line text input control - The list is marked with bullets (small -Can hold an unlimited number of characters, & black circles) the text renders in a fixed-width font (usually Courier) - the size of a textarea can be specified by the cols and rows attributes (or even through CSS’ height & width properties - - Definition list - List of items with a description of each 6. Drop Down Box item - to create a select list(drop down) - /dl> - inside the select element define the - is used in conjunction with available options in the list and - defines the item in the list - describes the item in the list -  7. Submit Buttons SERIF & SANS SERIF Serif This is a font with Serif. - used to send form data to a server - A small ornamental projection off the main stroke - the data is sent to the page specified in the of a letter form’s action attribute Sans Serif This is a font with Sans Serif. - the file defined in the action attribute usually - “Sans” is French meaning “without,” and fonts does something with the received input without these ornamentals are called sans serif fonts SCRIPT FONTS This is a script font. - Designed to replicate the varied and often fluid (attribute name) strokes created by handwriting. content - Script is a harder style to read than serif and sans serif, and should be used only for special cases HTML FRAMES like prominent headings and fancy party - Can display more than one HTML document in the invitations same browser window - Each HTML document is called a frame; each KERNING frame is independent of others - The horizontal space between two specific - Disadvantages of using frames: character - The web developer must keep track of - Fonts can have smaller or wider kernings to more HTML documents improve legibility and avoid awkward gaps - It is difficult to print the entire page HTML Frames Element - defines one particular window (frame) within a frameset TRACKING - Describes the spacing between letters - However, teaching denotes the overall spacing - frameset with 2 columns between letters of in an entire line or block of - First column set to 25% of the width of the text, rather than just two particular letters browser - Second column is set 75% of the width of the browser window - The document “frame_a.htm” is put into the first column, and the document “frame_b.htm” is put into the second column HTML IFrames LEADING - Called the “Inline Frame” - Pronounced like the element “lead” - defines an inline frame that contains - Often use terms like “single-spaced” or “double- another document spaced” to signify leading, but can also be expressed in units of pixels or pints LESSON 3: PRINCIPLES OF GRAPHICS WEBSITE TYPOGRAPHY - A technique of how we structure our letter and words in a way that improves the legibility, readability and even navigation of a website - It uses fonts, letter spacing, layout styles, and other design elements to highlight messages, articles, headlines and other content. HIERARCHY - Websites have different styles of text - The order of text from the most prominent tio depending in their priority or emphasis least prominent comprises the hierarchy of the page TYPEFACE VS FONT - Hierarchy is crucial for making pages easily Typeface navigable and digestible. Readers should be able - A specific look and feel applied to a set of to jump to whichever section is relevant to them alphabetic and numeric characters by looking at headings alone - Ex. Calibri, Times New Roman - Times New – formal Font - a particular instance of a typeface - Ex. Avenir Light, Avenir Medium, Avenir Heavy WEBSITE TYPOGRAPHY GUIDELINES PRINCIPLES OF GRAPHICS/LAYOUT 1. Limit the number of typefaces per website 1. BALANCE 2. Use a sans serif font for body text - The equal distribution of visual weight - Because the body contains so many text - Two main types: 3. Stick to standard fonts at first - Symmetrical - evenly distributed - There are website-safe fonts elements 4. Size your text appropriately - Asymmetrical - arrangement of 5. Don’t use all caps unlike objects of equal weight on 6. Use colors carefully and intentionally each side of the page 7. Stay between around 40 to 80 characters per line 2. CONTRAST 8. Provide sufficient spacing between lines - Refers to the level of difference between 9. Eliminate text animations design elements in order to create visual hierarchies - The most effective way to add visual PRINCIPLES OF COLORS AND IMAGES interest to your page. A reader should always be able to glance at a document Color & instantly understand what’s going on - It is the element of art that is produced when 3. MOVEMENT light, striking an object, is reflected back to the - Affects how the viewer looks at a piece eye. - For instance, artists will create pathways within their artwork so that a viewer will automatically look at a piece in a certain direction 4. EMPHASIS - Created by size, weight, position, color, shape, & style. - Contrast deals with the difference between two objects while emphasis deals with the impact of an object - A strategy to get the viewer’s attention to The Color Wheel a specific design element. - Can be in any form: - Button - Website - image 5. HARMONY - The elements of art within an art piece have their similarities emphasize to create a sense if cohesiveness 6. PROPORTION - How the size & weight of objects relate to one another within a piece - What keep our illustrations realistic and believable Categories of Colors 7. PREPETITION 1. Primary - source of all other colors, red, blue & - The recurrence of a design element yellowAnalo commonly utilized in patterns or textures 2. Secondary - color combinations created by the - Can be used in conjunction with other equal mixture of two primary colors principles to create a design that leads a a. Red + yellow = orange user's eyes to a focal point hac 3. Intermediate - a color created by mixing a continuity, and flow primary color with the secondary color next to it; 8. RHYTHM also called a tertiary color - Creates a type of “visual tempo” 4. Complementary - aka contrasting/ - Somewhat like repetition but blends supplementary colors; they sit on opposite of the mioceent(movement) in as well or create color wheel. These patterns can be random 9. VARIETY COLOR HARMONIES - Main principle that adds to a piece 1. Analogous - the colors group together are interest similar - Juxtaposition is placing two objects 2. Triadic - shape you outline is a triangle with together to create contrast effect sides equal length 10. UNITY 3. Monochromatic - refers to a color scheme that - What brings the whole piece together. It is comprised of variations of one color isn’t in correlation with any element of art 4. Warm - on the color wheel, this is comprised of in particular, but instead is something the following colors and its variations: red, yellow that makes the whole piece feel like it & orange belongs together 5. Cool - include green, blue, and purple, and - It is the harmony produced by all the variations of those three colors elements in a design piece LESSON 4: WEB DEVELOPMENT TOOLS AND LESSON 5: CSS 101 WIREFRAMES (html does not focus on designs) - Structure, position PROJECT FILES SYSTEM CSS (Design: colors, animations) WEBPAGES’ FILE SYSTEM - Cascading Style Sheets - A sile system stores and organizes data and can - Simple language defines how website should look be thought of as a type of index for all the data - Separated the presentation of a website from contained in a storage device the content(html) - These devices can include hard drives, optical - It’s a web standard, and it’s here to stay drives and flash drives - If done correctly, it will save you lots time & effort - There should be a folder that will hold the - Can control the layout of multiple web pages all different files/assets that is used in a website at once - Css, images, js Where did this come from? LINKING WEBPAGES - Hakon Wium Lie proposed the idea in 1994 WEB DEVELOPMENT TOOLS - W3c creates, continues work on CSS TOOLS - CSS 1 published December 1996 - Notepad++ - CSS Working Group created in early 1997 - Sublime - CSS 2 published May 1998 - Colorzilla (for color combinations) - CSS 3 has been under development since 1999 - Figma (prototyping) Adobe Dreamweaver (IDE for website How do I use it? development; drag and drop) Included into a web page in 3 ways: - External style sheet (best) BROWSER TOOLS AND EXTENSIONS - Internal style sheet (not as good) - Wappalyzer (used to check elements of website) - Inline style (basically breaking the purpose of CSS - PerfectPixel - Go fullpage Style sheets will cascade, or overwrite similar styles to - Browserstack create on master set of styles - Colorzilla - Inline overwrites internal, which overwrites - Using inspect element external, which overwrites browser default. Wireframing How do I add CSS to my page? - A.k.a page schematics or screen blueprint EXTERNAL CSS - 2d illustration of a page’s interface that - A new CSS file that we create - specifically focuses on space allocation and - You can change the look of an entire website by prioritization of content. Functionality available changing just one file! and intended behaviors - can be written in any text editor, and must be - Blank images, grayscale, no interaction saved with a.css extension. - Visible: sizes, position, spaces, location of buttons - The external.css file should not contain any - Figma: Best to use for prototyping and wireframe HTML tags.(should only contain all the configurations of your page) STYLE GUIDE [in href, when going out of the main folder, use dot (.) - A list of all elements and components to add in but when going in, use forward slash (/)] your website - Like a template CSS SYNTAX - You base your icons, text, font, etc here - Helps in consistency and uniformity of design in webpage - Reference when creating website - Sizes of text and icons, colors - Includes: Selector - points to the HTML element you want to style - Typography (header, body, etc) Property - an attribute of our element; characteristics of - Varying font sizes, font weight, design; some are not applicable to other html documents line height Declaration - propertyName:value; every property has - Sample format a value - Color palette (primary and secondary - Indicator is using a (:) colors) - The text after the colon is the value - Neutral colors (text and - Multiple CSS declarations are separated with background) semicolons, and declaration blocks are - Include name of color and Hex surrounded by curly braces. p{ - Buttons (default, hover, inactive, dark color: red; mode, with icons) text-align: center; - Text Links (default, hover) } - Icons - p is a selector in CSS (it points to the - Forms, Form Fields, Dropdowns, HTML element you want to style: ). Passwords - color is a property, and red is the property value - text-align is a property, and center is the property value CSS SELECTORS INLINE CSS CSS selectors are used to "find" (or select) the HTML - May be used to apply a unique style for a single elements you want to style. element - To use inline styles, add the style attribute to the We can divide CSS selectors into five categories: relevant element. The style attribute can contain 1. Simple selectors (select elements based on name, any CSS property id, class) - Overrides internal Element Selector This is a - select HTML elements based in the element name heading id Selector - uses the id attribute of an HTML element to select CSS PROPERTIES a specific element - There are hundreds of properties to choose from - id of an element is unique within a page(used to to change the design of the webpage select one unique element only); - Change things such as: - use hash (#) character followed by the id of the - Font & text properties element - Background colors, images - Cannot start with number - Positioning class Selector - Borders - Selects all HTML elements with a specific class - Margin, padding attribute - To select element with a specific class, write a THE BOX MODEL period (.) character, followed by the class name - Every element in the DOM (Document Object - Cannot start with number Model) has a conceptual “box” for presentation [can use multiple classes by including the class name - The box consists of margin, padding, borer, within the same quotation separated by space:] content (width, height), and offset (top, left).center { text-align: center; color: red; }.size { Font-size:100px; } Red and center-aligned heading Red and center-aligned paragraph. *center and size are different classes* Universal Selector - Regardless of class or ID - (*) selects all HTML elements on the page CSS FONTS Grouping Selector - Font-family - Selects all the HTML elements with the same style - Font-weight definitions - Font-style - Separate each selector with a comma - font-size - Can be element, id, and class selector - h1, h2, p { CSS UNITS & COLORS text-align: center; - Units color: red; - % } - in, cm, mm - em, px 2. Combinator selectors - pt - select elements based on a specific relationship - Colors between them - Color name (red, yellow, etc) 3. Pseudo-class selectors - rgb (x,x,x) - select elements based on a certain state - #rrggbb (HEX) 4. Pseudo-elements selectors - select and style a part of an element CSS LAYOUT 5. Attribute selectors - select elements based on an attribute or attribute - Margin - Width value - Padding - Height - Border - Float INTERNAL CSS - Z-index - Text-align - May be used if one single HTML page has a - Positioning - Vertical-align unique style - The internal style is defined inside the element, inside the head section - Internal is prioritized over external; overrides external CSS vs TABLE LAYOUTS - Tables are designed only for tabular data and not for layout - Reduces semantic value of markup - Makes updating difficult & impractical - CSS allows positioning that reduces overall markup size, form, and allows layout to be changed by only editing a stylesheet - CSS layouts also improve accessibility, because screen readers turn off style sheets allowing only the content to remain CSS TEXT - Text-indent - Text-transform - Text-align - Word-spacing - Text-decoration - White-space - Letter-spacing CSS BACKGROUND - Background-color - Background-image - Background-position - Background-repeat CSS LISTS - List-style - List-style-image - List-style-position - List-style-type CSS SHORTHAND - Consolidate many styles into a single declaration