16- Learn CSS Fundamentals / Background

Apr 13, 20200 likes154 views

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to set a background using CSS. - How to apply different background options: background-color, background-position, background-image, background-repeat and background-attachment. - How to create linear and radial gradients. - Tools: examine background and accessibility information, CSS gradients gallery, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/background.php REFERENCES: - The background CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/background - Chrome Developer Tools: Contrast ratio in the Color Picker. https://developers.google.com/web/updates/2018/01/devtools#contrast - Enhanced recommended contrast ratio (AAA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-enhanced - Minimum recommended contrast ratio (AA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-minimum - Gradient Magic: 28 collections and over 1558 unique CSS gradients. https://www.gradientmagic.com/ - WebGradients: free collection of 180 linear gradients. https://webgradients.com/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Background

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
background-image
background-color
X
Y
background-position
background-repeat
background-attachment

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
IMAGE REPEATCOLOR
POSITIONATTACHMENT

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-COLOR
div {
width: 550px;
height: 550px;
background-color: #72B63C;
}
Enter any color format

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
background-image
url(image)
linear-gradient

radial-gradient

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
}

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
div {
width: 550px;
height: 550px;
background-image: linear-gradient(blue, yellow);
}
LINEAR GRADIENT / VERTICAL
READY TO USE CODE

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-IMAGE
0%
Gradient ray
100%
Ending shape

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-REPEAT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: ;
}
repeat-x
repeat-y
repeat
no-repeat

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-ATTACHMENT
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: no-repeat;
background-attachment: ;
}
scroll
fixed
Scrolls with the page.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND-POSITION
div {
width: 550px;
height: 550px;
background-color: #72B63C;
background-image: url("tree.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 100px 20px;
}
X Y

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
BACKGROUND SHORTHAND
div { background: color image repetition attachment position }
background: #0f0 url("tree.png") no-repeat fixed right top
EXAMPLE

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: CHROME DEVELOPER TOOLS
Contrast information

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: CHROME DEVELOPER TOOLS
Meets the minimum recommended contrast ratio (AA).
Meets the enhanced recommended contrast ratio (AAA).

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: GRADIENT MAGIC

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: WEBGRADIENTS

Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

We respect your time 
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code 
Real code you can just copy and paste into
your real projects.
Step by step guides 
Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com

This document discusses different units used in CSS including absolute and relative units. Absolute units like pixels and points set fixed sizes, while relative units scale with parent elements. Examples show how percentages, ems, rems, viewport units like vw and vh, and font-based units like vmin and vmax scale elements relative to different contexts. The document recommends choosing relative units when elements need to scale with viewport changes. It also promotes understanding units to build flexible and responsive designs.

HTML&CSS 5 - Intermediate CSS (2/2)Dinis Correia

Yes we can!Elcio Ferreira

Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda

Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos? O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.

CSS3 is Not Magic Pixie DustKyle Adams

CSS FrameworksWeb Directions

This document discusses CSS frameworks and how to choose the right one. It begins by defining what CSS frameworks are, which is a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into reusable modules. It then asks three questions: What do CSS frameworks do? How to choose a CSS framework? Are CSS frameworks pure evil? It discusses how frameworks provide resets, grids and other common components to standardize styles. When choosing a framework, considerations include popularity, documentation, flexibility and source code quality. While frameworks may seem to reduce control and introduce non-semantic classes, they provide large benefits in standardization and speed of development.

Theme 23bellaandzendaya

CSS Frameworks: Make the Right Choice (EOTW09)Kevin Yank

With the proliferation and widespread adoption of JavaScript frameworks, smart developers have wondered if a similar approach to smoothing over the rough spots of CSS might work. Thus, CSS frameworks like Blueprint, YUI Library CSS Tools, Boilerplate, and many others were born. In this session, we will survey the landscape of CSS frameworks and consider how each of them deals with the unique challenge of creating generalised, reusable CSS styles. There are a number of different approaches, and some are better than others. Choose the right framework and you’ll save yourself a lot of work. Choose the wrong one, and you’ll find your projects weighed down by restrictive assumptions and masses of code that you don’t understand. When it comes to CSS frameworks, making the right choice is everything. By the end of this session, you might just decide that the right framework for you is no framework at all.

Sass, Compass and the new tools - Open Web Camp IVDirk Ginader

This document discusses the author's experience with CSS preprocessors like Sass and tools like LiveReload. It begins by showing the author's initial skepticism of preprocessors but realization that writing browser prefixes manually is tedious. The author is then introduced to features of Sass like mixins, variables, and parameterization that allow writing CSS more efficiently and maintainably. Sass and tools like LiveReload are shown to automate tasks like prefixing and live reloading of pages on file changes.

CSSプリプロセッサの取扱説明書拓樹谷

The document discusses CSS preprocessors like Sass, LESS, and Stylus. It explains that preprocessors allow for features not available in regular CSS like variables, nesting, mixins and more. It provides examples of how preprocessors make CSS more modular and reusable by allowing things like defining colors as variables and creating mixins for common CSS properties. The document is intended to teach developers how to use preprocessors to write more efficient CSS code.

Managing responsive websites with css preprocessors. The University of Akron

Sprites rollovershstryk

CSS sprites allow images to be combined into a single image called a "master image". Only portions of the master image are displayed using CSS properties like background-position. This avoids separate HTTP requests for each image, improving performance. In 2004, Dave Shea proposed using CSS sprites to display hover/active states by changing the background-position, eliminating flickering from additional requests. Sprites work by loading the master image once, then shifting the position to show different parts, like how early video game sprites reused graphics memory.

CSS Frameworks: Make the Right Choice (WDS09)Kevin Yank

Cascading Style SheetsSenthil Kumar

web pageSushil Kumar

This document contains the CSS code for styling and laying out elements on a webpage. It defines various classes for elements like headers, containers, buttons, images, and text. CSS properties like background images, colors, widths, heights, floats and margins are set for each class to specify the appearance and position of different page components like navigation buttons, banners, titles and content sections. The code aims to create a consistent visual design across the webpage by reusing these classes in the HTML markup.

IE9에서 HTML5 개발하기Reagan Hwang

CSS in React - The Good, The Bad, and The UglyJoe Seifi

Learn to love CSS3 | Joomla! Day DeutschlandThemePartner

The document provides an overview of the history and development of CSS3 and recommendations for using CSS3 features. It discusses: - The origins of CSS dating back to 1993 with the proposal of named stylesheets and the creation of CSS1 in 1994. - That CSS3 was first mentioned in 1999 but many features were not usable until much later as support by browsers evolved. - Recommendations to use CSS3 features progressively and not on critical layers initially to ensure compatibility, prioritizing performance, and only enhancing websites once they work for older browsers. - Numerous code examples demonstrating CSS3 features like rounded corners, shadows, gradients, animations and transitions that can provide visual enhancements when supported

шапкаyesmanforever

Using Sass - Building on CSSSayanee Basu

The document discusses the benefits of using Sass and SCSS over regular CSS. Some key points covered include: - Sass/SCSS allows for nesting, variables, mixins and imports which make the code more organized, flexible and reusable. - Features like nesting and parent selectors reduce repeated code. Operations like math functions allow dynamic values. - Variables and partials allow separating code into reusable segments. Imports collect partials to reduce repetition. - Sass watches for changes and compiles to CSS automatically, improving the development workflow and catching errors. - SCSS is a superset of CSS so valid CSS is also valid SCSS, allowing seamless compatibility.

Presentation-1-1.pptxIvanPasana

This document discusses CSS background properties including background-image, background-color, background-position, background-repeat, and the background shorthand property. It provides examples and descriptions of how to set images, colors, positioning, repetition, and combining these properties using the shorthand. Key points covered include using URLs or keywords to set images and colors, positioning images in centers or sides, repeating images horizontally, vertically or not at all, and ordering properties in the shorthand.

Learn to Love CSS3 [English]ThemePartner

Curious to know what this CSS3 hype is all about? Visit this presentation to learn that it isn't just a hype. CSS3 adds awesome new capabilities to a front-end developer's palette of tools to create a beautiful (and functional) website. Learn more about several of the best new options that CSS3 is giving us, the current level of browser support for CSS3, and lots of useful resources to keep yourself up-to-date and learn more. If you want to learn how to style your website using CSS3, then this is a presentation you don't want to miss!

Sass & Compass (Barcamp Stuttgart 2012)emrox

CSS3 Tips & TechniquesUIEpreviews

This document provides tips and techniques for using CSS3 features. It discusses using the :target pseudo-class to style elements linked to in URLs. It also covers triggering transitions on events other than :hover, such as when a textarea gains focus. Pseudo-elements like ::before and ::after are shown to generate extra styling beyond just text. The document also demonstrates how to create perfect circles and combine multiple background images and properties.

Background property in cssDhruvin Nakrani

From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen

This document discusses bringing designs created in Photoshop or other design programs to life as WordPress themes. It covers considerations when slicing designs, using starter themes, building child themes, and inserting CSS. Tips are provided on focusing on high impact elements first, understanding the parent theme structure, and using tools like Firebug to debug designs. Resources for learning more about web development and WordPress theme building are also listed.

Css tips & tricksanubavam-techkt

The document provides several methods for centering elements both vertically and horizontally using CSS including: 1. Setting the line-height of text to match the height of its containing block to vertically center text. 2. Using absolute positioning, a negative top margin equal to half the element's height, and setting the top value to 50% to vertically center an element. 3. Using display:table on a wrapper and display:table-cell with vertical-align:middle on the inner element to vertically center it.

Learn Sass and Compass quickBilly Shih

3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Any HTML element can be a flex container. Child elements of that container are considered flex items. - A flex container can be displayed as a block (display: flex) or inline (display: inline-flex). - By default, flex items width and height are defined by their content. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/flexbox-container-items.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

2- Learn Flexbox & CSS Grid / ContextIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - We no longer talk about CSS 3 or 4. CSS has now more than 80 specifications that evolve independently. - Where to find all CSS specifications. - How to check maturity of specifications by status code. - Where to follow CSS current work. - Where to find Flexbox and CSS Grid specifications. - How to check Flexbox and CSS Grid browser support. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/context.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

More Related Content

Similar to 16- Learn CSS Fundamentals / Background (20)

Sass, Compass and the new tools - Open Web Camp IVDirk Ginader

CSSプリプロセッサの取扱説明書拓樹谷

Managing responsive websites with css preprocessors. The University of Akron

Sprites rollovershstryk

CSS Frameworks: Make the Right Choice (WDS09)Kevin Yank

Cascading Style SheetsSenthil Kumar

web pageSushil Kumar

IE9에서 HTML5 개발하기Reagan Hwang

CSS in React - The Good, The Bad, and The UglyJoe Seifi

Learn to love CSS3 | Joomla! Day DeutschlandThemePartner

шапкаyesmanforever

Using Sass - Building on CSSSayanee Basu

Presentation-1-1.pptxIvanPasana

Learn to Love CSS3 [English]ThemePartner

Sass & Compass (Barcamp Stuttgart 2012)emrox

CSS3 Tips & TechniquesUIEpreviews

Background property in cssDhruvin Nakrani

From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen

Css tips & tricksanubavam-techkt

Learn Sass and Compass quickBilly Shih

Sass, Compass and the new tools - Open Web Camp IVDirk Ginader

CSSプリプロセッサの取扱説明書拓樹谷

Managing responsive websites with css preprocessors. The University of Akron

Sprites rollovershstryk

CSS Frameworks: Make the Right Choice (WDS09)Kevin Yank

Cascading Style SheetsSenthil Kumar

web pageSushil Kumar

IE9에서 HTML5 개발하기Reagan Hwang

CSS in React - The Good, The Bad, and The UglyJoe Seifi

Learn to love CSS3 | Joomla! Day DeutschlandThemePartner

шапкаyesmanforever

Using Sass - Building on CSSSayanee Basu

Presentation-1-1.pptxIvanPasana

Learn to Love CSS3 [English]ThemePartner

Sass & Compass (Barcamp Stuttgart 2012)emrox

CSS3 Tips & TechniquesUIEpreviews

Background property in cssDhruvin Nakrani

From PSD to WordPress Theme: Bringing designs to lifeDerek Christensen

Css tips & tricksanubavam-techkt

Learn Sass and Compass quickBilly Shih

More from In a Rocket (15)

3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Any HTML element can be a flex container. Child elements of that container are considered flex items. - A flex container can be displayed as a block (display: flex) or inline (display: inline-flex). - By default, flex items width and height are defined by their content. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/flexbox-container-items.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

2- Learn Flexbox & CSS Grid / ContextIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - We no longer talk about CSS 3 or 4. CSS has now more than 80 specifications that evolve independently. - Where to find all CSS specifications. - How to check maturity of specifications by status code. - Where to follow CSS current work. - Where to find Flexbox and CSS Grid specifications. - How to check Flexbox and CSS Grid browser support. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/context.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

1- Learn Flexbox & CSS Grid / Environment setupIn a Rocket

The document discusses setting up a development environment for learning CSS Flexbox and Grid layouts. It recommends using Visual Studio Code as the text editor and Google Chrome as the browser, which both have tools for inspecting Flexbox and Grid layouts. It provides instructions for installing all required software on Windows using Chocolatey or on MacOS using Homebrew, including downloading Chrome, Firefox, and VS Code.

15- Learn CSS Fundamentals / ColorIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to use the color property to set the foreground color of an element's text content, and its decorations. - Methods to apply colors in CSS: named colors, HEX, RGB/RGBA and HSL/HSLA. - Color tools: CSS Peeper, color converter, material design palette, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/color.php REFERENCES: - The color CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/color - Game: What the Hex? http://yizzle.com/whatthehex/ - CSS Peeper: Inspect styles in a simple and well-organized way. https://csspeeper.com/ - RapidTables Color Conversion. https://www.rapidtables.com/convert/color/index.html - Impalette: Scan images for dominant pantone colors. https://www.impalette.com/ - Material Design Palette. https://www.materialpalette.com/ - Brands in colours: Brands colour reference. https://loriskumo.github.io/Brands-In-Colours/ - BrandColors: Collection of official brand color codes. https://brandcolors.net/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

14- Learn CSS Fundamentals / InheritanceIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How some properties on a selector are inherited by all the children of that selector. - List of properties that inherit. - How to override inherited values and prevent inheritance in CSS. - How to reset a property to its inherited or initial value. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/inheritance.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

13- Learn CSS Fundamentals / SpecificityIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How specificity works for different kind of selectors. - How to create selectors avoiding specificity issues and conflicts. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/specificity.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

12- Learn CSS Fundamentals / Mix & groupIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to mix selectors (eg. Combine classes and IDs). - How to group selectors as a best practice to get a much optimized CSS. READY-TO-USE CODE: http://localhost/courses/css/css-fundamentals/mix-group.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

11- Learn CSS Fundamentals / CombinatorsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Different combinator selectors that can be used in CSS. - How to use descendant, child and siblings combinators. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/combinators.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Pseudo-elements as a way to refer to content that does not exist in the source document. - How to style the first letter or line of a text. - How to use CSS to generate content before/after an element’s content. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/pseudo-elements.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket

This document provides information about CSS pseudo-classes. It defines several types of pseudo-classes including dynamic, structural, and others. Dynamic pseudo-classes like :hover and :active select elements when a user interacts with them. Structural pseudo-classes select elements based on their position in a document tree, such as :first-child to select the first child element. The document provides examples of how to use different pseudo-class selectors in CSS code to style elements.

8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to use attribute presence and value selectors. - How to apply substring matching attribute selectors. READY-TO-USE CODE: http://inarocket.com/courses/css/css-fundamentals/selectors-attribute.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

2- Learn HTML Fundamentals / Text FormattingIn a Rocket

Learn HTML5 fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to structure your content with headers. - How to organize your ideas with paragraphs. - How to force spaces and preformat text. - How to format quotes with blockquote. - How to tag relevant content with mark. - How to create ordered, unordered and description lists. - How to show/hide additional content with details. - How to document your code with comments. - How to display reserved and invisible characters with HTML entities.

1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket

Learn SUIT: CSS Naming ConventionIn a Rocket

Learn BEM: CSS Naming ConventionIn a Rocket

3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket

2- Learn Flexbox & CSS Grid / ContextIn a Rocket

1- Learn Flexbox & CSS Grid / Environment setupIn a Rocket

15- Learn CSS Fundamentals / ColorIn a Rocket

14- Learn CSS Fundamentals / InheritanceIn a Rocket

13- Learn CSS Fundamentals / SpecificityIn a Rocket

12- Learn CSS Fundamentals / Mix & groupIn a Rocket

11- Learn CSS Fundamentals / CombinatorsIn a Rocket

10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket

9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket

8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket

2- Learn HTML Fundamentals / Text FormattingIn a Rocket

1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket

Learn SUIT: CSS Naming ConventionIn a Rocket

Learn BEM: CSS Naming ConventionIn a Rocket

Recently uploaded (20)

Internet Coordination Policy 2 (ICP-2) ReviewAPNIC

34 Mobile Electronic Commerce_ Foundations, Development, and Applications (20...Nguyễn Minh

学生卡英国RCA毕业证皇家艺术学院电子毕业证学历证书Taqyea

保密服务皇家艺术学院英文毕业证书影本英国成绩单皇家艺术学院文凭【q微1954292140】办理皇家艺术学院学位证(RCA毕业证书)假学历认证【q微1954292140】帮您解决在英国皇家艺术学院未毕业难题（Royal College of Art）文凭购买、毕业证购买、大学文凭购买、大学毕业证购买、买文凭、日韩文凭、英国大学文凭、美国大学文凭、澳洲大学文凭、加拿大大学文凭（q微1954292140）新加坡大学文凭、新西兰大学文凭、爱尔兰文凭、西班牙文凭、德国文凭、教育部认证，买毕业证，毕业证购买，买大学文凭，购买日韩毕业证、英国大学毕业证、美国大学毕业证、澳洲大学毕业证、加拿大大学毕业证（q微1954292140）新加坡大学毕业证、新西兰大学毕业证、爱尔兰毕业证、西班牙毕业证、德国毕业证，回国证明，留信网认证，留信认证办理，学历认证。从而完成就业。皇家艺术学院毕业证办理，皇家艺术学院文凭办理，皇家艺术学院成绩单办理和真实留信认证、留服认证、皇家艺术学院学历认证。学院文凭定制，皇家艺术学院原版文凭补办，扫描件文凭定做，100%文凭复刻。特殊原因导致无法毕业，也可以联系我们帮您办理相关材料：１：在皇家艺术学院挂科了，不想读了，成绩不理想怎么办？？？ 2：打算回国了，找工作的时候，需要提供认证《RCA成绩单购买办理皇家艺术学院毕业证书范本》【Q/WeChat：1954292140】Buy Royal College of Art Diploma《正式成绩单论文没过》有文凭却得不到认证。又该怎么办？？？英国毕业证购买，英国文凭购买，【q微1954292140】英国文凭购买，英国文凭定制，英国文凭补办。专业在线定制英国大学文凭，定做英国本科文凭，【q微1954292140】复制英国Royal College of Art completion letter。在线快速补办英国本科毕业证、硕士文凭证书，购买英国学位证、皇家艺术学院Offer，英国大学文凭在线购买。英国文凭皇家艺术学院成绩单，RCA毕业证【q微1954292140】办理英国皇家艺术学院毕业证(RCA毕业证书)【q微1954292140】专业定制国外文凭学历证书皇家艺术学院offer/学位证国外文凭办理、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作。帮你解决皇家艺术学院学历学位认证难题。主营项目： 1、真实教育部国外学历学位认证《英国毕业文凭证书快速办理皇家艺术学院成绩单英文版》【q微1954292140】《论文没过皇家艺术学院正式成绩单》，教育部存档，教育部留服网站100%可查. 2、办理RCA毕业证，改成绩单《RCA毕业证明办理皇家艺术学院国外文凭办理》【Q/WeChat：1954292140】Buy Royal College of Art Certificates《正式成绩单论文没过》，皇家艺术学院Offer、在读证明、学生卡、信封、证明信等全套材料，从防伪到印刷，从水印到钢印烫金，高精仿度跟学校原版100%相同. 3、真实使馆认证（即留学人员回国证明），使馆存档可通过大使馆查询确认. 4、留信网认证，国家专业人才认证中心颁发入库证书，留信网存档可查. 《皇家艺术学院快速办理毕业证书英国毕业证书办理RCA办学历认证》【q微1954292140】学位证1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。高仿真还原英国文凭证书和外壳，定制英国皇家艺术学院成绩单和信封。办理学历认证RCA毕业证【q微1954292140】办理英国皇家艺术学院毕业证(RCA毕业证书)【q微1954292140】安全可靠的皇家艺术学院offer/学位证毕业证书不见了怎么办、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作。帮你解决皇家艺术学院学历学位认证难题。皇家艺术学院offer/学位证、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作【q微1954292140】Buy Royal College of Art Diploma购买美国毕业证，购买英国毕业证，购买澳洲毕业证，购买加拿大毕业证，以及德国毕业证，购买法国毕业证（q微1954292140）购买荷兰毕业证、购买瑞士毕业证、购买日本毕业证、购买韩国毕业证、购买新西兰毕业证、购买新加坡毕业证、购买西班牙毕业证、购买马来西亚毕业证等。包括了本科毕业证，硕士毕业证。

AG-FIRMA Ai Agent for Agriculture | RAG ..Anass Nabil

CompTIA-Security-Study-Guide-with-over-500-Practice-Test-Questions-Exam-SY0-7...emestica1

ProjectArtificial Intelligence Good or Evil.pptxOlenaKotovska

34 Mobile Payment (Thomas Lerner (auth.).pdfNguyễn Minh

23 Introduction to E-Commerce ( PDFDrive ) (1).pdfNguyễn Minh

34 E-commerce - business, technology and society (2022).pdfNguyễn Minh

IoT PPT introduction to internet of thingsVaishnaviPatil3995

Biochemistry and Biomolecules - Science - 9th Grade _ by Slidesgo.pptxSergioBarreno2

APNIC Policy Update and Participation, presented at TWNIC 43rd IP Open Policy...APNIC

Presentation Mehdi Monitorama 2022 Cancer and Monitoringmdaoudi

美国文凭明尼苏达大学莫里斯分校毕业证范本UMM学位证书Taqyea

保密服务明尼苏达大学莫里斯分校英文毕业证书影本美国成绩单明尼苏达大学莫里斯分校文凭【q微1954292140】办理明尼苏达大学莫里斯分校学位证(UMM毕业证书)原版高仿成绩单【q微1954292140】帮您解决在美国明尼苏达大学莫里斯分校未毕业难题（University of Minnesota, Morris）文凭购买、毕业证购买、大学文凭购买、大学毕业证购买、买文凭、日韩文凭、英国大学文凭、美国大学文凭、澳洲大学文凭、加拿大大学文凭（q微1954292140）新加坡大学文凭、新西兰大学文凭、爱尔兰文凭、西班牙文凭、德国文凭、教育部认证，买毕业证，毕业证购买，买大学文凭，购买日韩毕业证、英国大学毕业证、美国大学毕业证、澳洲大学毕业证、加拿大大学毕业证（q微1954292140）新加坡大学毕业证、新西兰大学毕业证、爱尔兰毕业证、西班牙毕业证、德国毕业证，回国证明，留信网认证，留信认证办理，学历认证。从而完成就业。明尼苏达大学莫里斯分校毕业证办理，明尼苏达大学莫里斯分校文凭办理，明尼苏达大学莫里斯分校成绩单办理和真实留信认证、留服认证、明尼苏达大学莫里斯分校学历认证。学院文凭定制，明尼苏达大学莫里斯分校原版文凭补办，扫描件文凭定做，100%文凭复刻。特殊原因导致无法毕业，也可以联系我们帮您办理相关材料：１：在明尼苏达大学莫里斯分校挂科了，不想读了，成绩不理想怎么办？？？ 2：打算回国了，找工作的时候，需要提供认证《UMM成绩单购买办理明尼苏达大学莫里斯分校毕业证书范本》【Q/WeChat：1954292140】Buy University of Minnesota, Morris Diploma《正式成绩单论文没过》有文凭却得不到认证。又该怎么办？？？美国毕业证购买，美国文凭购买，【q微1954292140】美国文凭购买，美国文凭定制，美国文凭补办。专业在线定制美国大学文凭，定做美国本科文凭，【q微1954292140】复制美国University of Minnesota, Morris completion letter。在线快速补办美国本科毕业证、硕士文凭证书，购买美国学位证、明尼苏达大学莫里斯分校Offer，美国大学文凭在线购买。美国文凭明尼苏达大学莫里斯分校成绩单，UMM毕业证【q微1954292140】办理美国明尼苏达大学莫里斯分校毕业证(UMM毕业证书)【q微1954292140】成绩单COPY明尼苏达大学莫里斯分校offer/学位证国外文凭办理、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作。帮你解决明尼苏达大学莫里斯分校学历学位认证难题。主营项目： 1、真实教育部国外学历学位认证《美国毕业文凭证书快速办理明尼苏达大学莫里斯分校修改成绩单分数电子版》【q微1954292140】《论文没过明尼苏达大学莫里斯分校正式成绩单》，教育部存档，教育部留服网站100%可查. 2、办理UMM毕业证，改成绩单《UMM毕业证明办理明尼苏达大学莫里斯分校毕业证样本》【Q/WeChat：1954292140】Buy University of Minnesota, Morris Certificates《正式成绩单论文没过》，明尼苏达大学莫里斯分校Offer、在读证明、学生卡、信封、证明信等全套材料，从防伪到印刷，从水印到钢印烫金，高精仿度跟学校原版100%相同. 3、真实使馆认证（即留学人员回国证明），使馆存档可通过大使馆查询确认. 4、留信网认证，国家专业人才认证中心颁发入库证书，留信网存档可查. 《明尼苏达大学莫里斯分校国外学历认证美国毕业证书办理UMM100%文凭复刻》【q微1954292140】学位证1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。高仿真还原美国文凭证书和外壳，定制美国明尼苏达大学莫里斯分校成绩单和信封。成绩单办理UMM毕业证【q微1954292140】办理美国明尼苏达大学莫里斯分校毕业证(UMM毕业证书)【q微1954292140】做一个在线本科文凭明尼苏达大学莫里斯分校offer/学位证研究生文凭、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作。帮你解决明尼苏达大学莫里斯分校学历学位认证难题。明尼苏达大学莫里斯分校offer/学位证、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作【q微1954292140】Buy University of Minnesota, Morris Diploma购买美国毕业证，购买英国毕业证，购买澳洲毕业证，购买加拿大毕业证，以及德国毕业证，购买法国毕业证（q微1954292140）购买荷兰毕业证、购买瑞士毕业证、购买日本毕业证、购买韩国毕业证、购买新西兰毕业证、购买新加坡毕业证、购买西班牙毕业证、购买马来西亚毕业证等。包括了本科毕业证，硕士毕业证。

GiacomoVacca - WebRTC - troubleshooting media negotiation.pdfGiacomo Vacca

Presented at Kamailio World 2025. Establishing WebRTC sessions reliably and quickly, and maintaining good media quality throughout a session, are ongoing challenges for service providers. This presentation dives into the details of session negotiation and media setup, with a focus on troubleshooting techniques and diagnostic tools. Special attention will be given to scenarios involving FreeSWITCH as the media server and Kamailio as the signalling proxy, highlighting common pitfalls and practical solutions drawn from real-world deployments.

Breaking Down the Latest Spectrum Internet Plans.pdfInternet Bundle Now

34 Turban Electronic Commerce 2018_ A Managerial and Social Networks Perspect...Nguyễn Minh

The Hidden Risks of Hiring Hackers to Change Grades: An Awareness Guiderussellpeter1995

34 Global Mobile Commerce_ Strategies, Implementation and Case Studies (Premi...Nguyễn Minh

34 E-commerce and M-commerce technologies (P. Candace Deans 2006).pdfNguyễn Minh

Internet Coordination Policy 2 (ICP-2) ReviewAPNIC

34 Mobile Electronic Commerce_ Foundations, Development, and Applications (20...Nguyễn Minh

学生卡英国RCA毕业证皇家艺术学院电子毕业证学历证书Taqyea

AG-FIRMA Ai Agent for Agriculture | RAG ..Anass Nabil

CompTIA-Security-Study-Guide-with-over-500-Practice-Test-Questions-Exam-SY0-7...emestica1

ProjectArtificial Intelligence Good or Evil.pptxOlenaKotovska

34 Mobile Payment (Thomas Lerner (auth.).pdfNguyễn Minh

23 Introduction to E-Commerce ( PDFDrive ) (1).pdfNguyễn Minh

34 E-commerce - business, technology and society (2022).pdfNguyễn Minh

IoT PPT introduction to internet of thingsVaishnaviPatil3995

Biochemistry and Biomolecules - Science - 9th Grade _ by Slidesgo.pptxSergioBarreno2

APNIC Policy Update and Participation, presented at TWNIC 43rd IP Open Policy...APNIC

Presentation Mehdi Monitorama 2022 Cancer and Monitoringmdaoudi

美国文凭明尼苏达大学莫里斯分校毕业证范本UMM学位证书Taqyea

GiacomoVacca - WebRTC - troubleshooting media negotiation.pdfGiacomo Vacca

Breaking Down the Latest Spectrum Internet Plans.pdfInternet Bundle Now

34 Turban Electronic Commerce 2018_ A Managerial and Social Networks Perspect...Nguyễn Minh

The Hidden Risks of Hiring Hackers to Change Grades: An Awareness Guiderussellpeter1995

34 Global Mobile Commerce_ Strategies, Implementation and Case Studies (Premi...Nguyễn Minh

34 E-commerce and M-commerce technologies (P. Candace Deans 2006).pdfNguyễn Minh

16- Learn CSS Fundamentals / Background

1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Background

2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com background-image background-color X Y background-position background-repeat background-attachment

3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com IMAGE REPEATCOLOR POSITIONATTACHMENT

4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-COLOR div { width: 550px; height: 550px; background-color: #72B63C; } Enter any color format

5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com IMAGE REPEATCOLOR POSITIONATTACHMENT

6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com background-image url(image) linear-gradient radial-gradient

7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); }

8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com background-image url(image) linear-gradient radial-gradient

9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: linear-gradient(blue, yellow); } LINEAR GRADIENT / VERTICAL READY TO USE CODE

10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: linear-gradient(to right, blue , yellow); } LINEAR GRADIENT / HORIZONTAL READY TO USE CODE

11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: linear-gradient(to bottom right, blue, yellow); } LINEAR GRADIENT / DIAGONAL READY TO USE CODE

12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: linear-gradient(-90deg, blue, yellow); } LINEAR GRADIENT / USING ANGLES 180° -180° 0° 360° 270° -90° 90° -270° READY TO USE CODE

13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: linear-gradient(blue, yellow, green); } LINEAR GRADIENT / MULTIPLE COLOR STOPS READY TO USE CODE

14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: repeating-linear-gradient(180deg, blue, yellow 33%); } LINEAR GRADIENT / REPEATING READY TO USE CODE 33% 33% 33%

15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com background-image url(image) linear-gradient radial-gradient

16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE 0% Gradient ray 100% Ending shape

17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: radial-gradient(blue, yellow); } RADIAL GRADIENT / NORMAL READY TO USE CODE

18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: radial-gradient(circle at top right, blue, yellow); } RADIAL GRADIENT / POSITION READY TO USE CODE

19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-IMAGE div { width: 550px; height: 550px; background-image: radial-gradient(blue 0%, yellow 20%, green 60%); } RADIAL GRADIENT / MULTIPLE COLOR STOPS READY TO USE CODE

20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com IMAGE REPEATCOLOR POSITIONATTACHMENT

21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-REPEAT div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: ; } repeat-x repeat-y repeat no-repeat

22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-REPEAT div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: ; } repeat-x repeat-y repeat no-repeat

23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-REPEAT div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: ; } repeat-x repeat-y repeat no-repeat

24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-REPEAT div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: ; } repeat-x repeat-y repeat no-repeat

25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com IMAGE REPEATCOLOR POSITIONATTACHMENT

26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-ATTACHMENT div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: no-repeat; background-attachment: ; } scroll fixed Scrolls with the page.

27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-ATTACHMENT div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: no-repeat; background-attachment: ; } scroll fixed Does not scroll with the page.

28. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com IMAGE REPEATCOLOR POSITIONATTACHMENT

29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-POSITION div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: 100px 20px; } X Y

30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-POSITION div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 50%; } X Y

31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND-POSITION div { width: 550px; height: 550px; background-color: #72B63C; background-image: url("tree.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: ; } X top left bottom right Y

32. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com IMAGE REPEATCOLOR POSITIONATTACHMENT

33. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com BACKGROUND SHORTHAND div { background: color image repetition attachment position } background: #0f0 url("tree.png") no-repeat fixed right top EXAMPLE

34. in a ROCKET TOOLS ~ ~ ~

35. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: CHROME DEVELOPER TOOLS Contrast information

36. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: CHROME DEVELOPER TOOLS Meets the minimum recommended contrast ratio (AA). Meets the enhanced recommended contrast ratio (AAA).

37. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: GRADIENT MAGIC

38. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: WEBGRADIENTS

39. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES

40. We respect your time  No more blah blah videos. Just straight to the point slides with relevant information. Ready to use code  Real code you can just copy and paste into your real projects. Step by step guides  Clear and concise steps to build real use solutions. No missed points. Learn front-end development at rocket speed inarocket.com

41. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Background

16- Learn CSS Fundamentals / Background

Recommended

More Related Content

Similar to 16- Learn CSS Fundamentals / Background (20)

More from In a Rocket (15)

Recently uploaded (20)

16- Learn CSS Fundamentals / Background