The document provides an introduction to CSS and SASS including definitions of HTML, CSS, CSS syntax, selectors, properties, and other CSS concepts. It defines HTML as a markup language and CSS as used to style and lay out HTML elements. It describes common CSS concepts like selectors, properties, values, and ways to attach CSS like inline, embedded and external stylesheets.
Eric Sembrat gave a presentation on using Sass (Syntactically Awesome Style Sheets) to improve CSS workflows. He began by introducing himself and outlining the presentation. He then discussed frustrations with CSS like vendor prefixes and copying styles. Sass addresses these issues through features like variables, nesting, mixins and inheritance which allow for more modular, reusable and scalable CSS code. It compiles Sass files into normal CSS. The presentation concluded with a demonstration of Sass's capabilities.
Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.
SASS (Syntactically Awesome Style Sheets) is a preprocessor scripting language that extends CSS by adding features like variables, nested rules, mixins, and functions. It allows for more efficient, organized, and reusable CSS code. SASS files are compiled into normal CSS files. SASS offers features like variables, nesting, mixins, inheritance, calculations, and conditions that make CSS more powerful, organized, and maintainable. SASS files use the extensions .sass or .scss and are compiled into regular .css files using a CSS preprocessor.
This document introduces Sass (Syntactically Awesome Style Sheets), a CSS preprocessor. Sass allows writing clean CSS in a programming construct rather than static rules, reducing repetition and creating more manageable stylesheets. It features variables, nesting, mixins, partials, and inheritance. Installing Sass involves downloading Ruby and using the gem install command. Key benefits of Sass include writing cleaner CSS, faster development time, and programmatic features like variables and nesting.
SASS is a preprocessor scripting language that makes CSS more powerful, efficient, and reusable. It allows for variables, nested rules, mixins, inheritance, and other features to help avoid repetitive CSS and make stylesheets more maintainable. SASS files use either the indented SASS or SCSS syntax and compile to normal CSS. SASS is commonly used in Rails projects but can be used in any web project to improve the CSS authoring process.
Sass is a CSS pre-processor that adds advanced features like nesting, variables, mixins, inheritance and extends. It has two syntaxes: SCSS, which is similar to CSS, and the indented syntax which does not use brackets or semicolons. To use Sass, Ruby must be installed along with the Sass gem. Compass is an optional framework that adds features like a watch system and custom mixins. Sass allows nesting rules, using variables, creating reusable styles with mixins, importing partial files, extending styles for DRY code, and performing operations.
This document summarizes a technical session on Syntactically Awesome Stylesheets (Sass). The session objectives are to introduce Sass and its advantages over regular CSS, demonstrate its features like variables, nesting, mixins and extends, and how to use Sass with Compass. The document provides examples of Sass code and the corresponding CSS output for these features. It also explains how to install Sass via command line or applications and set up a Compass project.
Bootstrap 5 introduces several major changes including removing jQuery, switching to vanilla JavaScript, adding responsive font sizes, dropping support for older browsers like Internet Explorer 10 and 11, changing the gutter width unit to rem, removing unnecessary classes like card decks, optimizing the navbar component, switching from Jekyll to Hugo for documentation, updating various classes, introducing a new SVG icon library, and providing tools to assist with migrating to the new version.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
The document discusses deep learning paper reading roadmaps and lists several github repositories that aggregate deep learning papers. It also discusses developing mobile applications that utilize machine learning and the differences between developing for iOS versus Android. Lastly, it mentions continuing to learn through practice and experimentation with deep learning techniques.
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
Coding conventions are style guidelines for any programming language. As, we are growing ourselves rapidly in learning new technology, the need for learning of the coding standards and conventions for the same language also arises.
So, here let us try to learn some coding guidelines for few frontend languages.
CSS variables (custom properties) allow defining values that can be used throughout CSS code. This avoids duplicating values and makes themes easier to implement. Variables can be set globally or within specific scopes, and their values can cascade like regular properties. They also enable new techniques like responsive breakpoints based on variable values rather than fixed numbers. CSS variables are a W3C candidate recommendation supported in modern browsers via a double declaration approach for progressive enhancement.
This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent and modular way. It explains the basic concepts of BEM including blocks, elements, and modifiers. It also discusses how to implement BEM through CSS naming conventions and provides examples. Best practices for using BEM with HTML, CSS, JavaScript, file structure, and build processes are covered. The goal of BEM is to provide a common semantic framework for building user interfaces and managing front-end code.
Bootstrap is an open-source front-end framework that helps developers design responsive mobile-first websites easily. It provides pre-built UI components like buttons, navigation bars, and grids for building layouts. The document discusses Bootstrap's introduction, file structure, grid system, responsive design features, and common layout components like dropdown menus and button groups.
The document discusses the CSS box model, which treats HTML elements as boxes that can be manipulated. The box model consists of the content, padding, border, and margin. Content is the text or images, padding is the transparent space around the content within the border, border is the visible line around the padding, and margin is the transparent space outside the border. Common uses of the box model include adding borders, controlling spacing, and precisely defining values for each side of an element.
A story of the passive aggressive sysadmin of AEMFrans Rosén
# By Frans Rosén
Adobe Experience Manager is an enterprise CMS with a troubled history. It was created with the angle of high customization factor, enabling consulting firms to deploy it all over the world for huge customers.
Then came security.
Frans will go through some terrible default configuration mistakes, Adobe’s love for bad Flash and how a sysadmin accidentialy exposed an international multi billion dollar company using only sad thoughts.
# About speaker
Frans Rosén is a tech entrepreneur, bug bounty hunter and a Security Advisor at Detectify, a security service for developers. He’s a frequent blogger at Detectify Labs and a top ranked participant of bug bounty programs, receiving some of the highest bounty payouts ever on HackerOne.
Frans was recently featured as #2 on Hackread’s list of 10 Famous Bug Bounty Hunters of All Time and the results of his security research has been covered in numerous international publications such as Observer, BBC, Ars Technica, Wired and Mashable.
This document provides a cheat sheet of commands for the VI text editor, organized into categories for editing text, moving around, searching, and managing files. It includes both single key commands and longer commands to perform actions like undoing edits, copying/pasting/deleting text, finding and replacing text, and quitting/saving files. Over 50 commands in total are described.
Bootstrap is a popular front-end framework that provides responsive grid system, prebuilt components, and plugins for developing responsive mobile-first websites and web applications. It includes HTML and CSS templates for typography, forms, buttons, navigation and other interface components as well as optional JavaScript plugins. The document discusses Bootstrap's grid system which uses rows and columns to build layouts responsive across devices, and provides examples of basic grid structures for stacking columns horizontally and creating different layouts for mobile, tablet and desktop screens.
This document provides an overview and instructions for various content transmission features in DSpace 4.2, including harvesting and disseminating content using OAI/PMH, reading content with REST, exporting and importing content using submission information packages (SIPs) and dissemination information packages (DIPs), depositing content using SWORD, and importing content using the simple archive format (SAF). It discusses configuring the OAI content source, metadata crosswalks, and the REST API. It also provides examples of using the DSpace packager for submissions and disseminations, making deposits via cURL with SWORD, and batch importing content from CSV and MARC XML files using the SAF format.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
This document summarizes CSS Grid Layout, a new two-dimensional grid system being added to CSS. It discusses some of the limitations of existing CSS layout methods and how Grid Layout addresses them. Key points include: Grid Layout uses line-based placement to position items, grid tracks can be flexible or fixed widths, areas can be explicitly or implicitly named, and the system avoids hacks and limitations of previous methods.
The document discusses front-end web development frameworks and tools. It covers full stack development, Git, Node.js, npm, and Bootstrap. Bootstrap is described as a free front-end framework that includes HTML, CSS templates for interfaces and optional JavaScript plugins. It also provides responsive designs and a mobile-first approach. The document then explains components of Bootstrap like grids, forms, navigation bars, cards, modals and preprocessors like Less and Sass which can be used to write CSS code.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
This document provides an overview and summary of the Java Content Repository (JCR) specification and Apache Jackrabbit implementation. It discusses how JCR combines advantages of file systems and databases by allowing structured and unstructured content to be stored together in a single repository. It also summarizes how to connect to a repository, interact with nodes and properties, perform searches and queries, and leverage advanced features like observation and versioning. The document promotes JCR as a standard Java API and Apache Jackrabbit as a widely used open source implementation.
SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor that allows for nesting, variables, mixins and other powerful features to help write cleaner, more maintainable CSS. It helps achieve the DRY principle by eliminating repeated code and allowing logical structuring. Some key SASS features include nesting, variables and scopes, mixins, extends and interpolation. SASS files are compiled to normal CSS files for use in browsers. Using SASS can help large development teams work on CSS in a more organized and efficient way.
SASS (Syntactically Awesome StyleSheets) is a CSS pre-processor that allows for nested rules, variables, mixins and more to extend the functionality of CSS. It compiles into regular CSS. Key features include nesting rules to reduce repetition, using variables to define common values for reuse, and creating mixins for commonly used CSS patterns or properties. SASS also allows for logic and functions. COMPASS is an open-source framework built on SASS that provides pre-made mixins and modules for common CSS patterns to simplify development.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
The document discusses deep learning paper reading roadmaps and lists several github repositories that aggregate deep learning papers. It also discusses developing mobile applications that utilize machine learning and the differences between developing for iOS versus Android. Lastly, it mentions continuing to learn through practice and experimentation with deep learning techniques.
HTML5, CSS, JavaScript Style guide and coding conventionsKnoldus Inc.
Coding conventions are style guidelines for any programming language. As, we are growing ourselves rapidly in learning new technology, the need for learning of the coding standards and conventions for the same language also arises.
So, here let us try to learn some coding guidelines for few frontend languages.
CSS variables (custom properties) allow defining values that can be used throughout CSS code. This avoids duplicating values and makes themes easier to implement. Variables can be set globally or within specific scopes, and their values can cascade like regular properties. They also enable new techniques like responsive breakpoints based on variable values rather than fixed numbers. CSS variables are a W3C candidate recommendation supported in modern browsers via a double declaration approach for progressive enhancement.
This document provides an introduction to the BEM (Block, Element, Modifier) methodology for organizing HTML, CSS, and JavaScript code in a consistent and modular way. It explains the basic concepts of BEM including blocks, elements, and modifiers. It also discusses how to implement BEM through CSS naming conventions and provides examples. Best practices for using BEM with HTML, CSS, JavaScript, file structure, and build processes are covered. The goal of BEM is to provide a common semantic framework for building user interfaces and managing front-end code.
Bootstrap is an open-source front-end framework that helps developers design responsive mobile-first websites easily. It provides pre-built UI components like buttons, navigation bars, and grids for building layouts. The document discusses Bootstrap's introduction, file structure, grid system, responsive design features, and common layout components like dropdown menus and button groups.
The document discusses the CSS box model, which treats HTML elements as boxes that can be manipulated. The box model consists of the content, padding, border, and margin. Content is the text or images, padding is the transparent space around the content within the border, border is the visible line around the padding, and margin is the transparent space outside the border. Common uses of the box model include adding borders, controlling spacing, and precisely defining values for each side of an element.
A story of the passive aggressive sysadmin of AEMFrans Rosén
# By Frans Rosén
Adobe Experience Manager is an enterprise CMS with a troubled history. It was created with the angle of high customization factor, enabling consulting firms to deploy it all over the world for huge customers.
Then came security.
Frans will go through some terrible default configuration mistakes, Adobe’s love for bad Flash and how a sysadmin accidentialy exposed an international multi billion dollar company using only sad thoughts.
# About speaker
Frans Rosén is a tech entrepreneur, bug bounty hunter and a Security Advisor at Detectify, a security service for developers. He’s a frequent blogger at Detectify Labs and a top ranked participant of bug bounty programs, receiving some of the highest bounty payouts ever on HackerOne.
Frans was recently featured as #2 on Hackread’s list of 10 Famous Bug Bounty Hunters of All Time and the results of his security research has been covered in numerous international publications such as Observer, BBC, Ars Technica, Wired and Mashable.
This document provides a cheat sheet of commands for the VI text editor, organized into categories for editing text, moving around, searching, and managing files. It includes both single key commands and longer commands to perform actions like undoing edits, copying/pasting/deleting text, finding and replacing text, and quitting/saving files. Over 50 commands in total are described.
Bootstrap is a popular front-end framework that provides responsive grid system, prebuilt components, and plugins for developing responsive mobile-first websites and web applications. It includes HTML and CSS templates for typography, forms, buttons, navigation and other interface components as well as optional JavaScript plugins. The document discusses Bootstrap's grid system which uses rows and columns to build layouts responsive across devices, and provides examples of basic grid structures for stacking columns horizontally and creating different layouts for mobile, tablet and desktop screens.
This document provides an overview and instructions for various content transmission features in DSpace 4.2, including harvesting and disseminating content using OAI/PMH, reading content with REST, exporting and importing content using submission information packages (SIPs) and dissemination information packages (DIPs), depositing content using SWORD, and importing content using the simple archive format (SAF). It discusses configuring the OAI content source, metadata crosswalks, and the REST API. It also provides examples of using the DSpace packager for submissions and disseminations, making deposits via cURL with SWORD, and batch importing content from CSV and MARC XML files using the SAF format.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
This document summarizes CSS Grid Layout, a new two-dimensional grid system being added to CSS. It discusses some of the limitations of existing CSS layout methods and how Grid Layout addresses them. Key points include: Grid Layout uses line-based placement to position items, grid tracks can be flexible or fixed widths, areas can be explicitly or implicitly named, and the system avoids hacks and limitations of previous methods.
The document discusses front-end web development frameworks and tools. It covers full stack development, Git, Node.js, npm, and Bootstrap. Bootstrap is described as a free front-end framework that includes HTML, CSS templates for interfaces and optional JavaScript plugins. It also provides responsive designs and a mobile-first approach. The document then explains components of Bootstrap like grids, forms, navigation bars, cards, modals and preprocessors like Less and Sass which can be used to write CSS code.
Video available at https://www.youtube.com/watch?v=9g8WqKp4BGI
Talk at https://www.meetup.com/IS-CSS/events/262580285/
How do you know which layout technique you need to apply for your use case?
We will be comparing several alternatives (Float, Display, Flex, Grid), describing the strengths and limitations of the available layout modules, putting a focus on Grid.
Although we will have some simpler examples (perfect for beginners), we will also cover more advanced features (like #display: contents# and #subgrid#).
This document provides an overview and summary of the Java Content Repository (JCR) specification and Apache Jackrabbit implementation. It discusses how JCR combines advantages of file systems and databases by allowing structured and unstructured content to be stored together in a single repository. It also summarizes how to connect to a repository, interact with nodes and properties, perform searches and queries, and leverage advanced features like observation and versioning. The document promotes JCR as a standard Java API and Apache Jackrabbit as a widely used open source implementation.
SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor that allows for nesting, variables, mixins and other powerful features to help write cleaner, more maintainable CSS. It helps achieve the DRY principle by eliminating repeated code and allowing logical structuring. Some key SASS features include nesting, variables and scopes, mixins, extends and interpolation. SASS files are compiled to normal CSS files for use in browsers. Using SASS can help large development teams work on CSS in a more organized and efficient way.
SASS (Syntactically Awesome StyleSheets) is a CSS pre-processor that allows for nested rules, variables, mixins and more to extend the functionality of CSS. It compiles into regular CSS. Key features include nesting rules to reduce repetition, using variables to define common values for reuse, and creating mixins for commonly used CSS patterns or properties. SASS also allows for logic and functions. COMPASS is an open-source framework built on SASS that provides pre-made mixins and modules for common CSS patterns to simplify development.
- Less is a dynamic stylesheet language that allows for nesting, variables, mixins and other features not available in regular CSS. It can be compiled to CSS either on the client-side or server-side.
- Some key features of Less include variables, mixins, nesting rules to mimic DOM structure, string interpolation, importing other files, and loops. These allow for reducing repetition, increasing organization and making CSS more dynamic and readable.
- Less is similar in syntax to CSS but with additional features. It can be compiled to plain CSS for browser compatibility. While Less and Sass are both preprocessors, Less uses JavaScript and can run client-side while Sass uses Ruby and runs server-side.
LESS CSS is a dynamic stylesheet language that extends CSS by adding features like variables, mixins, operations, and functions. It allows CSS stylesheets to be more modular and reusable by adding parametric mixins, nesting rules, and importing files. Key features include using variables to store colors and values, defining mixins to group repeated CSS declarations, performing mathematical operations on values, and modifying colors with functions. LESS files are compiled into regular CSS files for browsers to use.
CSS Preprocessors with an introduction to LESS/SASSvisual28
What are css preprocessors? How do you get started? Why do you want to use one? These are all questions I asked when I first got started with Less and Sass.
This document discusses responsive web design and the tools needed to implement it. It recommends using a grid-based design, flexible images and media, media queries, and percentage-based widths to create a responsive site. It also recommends specific tools like SASS, Compass, Breakpoint and Jeet to help with responsive design and provides code examples for how to use media queries and breakpoints.
CSS3 Flexbox allows elements to be laid out in a flexible manner to fully fill available space or adapt to different screen sizes and devices. It improves on floats and eliminates some layout problems. Flexbox uses flex items within a flex container, with properties like flex-direction, justify-content, align-items and flex-wrap controlling item alignment along the main and cross axes. Common uses include navigation bars, image galleries, and responsive layouts. Browser support is good with prefixes in older browsers.
Este documento proporciona una introducción a SASS y Compass. Explica conceptos básicos de SASS como variables, mixins, anidamiento y herencia, así como funciones avanzadas como @import, @each y @media. También cubre la instalación y uso de Compass, una librería que extiende las capacidades de SASS.
Sass is a CSS preprocessor that allows for variables, nested rules, mixins and more. It makes CSS more powerful, efficient and reusable. There are two types of Sass - SCSS syntax which is very similar to CSS, and the original indented Sass syntax which removes braces and semicolons. Sass code is compiled to normal CSS that browsers can understand. The Compass framework extends Sass with tools for responsive design, sprites, and more. Mixins, variables and nesting allow for DRY (Don't Repeat Yourself) coding by reducing repetition in CSS.
This document provides an overview of new features introduced in ES2015 including block scope, constants, arrow functions, classes, inheritance, and extended built-ins. It discusses browser support for these features and options for using transpilers to enable support in older browsers like Internet Explorer. It also briefly mentions potential future features like enums, pattern matching, and optional type annotations.
Ionic es un framework muy popular para el desarrollo de aplicaciones móviles híbridas multi-plataforma usando Cordova.
Recursos Internos:
[Cordova] Empezando con Ionic
https://www.youtube.com/watch?v=-dV_f_IT3uU
[Cordova] Empezando con aplicaciones Ionic en Visual Studio
http://epicalsoft.blogspot.pe/2016/06/cordova-empezando-con-aplicaciones.html
Recursos Externos:
Ionic Framework
http://ionicframework.com
Sass
http://sass-lang.com
AngularJS
https://angularjs.org
NodeJS
https://nodejs.org
npm
https://www.npmjs.com
Apache Cordova
https://cordova.apache.org
The document provides an introduction to HTML, CSS, and SASS. It discusses what each technology is, how they are used together, and some of their key features. It explains that HTML is a markup language used to define the structure and content of web pages, CSS is used to style and lay out HTML elements, and SASS is a CSS preprocessor that adds powerful features like variables, nesting, and mixins to make CSS more efficient to write and maintain. It then provides overviews of important HTML tags, CSS properties and selectors, and features of SASS like mixins and extends.
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Stephen Hay
Slides from my presentation at Breaking Development 2012 in Orlando. This deck is not intended to be standalone, and probably made more sense in combination with my talk. At least, I hope so. I understand that video of the talk will be available in the near future on the Breaking Development website.
This document discusses deception in web design. It provides examples of both benevolent and malicious forms of deception commonly found in user interfaces. Benevolent deception aims to simplify and guide user behavior in a helpful way, while malicious "dark patterns" deliberately mislead users for commercial gain. The document advocates for design approaches that enable users rather than deceive them, through techniques like clarity, consistency, and removing unnecessary distractions and delays. Both benevolent and malicious forms of deception can influence user behavior and understanding.
Sass and Compass Workshop slides discuss:
1. Why Sass and Compass should be used including keeping stylesheets DRY, easier revisions, and creating style frameworks.
2. Sass allows variables, nesting, functions and other features that make CSS more powerful, manageable and reusable.
3. Nesting rules in Sass avoids repetition by nesting selectors within one another like CSS rules.
1. The document provides tips for overcoming excuses that block progress towards success. It discusses becoming aware of excuses and their underlying motivations.
2. Successful people have a no-excuses attitude and take action towards their dreams instead of making excuses. Examples are given of people who have overcome limitations through action.
3. The document advises confronting fears and excuses by taking small steps and focusing on solutions rather than excuses. Internal and external motivations can help launch a life without excuses.
SASS is a CSS preprocessor that allows developers to write code in a scripting language called SASS and then compile it into CSS. SASS offers features like variables, nested rules, mixins, and functions that make writing CSS faster and more organized. It has two syntax options, SCSS which is fully CSS compatible and indented Sass which uses indentation instead of brackets. SASS also allows importing partial files, nesting selectors, extending styles, and using control directives and expressions to conditionally include styles.
The document provides an introduction to CSS (Cascading Style Sheets) and describes various CSS concepts including: internal and external style sheets, text formatting properties like color, alignment, and decoration, font properties, CSS selectors like element, class, and ID selectors, working with tables, lists, the CSS box model, and backgrounds. Key points covered include the different ways to insert CSS stylesheets, how selectors are used to target elements, and properties for formatting text, backgrounds, tables, and boxes.
The document provides information about CSS (Cascading Style Sheets), including what CSS is, why it's used, how it solved problems with HTML, and some key CSS concepts. CSS is used to define styles and layout for web pages. It allows separation of document content from document presentation and saves work by controlling multiple page styles in one file. CSS removes formatting tags from HTML and solves issues that arose when tags like <font> were added to HTML for formatting.
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
This document provides an introduction to CSS (Cascading Style Sheets), including what CSS is, why it is used, its history and syntax. It describes CSS selectors, properties, and different methods of attaching style definitions. It also covers the CSS box model and properties for styling text, links, lists, backgrounds, borders, margins and paddings.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS allows you to control the color, font, size, spacing, and other aspects of HTML elements. CSS properties like background, text, font, links, lists and box model can be used to format HTML elements. CSS rules have selectors that specify the element to which a declaration applies, and declarations that contain property-value pairs that define the presentation of the element.
This document provides an introduction to CSS (Cascading Style Sheets). It discusses key CSS concepts like selectors, properties, values and syntax. It also covers different ways to apply CSS like inline, internal and external stylesheets. Common CSS properties for formatting text like font, color, text-decoration are described. The document also discusses CSS box model and different units of measurement in CSS.
CSS is used to style and lay out web pages. It allows separation of document content from page layout and design. CSS rules contain selectors that specify the elements to style and properties that define the styles. Common properties include font, color, background, borders, margin and padding. CSS rules can be defined internally, in a linked stylesheet, or inline in HTML elements. CSS provides control over text, font, color, spacing and layout to present content attractively and consistently across multiple browsers and devices.
Cascading Style Sheets (CSS) allows obtaining full control over HTML elements and their default properties. CSS can be used to easily redefine properties of any HTML tag, opening new design opportunities. Styles defined in CSS can be reused throughout an HTML document or across multiple pages for consistent formatting. The document discusses different methods of implementing CSS, including inline, internal, and external stylesheets. It also covers various CSS properties for formatting text, fonts, colors, backgrounds, lists, borders, opacity, and more. Examples are provided to demonstrate different CSS declarations.
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
The document provides an introduction to Cascading Style Sheets (CSS), covering topics such as what CSS is, basic CSS syntax, CSS selectors including element, class and ID selectors, CSS properties for colors/backgrounds, text formatting, links, padding/margins, and layout. It also discusses CSS validation and the role of the World Wide Web Consortium (W3C) in maintaining web standards.
Cascading style sheets (CSS) allow specifying formatting instructions for HTML pages separately from the HTML code. CSS rules can be embedded within HTML, defined internally within the <style> tag, or linked externally via a .css file. CSS selectors target HTML elements to which formatting is applied using properties for text, fonts, colors, spacing, and more. This allows separating document structure (HTML) from presentation (CSS).
CSS (Cascading Style Sheets) is a style sheet language that allows control over the look and formatting of a document written in a markup language like HTML. CSS handles the styling and layout of web pages and allows separation of content from design. Key points covered in the document include that CSS can control colors, fonts, layout, backgrounds and other styling aspects. It provides advantages like time savings, easier maintenance, faster page loads and global standards compliance. CSS rules are created and maintained by the W3C and different versions have been released over time. CSS syntax involves selectors, properties and values to target elements and apply styles. Styles can be defined inline, internally, or via external stylesheets.
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents, including how elements should be rendered on screen, paper, or in other media. CSS saves a lot of work by enabling web developers to change the appearance and layout of multiple pages at once by editing just one CSS file. CSS solves the problem of formatting documents that originally arose with HTML by separating document content from document presentation.
This document introduces CSS (Cascading Style Sheets) and provides examples of how to use CSS to style HTML elements. CSS allows separation of document structure (HTML) from presentation (CSS). There are three ways to associate CSS with HTML - external CSS files linked via <link>, internal <style> sections, or inline styles via the style attribute. CSS selectors target elements by tag name, class, ID, or context. Classes and IDs allow targeting groups or individual elements. CSS rules define styles using properties and values within curly braces. This allows consistent styling across pages by changing a single CSS file.
IObit Malware Fighter Pro Crack with Crack Download [Latest]Ayesha khan
COPY & PASTE LINK 👉👉👉https://pcsoftsfull.org/dl
IObit Malware Fighter Pro Crack is an advanced and powerful malware and spyware removal utility that detects, removes the deepest infections and protects your PC from a variety of potential spyware, adware, Trojan horses, keyloggers, Attacks with bots, worms and hijackers.
Total Uninstall Pro 7 Crack Free Download [Latest]Designer
Copy Link & Paste in Google:👉👉👉 http://alipc.pro/dl
Total Uninstall Professional Crack is an impressive application designed to uninstall programs from your computer and completely remove registry entries or other tracking information.
Seven Park is more than a building—it’s a signal of what’s next.
Across from a $30 million green space and minutes from everywhere that matters, it’s the new pulse of Hallandale’s creative and residential revival. Designed for adults in their 30s to 50s who want lifestyle, flexibility, and smart ownership—it’s modern living made greener. (its green living with city rhythm)
This is city living with outdoor soul. A community that values space, flow, and cultural energy.
A new landmark for a city that’s finally stepping into its potential.
Seven Park is urban by nature—and built for the way we want to live next.
NCH Pixillion Image Converter Plus Crack 7.37 with Keygen [Latest]Designer
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
NCH Pixillion Image Converter Plus Crack NCH Pixillion Image Converter Plus 7.37 Crack Download is an impressive and comprehensive multi-format image file converters available.
MAGIX ACID Pro Suite 10.0.4.29 with Crack Free Download [Latest]Yahoo
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
MAGIX ACID Pro Suite Crack MAGIX ACID Pro Suite Crack Download is a very powerful digital audio workstation for composing, recording, mixing, and arranging audio and MIDI tracks.
Icecream Screen Recorder Pro 6.25 Full Crack + Key 2025Yahoo
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
Icecream Screen Recorder Pro Crack Icecream Screen Recorder Pro Crack is a very reliable application that allows you to record certain areas of the screen or capture screenshots.
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadDesigner
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
Apowersoft Video Editor Crack Apowersoft Video Editor Crack Free Download (knows as ApowerEdit) is a powerful application that will allow you to create impressive movies by combining photos and videos.
MacX HD Video Converter Pro 5.16.0 Full Crack 2025Yahoo
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
MacX HD Video Converter Pro Crack MacX HD Video Converter Pro Crack is a very advanced software application that can be used for video conversion.
Service Design.. staging and Change managementsdnswitzerland
A presentation by Chiara Valerio
Service Designer at Institute of Tourism HES-SO Valais-Wallis.
Before working in Valais, Chiara worked as UX researcher and interaction designer both in freelance and within consultancies like :ratio or Wax Interactive.
Fun fact, Chiara started her career working on Yacht Designs.
During the Swiss Service Design Day conference 2025, Chiara hosted a talk about "Service Design and Change Management.
The Swiss Service Design Day conference 2025 is hosted by the Swiss Service Design Network.
FontLab 7.2.0.7608 with Crack Free Download [Latest Version]Yahoo
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
FontLab Crack FontLab Crack Download is a comprehensive font editor that will support all major outline font formats including Type 1, TrueType, OpenType and Multiple Master.
Errors and error rates: workshop for X-Gov content clubpptxCaroline Jarrett
A session for the inaugural meeting of the cross-UK Gov content club, in which Caroline looks at writing effective error messages, and introduces her 2025 topic - error rates and data quality.
Extreme Picture Finder 3.51.4 with Crack Free Download [Latest]Designer
Copy Link & Paste in Google👉👉👉 Extreme Picture Finder Crack Extreme Picture Finder Crack Download is a powerful application that can be used to find and download digital images, mp3/wmv music and MPG/AVI/WMV videos.
GlarySoft Malware Hunter Pro 1.117.0.710 with Crack [Latest]Designer
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
GlarySoft Malware Hunter Pro Crack GlarySoft Malware Hunter Pro Crack is an award-winning product that protects against all types of threats, protects your data, protects your privacy and keeps your PC virus-free.
Service Design in Zürich's city governmentsdnswitzerland
During the Swiss Service Design Day conference 2025, Beatrice hosted a talk on "Service Design in Zurich's city government".
This talk was part of the Swiss Service Design Day 2025 organized by the Service Design Network Chapter Switzerland.
About Beatrice:
Beatrice is a Service Designer at Smart City Zürich an initiative from the city of Zürich that strengthens Zurich as a location for innovation and promotes user-friendly services for the population and companies.
Beatrice has an extensive expertise in designing and optimizing digital products.
Before working in the public sector, Beatrice worked in user experience, customer experience, research and project management roles at Neue Zürcher Zeitung (NZZ), Swiss International Air Lines, Stimmt.
Adobe Bridge CC 2021 v11.0.0.83 with Crack Download [Latest]Yahoo
Copy Link & Paste in Google👉👉👉 https://alipc.pro/dl/
Adobe Bridge CC Crack Adobe Bridge CC 2021 Crack Download is a powerful application for managing and organizing images, videos, media and other assets in a friendly development environment.
Leverage Yantram Studio's 3D Interior Rendering Services to elevate your property marketing. Our high-quality renders for living rooms, dining areas, and bedrooms provide potential buyers with an immersive sense of the space, showcasing functionality and aesthetic appeal. These compelling visuals significantly enhance listings and help secure faster sales by presenting homes at their absolute best.
We give service all over City in "Jeddah/Saudi Arabia" : Riyadh, Jeddah, Mecca, Dammam, Medina, Abha, Ha'il, Hofuf, Al-Mubarraz, Sakakah, Taif, Jubail, Buraydah, Tabuk, Khamis Mushait, Najran, Qatif, Khobar, Al Bahah, Hafr Al-Batin, Jizan, Qurayyat, Al Qunfudhah
🌐 Visit: www.yantramstudio.com
📧 hello@yantramstudio.com
📞 Whatsapp :+91 99097 05001 (India)
💡 Powered by - @yantramstudio
Ontological Thinking to Navigate Complex Problems
Unlock the power of ontological thinking to tame complexity in digital systems. This session reveals how this approach enhances search, navigation, and knowledge management, empowering designers to craft intuitive, meaningful experiences that elevate user engagement and transform information landscapes.
Hot Weather, Cute Looks: Slay the Heatwave in Style with BoheeWoheeboheewohee
Sweating in the sun but still wanna serve looks? This SlideShare is your ultimate style guide to beat the heat without compromising your vibe. From casual wear tops and breezy crop tops to western chic dresses, BoheeWohee brings you fashion that’s cool, comfy, and seriously cute. Explore styling tips, trending silhouettes, and top picks for effortless summer slay.
Perfect for fashion lovers searching for casual outfits, western styles, and stylish women’s wear online. ☀️✨
#SummerFashion2025 #BoheeWoheeStyle #WesternChic #CasualWearGoals
Stardock WindowBlinds 10.85 Crack Full Version 2025Google
Download Link & Paste in Google👉👉👉 https://alipc.pro/dl/
Stardock WindowBlinds Crack Stardock WindowBlinds Crack is a simple yet powerful tool for Windows users to customize their desktops with different beautiful themes.
Security Monitor Pro 6.22 Crack Free DownloadSoftware
Copy Link & Paste in Google:👉👉👉 https://alipc.pro/dl
Security Monitor Pro turns your PC and IP cameras into a full video security and surveillance system. This software allows you to monitor and record from up to 32 IP cameras and up to 4 USB cameras simultaneously.
9. • CSS stands for Cascading Style Sheets
What is CSS?
10. • CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
What is CSS?
11. • CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• CSS can solve many design problems without
adding images or changing the HTML
What is CSS?
26. CSS Selectors
• CSS selectors allow you to select and manipulate
HTML element(s).
27. CSS Selectors
• CSS selectors allow you to select and manipulate
HTML element(s).
• CSS selectors are used to "find" (or select) HTML
elements based on their id, classes, types,
attributes, and more.
29. Types of CSS Selectors
• The element Selector selects elements based on the
element name. (e.g. body, header, p, footer)
30. Types of CSS Selectors
• The element Selector selects elements based on the
element name. (e.g. body, header, p, footer)
• The id Selector selects a specific element on the page and
can only be used once (e.g. #main, #content, #footer)
31. Types of CSS Selectors
• The element Selector selects elements based on the
element name. (e.g. body, header, p, footer)
• The id Selector selects a specific element on the page and
can only be used once (e.g. #main, #content, #footer)
• The class Selector selects elements with the specific class
names and cans be reused
(e.g. .wrapper, .column, .panel, .panel-pane)
36. Ways to use CSS
• CSS can be attached to HTML in 3 ways
• Inline (wysiwyg for example)
• Embedded (wysiwyg for example)
• Links CSS files (the preferred method)
46. Ways to use CSS
<head>!
<link rel="stylesheet"
type="text/css" href=“style.css">!
</head>
External Style Sheet reference
47. Ways to use CSS
<head>!
<link rel="stylesheet"
type="text/css" href=“style.css">!
</head>
External Style Sheet reference
p {color:red;}
style.css
48. Ways to use CSS
<head>!
<link rel="stylesheet"
type="text/css" href=“style.css">!
</head>
External Style Sheet reference
Some Text
Result
p {color:red;}
style.css
49. Ways to use CSS
<head>!
<link rel="stylesheet"
type="text/css" href=“style.css">!
</head>
External Style Sheet reference
Some Text
Result
p {color:red;}
style.css
52. CSS Lists
• In HTML, there are two types of lists:
• unordered lists - the list items are marked with
bullets
53. CSS Lists
• In HTML, there are two types of lists:
• unordered lists - the list items are marked with
bullets
• ordered lists - the list items are marked with
numbers or letters
54. CSS Lists
• In HTML, there are two types of lists:
• unordered lists - the list items are marked with
bullets
• ordered lists - the list items are marked with
numbers or letters
• Fusce cursus ante a sem egestas.
• Maecenas at lectus vitae libero
• Mauris lobortis enim vitae
• scelerisque.
• Aliquam adipiscing tellus
unordered list
55. CSS Lists
• In HTML, there are two types of lists:
• unordered lists - the list items are marked with
bullets
• ordered lists - the list items are marked with
numbers or letters
• Fusce cursus ante a sem egestas.
• Maecenas at lectus vitae libero
• Mauris lobortis enim vitae
• scelerisque.
• Aliquam adipiscing tellus
unordered list
1. Fusce cursus ante a sem egestas.
2. Maecenas at lectus vitae libero
3. Mauris lobortis enim vitae
4. scelerisque.
5. Aliquam adipiscing tellus
ordered list
58. CSS Margin
• Margin is the space around elements (outside the
border).
• The margin does not have a background color,
and is completely transparent.
59. CSS Margin
• Margin is the space around elements (outside the
border).
• The margin does not have a background color,
and is completely transparent.
• The top, right, bottom, and left margin can be
changed independently using separate properties.
64. CSS Padding
• Padding is the space between the element
border and the element content
65. CSS Padding
• Padding is the space between the element
border and the element content
• The top, right, bottom, and left padding can be
changed independently using separate
properties.
75. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
76. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
77. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
78. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
79. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
80. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
• font-variant Specifies if text should be small-caps
81. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
• font-variant Specifies if text should be small-caps
• font-weight Specifies the weight of a font
82. CSS Fonts
• CSS font properties define the font family, boldness, size,
and the style of a text.
• Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
• font-variant Specifies if text should be small-caps
• font-weight Specifies the weight of a font
• font Sets all the font properties in one declaration
89. CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
90. CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
91. CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
• text-decoration specifies the decoration
92. CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
• text-decoration specifies the decoration
• text-indent specifies the indentation of the first line
93. CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
• text-decoration specifies the decoration
• text-indent specifies the indentation of the first line
• text-shadow specifies the shadow effect
94. CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
• text-decoration specifies the decoration
• text-indent specifies the indentation of the first line
• text-shadow specifies the shadow effect
• text-transform controls the capitalization of text
95. CSS Text
• color sets the color of text
• letter-spacing adjusts the space between characters
• line-height sets the distance between lines of text
• text-decoration specifies the decoration
• text-indent specifies the indentation of the first line
• text-shadow specifies the shadow effect
• text-transform controls the capitalization of text
• word-spacing changes the space between words
96. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu
lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis
justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus
vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac
dolor iaculis convallis.
CSS Text
97. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu
lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis
justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus
vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac
dolor iaculis convallis.
p {font-family:Georgia Times serif;}
CSS Text
98. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu
lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis
justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus
vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac
dolor iaculis convallis.
p {font-family:Georgia Times serif;}
a {color:$blue; text-decoration:underline;}
CSS Text
99. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu
lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis
justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus
vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac
dolor iaculis convallis.
p {font-family:Georgia Times serif;}
a {color:$blue; text-decoration:underline;}
.quote {color:$red; font-style:italic;}
CSS Text
100. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu
lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis
justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus
vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac
dolor iaculis convallis.
p {font-family:Georgia Times serif;}
a {color:$blue; text-decoration:underline;}
.quote {color:$red; font-style:italic;}
CSS Text
101. Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu
lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis
justo.“Donec et molestie purus”. Cras et faucibus est, a viverra odio. Praesent luctus
vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac
dolor iaculis convallis.
p {font-family:Georgia Times serif;}
a {color:$blue; text-decoration:underline;}
.quote {color:$red; font-style:italic;}
CSS Text
103. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
104. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
105. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
106. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
107. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
108. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
109. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
• a:hover Selects links on mouse over
110. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
• a:hover Selects links on mouse over
• p::first-letter Selects the first letter of a paragraph
111. CSS Pseudo-classes
• CSS pseudo-classes are used to select the current condition of
an element.
• The most common pseudo-classes are links
• Links can be styled differently depending on what state they
are in.
• a:link Selects an unvisited link
• a:visited Selects visited links
• a:active Selects the active link
• a:hover Selects links on mouse over
• p::first-letter Selects the first letter of a paragraph
• p::first-line Selects the first line of a paragraph
113. CSS Background
• CSS background properties are used to define the background
effects of an element.
114. CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
115. CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
116. CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
117. CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
118. CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
• background-position sets the starting position of a background
image
119. CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
• background-position sets the starting position of a background
image
• background sets all the background properties in one declaration
120. CSS Background
• CSS background properties are used to define the background
effects of an element.
• background-color sets the background color of an element
• background-image sets the background image for an element
• background-repeat sets how a background image will be
repeated
• background-attachment sets whether a background image is
fixed or scrolls with the rest of the page
• background-position sets the starting position of a background
image
• background sets all the background properties in one declaration
123. CSS Positioning
• The CSS positioning properties allow you to position an
element.
• Elements can be positioned using the top, bottom, left, and
right properties.
124. CSS Positioning
• The CSS positioning properties allow you to position an
element.
• Elements can be positioned using the top, bottom, left, and
right properties.
• position:static is the default position of an element
125. CSS Positioning
• The CSS positioning properties allow you to position an
element.
• Elements can be positioned using the top, bottom, left, and
right properties.
• position:static is the default position of an element
• position:fixed tells an element to be positioned relative to the
browser window. It will not move even if the window is scrolled
126. CSS Positioning
• The CSS positioning properties allow you to position an
element.
• Elements can be positioned using the top, bottom, left, and
right properties.
• position:static is the default position of an element
• position:fixed tells an element to be positioned relative to the
browser window. It will not move even if the window is scrolled
• position:relative tells an element to be positioned relative to
its normal position.
127. CSS Positioning
• The CSS positioning properties allow you to position an
element.
• Elements can be positioned using the top, bottom, left, and
right properties.
• position:static is the default position of an element
• position:fixed tells an element to be positioned relative to the
browser window. It will not move even if the window is scrolled
• position:relative tells an element to be positioned relative to
its normal position.
• position:absolute tells an element where to be positioned
relative to its parent element.
137. CSS Float
• With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
138. CSS Float
• With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
• clear Specifies which sides of an element where
other floating elements are not allowed.
139. CSS Float
• With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
• clear Specifies which sides of an element where
other floating elements are not allowed.
• float Specifies whether or not a box should float
to the left or right.
144. img {float:none;}
img {float:left;}
img {float:right;}
• Vivamus dignissim nunc eleifend, commodo mi sed,
aliquam ante. Donec id lacus eu lectus sollicitudin viverra.
Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia
vel urna ac, dictum lobortis justo.“Donec et molestie
CSS Float
145. img {float:none;}
• Vivamus dignissim nunc eleifend, commodo mi sed,
aliquam ante. Donec id lacus eu lectus sollicitudin viverra.
Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia
vel urna ac, dictum lobortis justo.“Donec et molestie
• purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel
purus non mollis. In luctus vitae lectus quis fringilla. Curabitur
porttitor justo ac dolor iaculis convallis.
img {float:left;}
img {float:right;}
• Vivamus dignissim nunc eleifend, commodo mi sed,
aliquam ante. Donec id lacus eu lectus sollicitudin viverra.
Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia
vel urna ac, dictum lobortis justo.“Donec et molestie
CSS Float
146. img {float:none;}
• Vivamus dignissim nunc eleifend, commodo mi sed,
aliquam ante. Donec id lacus eu lectus sollicitudin viverra.
Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia
vel urna ac, dictum lobortis justo.“Donec et molestie
• purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel
purus non mollis. In luctus vitae lectus quis fringilla. Curabitur
porttitor justo ac dolor iaculis convallis.
• Vivamus dignissim nunc eleifend, commodo mi sed,
aliquam ante. Donec id lacus eu lectus sollicitudin viverra.
Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia
vel urna ac, dictum lobortis justo.“Donec et molestie
• purus”. Cras et faucibus est, a viverra odio. Praesent luctus vel
purus non mollis. In luctus vitae lectus quis fringilla. Curabitur
porttitor justo ac dolor iaculis convallis.
img {float:left;}
img {float:right;}
• Vivamus dignissim nunc eleifend, commodo mi sed,
aliquam ante. Donec id lacus eu lectus sollicitudin viverra.
Curabitur congue ultricies elit, at euismod mauris iaculis
at. Sed et dignissim ipsum. Quisque massa quam, lacinia
vel urna ac, dictum lobortis justo.“Donec et molestie
CSS Float
148. CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
149. CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
150. CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
• display:none hides an element, and it will not take up any
space.
151. CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
• display:none hides an element, and it will not take up any
space.
• display:inline tells an element to only take up as much
width as necessary, and will not force line breaks.
152. CSS Display and Visibility
• The display property specifies if/how an element is displayed,
and the visibility property specifies if an element should be
visible or hidden.
• visibility:hidden hides an element, but it will still take up
the same space as before.
• display:none hides an element, and it will not take up any
space.
• display:inline tells an element to only take up as much
width as necessary, and will not force line breaks.
• display:block tells an element will takes up the full width
available, and will have a line break before and after it
154. CSS Image Opacity / Transparency
• The CSS3 property for transparency is opacity.
155. CSS Image Opacity / Transparency
• The CSS3 property for transparency is opacity.
• The opacity property can take a value from 0.0 -
1.0. A lower value makes the element more
transparent.
156. CSS Image Opacity / Transparency
• The CSS3 property for transparency is opacity.
• The opacity property can take a value from 0.0 -
1.0. A lower value makes the element more
transparent.
{opacity:0.1;}
157. CSS Image Opacity / Transparency
• The CSS3 property for transparency is opacity.
• The opacity property can take a value from 0.0 -
1.0. A lower value makes the element more
transparent.
{opacity:0.1;} {opacity:0.5;}
158. CSS Image Opacity / Transparency
• The CSS3 property for transparency is opacity.
• The opacity property can take a value from 0.0 -
1.0. A lower value makes the element more
transparent.
{opacity:0.1;} {opacity:0.5;} {opacity:1.0;}
160. CSS Image Sprites
• An image sprite is a collection of images put into
a single image.
161. CSS Image Sprites
• An image sprite is a collection of images put into
a single image.
• A web page with many images can take a long
time to load and generates multiple server
requests.
162. CSS Image Sprites
• An image sprite is a collection of images put into
a single image.
• A web page with many images can take a long
time to load and generates multiple server
requests.
164. CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
165. CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
166. CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
167. CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
• print Used for printers
168. CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
• print Used for printers
• screen Used for computer screens
169. CSS Media Types
• By using the @media rule, a website can have a
different layout for screen, print, mobile phone,
tablet, etc.
• all Used for all media type devices
• braille Used for braille tactile feedback devices
• print Used for printers
• screen Used for computer screens
• tv Used for television-type devices
172. • SASS stands for Syntactically Awesome Style Sheets
What is SASS?
173. • SASS stands for Syntactically Awesome Style Sheets
• Sass is a CSS preprocessor
What is SASS?
174. • SASS stands for Syntactically Awesome Style Sheets
• Sass is a CSS preprocessor
• Sass can be written in either the sass or scss syntax
What is SASS?
175. • SASS stands for Syntactically Awesome Style Sheets
• Sass is a CSS preprocessor
• Sass can be written in either the sass or scss syntax
• Sass files compile into css files
What is SASS?
178. • CSS doesn’t allow variables
• SASS uses mixins (reusable blocks of styles)
Why do we use SASS?
179. • CSS doesn’t allow variables
• SASS uses mixins (reusable blocks of styles)
• SASS is faster, more efficient, and easier to maintain
Why do we use SASS?
180. • CSS doesn’t allow variables
• SASS uses mixins (reusable blocks of styles)
• SASS is faster, more efficient, and easier to maintain
• Using COMPASS with SASS allows us to write many lines
of cross-browser compatible CSS in a single line of code!
Why do we use SASS?