CSS first steps

•

1 recomendación•460 vistas

Guilherme

Tecnología

CSS first steps:

Agenda

Context
Syntax
Property: margin, padding, border
Property: background
Block-level elements
Line-level elements
Property: float
Property: clear
Property: position

Guilherme
Cavalcanti

CSS first steps:

The layers of client-side development

Guilherme
Cavalcanti

CSS first steps:

CSS Syntax

#selector {
property: value;
}
CSS Rule

Guilherme
Cavalcanti

CSS first steps:

Margin

margin: 10px;

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;

Guilherme
Cavalcanti

CSS first steps:

Padding

padding: 10px;

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;

Guilherme
Cavalcanti

CSS first steps:

Border

border-width: 1px;
border-color: red;
border-style: [dotted|dashed...];

border: [border-width | border-style | border-color ];

Guilherme
Cavalcanti

CSS first steps:

Block-level elements

Line wide elements
Can contain text, data, inline elements, or other block-
level elements
Begin new line of text

<div>, <p>, <ul>, <li>, <h#>, <form>,
<fieldset>, etc

Guilherme
Cavalcanti

CSS first steps:

Line-level elements

Only contain text, data or other inline elements. They are
usually "smaller" than block-level elements.
Does not begin new line

<span>, <em>, <strong>, etc

Guilherme
Cavalcanti

CSS first steps:

Float
Floated elements remain a part of the flow of the web
page.

float: left | right | none;

Guilherme
Cavalcanti

CSS first steps:

How will they float?

If the floated element does not have a pre-
defined width, it will take up as much
horizontal space as required and available,
regardless of the float.

Guilherme
Cavalcanti

CSS first steps:

How will they float?

If the container element is the HTML <body>,
the floated div will sit on the left margin of the
page.

Guilherme
Cavalcanti

CSS first steps:

How will they float?

If the container element is itself contained by
something else, the floated div will sit on the
left margin of the container.

Guilherme
Cavalcanti

CSS first steps:

How will they float?

Floated elements will sit next to each other if
there is room in the container.

Guilherme
Cavalcanti

CSS first steps:

References

Understanding Floats
Understanding CSS Float
All About Floats
MDC

Guilherme
Cavalcanti

Más contenido relacionado

Similar a CSS first steps

Making Your Own CSS FrameworkDan Sagisser

Understanding flex box CSS Day 2016Davide Di Pumpo

Css for nondesignersIgnacio Coloma

card flip slidesharepimp

CSS Walktrough Internship CourseZoltan Iszlai

CSS_Day_Three (W3schools)Rafi Haidari

Web Design Course: CSS lecture 4Gheyath M. Othman

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell

The Creative New World of CSSRachel Andrew

Web LayoutShawn Calvert

UI 101Rubikal

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle

Inline, Block and Positioning in CSSUC Berkeley Graduate School of Journalism

PreDevCampSF - CSS3 Tricksincidentist

Shaping Up With CSSsdireland

Static layouts with cssDan Phiffer

GOTO Berlin - You can use CSS for thatRachel Andrew

The Future State of LayoutStephen Hay

Similar a CSS first steps (18)

Making Your Own CSS Framework

Understanding flex box CSS Day 2016

Css for nondesigners

card flip

CSS Walktrough Internship Course

CSS_Day_Three (W3schools)

Web Design Course: CSS lecture 4

Girl Develop It Cincinnati: Intro to HTML/CSS Class 4

The Creative New World of CSS

Web Layout

UI 101

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}

Inline, Block and Positioning in CSS

PreDevCampSF - CSS3 Tricks

Shaping Up With CSS

Static layouts with css

GOTO Berlin - You can use CSS for that

The Future State of Layout

Más de Guilherme

Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu CódigoGuilherme

Descobrindo APIs RESTGuilherme

Redu walled gardenGuilherme

Desafio de crescerGuilherme

Consumindo APIs REST com RubyGuilherme

Aplicações tipo Canvas no Redu com RailsGuilherme

Aplicações sociais usando a plataforma ReduGuilherme

Introdução aos aplicativos tipo canvasGuilherme

Introdução a plataforma de aplicativos ReduGuilherme

Dojo: Sass - Syntactically Awesome StylesheetsGuilherme

How does the Web work?Guilherme

0 introducao padroes_webGuilherme

Plano de Pesquisa - Redu RespostasGuilherme

Desevolvimento Web Client-side - AJAX Guilherme

Desevolvimento Web Client-side - jQueryGuilherme

3 padroes-web-intro-javascriptGuilherme

Desevolvimento Web Client-side - CSSGuilherme

Desevolvimento Web Client-side - HTMLGuilherme

Roteamento de Perguntas em Redes SociaisGuilherme

Más de Guilherme (19)

Where Does the Fat Goes? Utilizando Form Objects Para Simplificar seu Código

Descobrindo APIs REST

Redu walled garden

Desafio de crescer

Consumindo APIs REST com Ruby

Aplicações tipo Canvas no Redu com Rails

Aplicações sociais usando a plataforma Redu

Introdução aos aplicativos tipo canvas

Introdução a plataforma de aplicativos Redu

Dojo: Sass - Syntactically Awesome Stylesheets

How does the Web work?

0 introducao padroes_web

Plano de Pesquisa - Redu Respostas

Desevolvimento Web Client-side - AJAX

Desevolvimento Web Client-side - jQuery

3 padroes-web-intro-javascript

Desevolvimento Web Client-side - CSS

Desevolvimento Web Client-side - HTML

Roteamento de Perguntas em Redes Sociais

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede

MINDCTI Revenue Release Quarter One 2024MIND CTI

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney

Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea

Ransomware_Q4_2023. The report. [EN].pdfOverkill Security

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays

FWD Group - Insurer Innovation Award 2024The Digital Insurer

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer

Apidays New York 2024 - The value of a flexible API Management solution for O...apidays

Why Teams call analytics are critical to your entire businesspanagenda

CSS first steps

1. Guilherme Cavalcanti @guiocavalcanti CSS: First steps

2. CSS first steps: Agenda Context Syntax Property: margin, padding, border Property: background Block-level elements Line-level elements Property: float Property: clear Property: position Guilherme Cavalcanti

3. CSS first steps: The layers of client-side development Guilherme Cavalcanti

4. CSS first steps: CSS Syntax #selector { property: value; } CSS Rule Guilherme Cavalcanti

5. CSS first steps: Margin margin: 10px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; Guilherme Cavalcanti

6. CSS first steps: Padding padding: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; Guilherme Cavalcanti

7. CSS first steps: Border border-width: 1px; border-color: red; border-style: [dotted|dashed...]; border: [border-width | border-style | border-color ]; Guilherme Cavalcanti

8. CSS first steps: Block-level elements Line wide elements Can contain text, data, inline elements, or other block- level elements Begin new line of text <div>, <p>, <ul>, <li>, <h#>, <form>, <fieldset>, etc Guilherme Cavalcanti

9. CSS first steps: Line-level elements Only contain text, data or other inline elements. They are usually "smaller" than block-level elements. Does not begin new line <span>, <em>, <strong>, etc Guilherme Cavalcanti

10. CSS first steps: Float Floated elements remain a part of the flow of the web page. float: left | right | none; Guilherme Cavalcanti

11. CSS first steps: How will they float? If the floated element does not have a pre- defined width, it will take up as much horizontal space as required and available, regardless of the float. Guilherme Cavalcanti

12. CSS first steps: How will they float? If the container element is the HTML <body>, the floated div will sit on the left margin of the page. Guilherme Cavalcanti

13. CSS first steps: How will they float? If the container element is itself contained by something else, the floated div will sit on the left margin of the container. Guilherme Cavalcanti

14. CSS first steps: How will they float? Floated elements will sit next to each other if there is room in the container. Guilherme Cavalcanti

15. CSS first steps: References Understanding Floats Understanding CSS Float All About Floats MDC Guilherme Cavalcanti

CSS first steps

Recomendados

Recomendados

Más contenido relacionado

Similar a CSS first steps

Similar a CSS first steps (18)

Más de Guilherme

Más de Guilherme (19)

Último

Último (20)

CSS first steps