CSS first steps

•

1 gostou•460 visualizações

Guilherme

Tecnologia

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

Mais conteúdo relacionado

Semelhante 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

Semelhante 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

Mais 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

Mais 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

"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

unit 4 immunoblotting technique complete.pptxBkGupta21

TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc

SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3

"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays

What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina

Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan

Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3

The State of Passkeys with FIDO Alliance.pptxLoriGlavin3

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

"ML in Production",Oleksandr BaganFwdays

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521

How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe

Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm

The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech

Commit 2024 - Secret Management made easyAlfredo García Lavilla

Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation

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

Mais conteúdo relacionado

Semelhante a CSS first steps

Semelhante a CSS first steps (18)

Mais de Guilherme

Mais de Guilherme (19)

Último

Último (20)

CSS first steps