learn css3 for beginners at rocket speed

CSSat rocket speed

inarocket.com

FOR BEGINNERS

Learn front-end development at rocket speed

inarocket.com

inarocket.com - Learn CSS at rocket speed

WHAT DO YOU NEED TO START

COMPLETED

What is CSS

WHAT IS CSS

C S SCascading Style Sheets

What means “cascading”? Don’t worry. We will learn about it later.

WHAT IS CSS

+HTMLContent structure

JAVASCRIPTContent behavior

CSSContent presentation +

Why use CSS

WHY USE CSS

A few years ago: every HTML file had a mix of content + styles. Problem: to update any style in a web site, you had to modify all the HTML files.

website

content + styles

Client

I don’t like my website’s headers in black. Could you please change them to blue?

Noooooooooooooooooooooooooo!!!!!!!!!! It will take me hours…

WHY USE CSS

Present day: HTML files only have content and are linked to independent CSS files (styles). Solution: to update any style in a web site, you only have to modify your CSS.

website

styles

content

Client

I don’t like my website’s headers in black. Could you please change them to blue?

Sure! Done in a minute.

What do you need

WHAT DO YOU NEED TO START

+EDITORe.g. Notepad

BROWSERe.g. Firefox

FOLDERSProject structure +

WHAT DO YOU NEED TO START: FOLDERSCreate the folders that will contain the web project on your computer. !

projectname: • img (will contain images) • css (will contain stylesheets) • js (will contain JavaScripts)

projectname

Here are the HTML files that you created in the previous course.

Important rules for naming folders and files. • Never use spaces. • Never use special characters (%, *, +, etc.). • Avoid uppercases.

WHAT DO YOU NEED TO START: EDITOR

Editor: pre-installed

You can just use any text editor preinstalled in your computer.

Notepad TextEdit Gedit

Editor: additional

There are other editors but you won't need their advanced features for this course.

Sublime Text Atom

WHAT DO YOU NEED TO START: BROWSER

Browser: pre-installed

You can just use any preinstalled browser in your computer.

Explorer Safari Firefox

Browser: additional

There are other browsers that you can also install in your computer.

Chrome Firefox Opera

Quick start

QUICK STARTLet’s get started with: • two HTML files linked to • a CSS file.

projectname

style.css

QUICK START: HTML FILES

<!doctype html> <html> <head> <title>Page One</title> <link rel=“stylesheet” href=“css/style.css”> </head> <body> <h1>This is page 1</h1> <p>Here goes a paragraph</p> </body> </html>

Editor (what you should write)

Save as page1.html

<!doctype html> <html> <head> <title>Page Two</title> <link rel=“stylesheet” href=“css/style.css”> </head> <body> <h1>This is page 2</h1> <p>Here goes a paragraph</p> </body> </html>

Save as page2.html

QUICK START: CSS SYNTAX

p {color: blue}Property

Selector Declaration

With this code all paragraphs are shown in blue

QUICK START: CSS FILE

p {color: blue}

Save as style.css

Browser

This is page 1 Here goes a paragraph

(what you should view)

Open page1.html in your browser(in your css folder)

Selectors

WHAT IS A CSS SELECTOR

p {color: blue}Property

Selector Declaration

With this code all paragraphs are shown in blue. Don’t worry about the declaration. We will learn how to use it later.

A CSS selector allows you to select the content you want to style.

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Element Specific Selector

General Sibling Selector

Adjacent Sibling Selector

Attribute Selector

Pseudo-class Selector

Dynamic Pseudo-class Selector

Structural Pseudo-class Selector

Nth-child Selector

Universal Selector

Element Selector

ELEMENT SELECTOR

With this code all paragraphs are shown in blue

A CSS element selector allows you to select and style a HTML element.

p {color: blue}

Syntax element {style properties}

ELEMENT SELECTOR

<p>Web design rocks!</p> <p>Hello world.</p>

HTML CSS

p {color: blue}

Browser

Web design rocks! Hello world.

SELECTOR TYPES

Element Selector

Descendent Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

Descendant Selector

DESCENDANT SELECTOR

All the paragraphs that are descendant of a div element are shown in blue

A CSS descendent selector allows you to select and style all elements that are descendants of a specified element.

div p {color: blue}

Syntax selector1 selector2 {style properties}

DESCENDANT SELECTOR

<div> <p>Web design rocks!</p> </div> <p>Hello world.</p>

HTML CSS

div p {color: blue}

Browser

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

Child Selector

CHILD SELECTOR

Only the strong elements that are direct descendants of a paragraph are shown in blue

A CSS child selector allows you to select and style only the elements that are direct descendants.

p>strong {color: blue}

Syntax selector1 > selector2 {style properties}

CHILD SELECTOR

<p><strong>Web design rocks!</strong></p> <p> <a href=“#”><strong>Hello world.</strong></a> </p>

HTML CSS

p>strong {color: blue}

Browser

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

Id Selector

ID SELECTOR

Only the element with the “nav” id is shown in blue

A CSS id selector allows you to select and style the element with the specified id.

#nav {color: blue}

Syntax #id_value {style properties}

ID SELECTOR

<p id=“nav”>Web design rocks!</p> <p>Hello world.</p>

HTML CSS

#nav {color: blue}

Browser

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

Class Selector

CLASS SELECTOR

Only the elements with the “ready” class are shown in blue

A CSS class selector allows you to select and style the elements with the specified class.

.ready {color: blue}

Syntax .classname {style properties}

CLASS SELECTOR

<div class=“ready”>Web design rocks!</div> <p class=“ready”>More content.</p> <p> <strong class=“ready”>Hello world.</strong> </p>

HTML CSS

.ready {color: blue}

Browser

Web design rocks! More content. Hello world.

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

ELEMENT SPECIFIC SELECTOR

Only the paragraphs with the “ready” class are shown in blue

A CSS element specific selector allows you to select and style only the elements associated with a specific class/id.

p.ready {color: blue}

Syntax element.classname {style properties}

ELEMENT SPECIFIC SELECTOR

<div class=“ready”>Web design rocks!</div> <p class=“ready”>Hello world.</p> <p> <strong class=“ready”>More content.</strong> </p>

HTML CSS

p.ready {color: blue}

Browser

Web design rocks! Hello world. More content.

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal SelectorGeneral Sibling Selector

GENERAL SIBLING SELECTOR

Only the paragraphs that are siblings of a h1 are shown in blue

A CSS general sibling selector allows you to select and style the elements that are siblings of a given element.

h1~p {color: blue}

Syntax element ~ element {style properties}

GENERAL SIBLING SELECTOR

<p>Web design rocks!</p> <h1>Hello world.</h1> <p>More content.</p> <p>More content.</p>

HTML CSS

h1~p {color: blue}

Browser

Web design rocks! Hello world. More content. More content.

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

ADJACENT SIBLING SELECTOR

Only the paragraphs that immediately follows a h1 are shown in blue.

A CSS adjacent sibling selector allows you to select and style the element that is an immediate sibling.

h1+p {color: blue}

Syntax former_element + target_element {style properties}

ADJACENT SIBLING SELECTOR

<p>Web design rocks!</p> <h1>Hello world.</h1> <p>More content.</p> <p>More content.</p>

HTML CSS

h1+p {color: blue}

Browser

Web design rocks! Hello world. More content. More content.

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

Attribute Selector

ATTRIBUTE SELECTORA CSS attribute selector allows you to select and style an element with a specific attribute or attribute value.

p[lang] {color: blue}

Syntax element[attr] {style properties}

Only the paragraphs with the lang attribute are shown in blue.

Web design rocks! More content. Contact About us

ATTRIBUTE SELECTOR

<p lang=“en”>Web design rocks!</p> <p>More content.</p> <a href=“#” target=“_blank”>Contact</a> <a href=“#”>About us</a>

HTML CSS

p[lang] {color: blue} a[target] {color: red}

Browser

The a element is shown in blue by default

ATTRIBUTE SELECTOR

<p lang=“en”>Web design rocks!</p> <p lang=“fr”>Bonjour!</p> <a href=“contact.html”>Contact</a> <a href=“#”>About us</a>

HTML CSS

p[lang=“en”] {color: blue} a[href=“contact.html”] {color: red}

Browser

Web design rocks! Bonjour! Contact About us The a element is shown in blue by default

ATTRIBUTE SELECTOR

<p lang=“en-‐gb en-‐us en-‐au en-‐nz”> Web design rocks!</p>

HTML CSS

p[lang~="en-‐us"] {color: blue}

Browser

Web design rocks!

ATTRIBUTE SELECTOR

<p lang=“en-‐gb”>Web design rocks!</p> <p lang=“en-‐us”>Hello world.</p> <p lang=“en-‐au”>More content.</p>

HTML CSS

p[lang|="en"] {color: blue}

Browser

Web design rocks! Hello world. More content.

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

PSEUDO-CLASS SELECTOR

Links are shown in blue when their state is hover (mouse over them)

A CSS pseudo-class selector allows you to select and style an element with a special state specified by a keyword.

a:hover {color: blue}

Syntax selector:pseudo-class {style properties}

PSEUDO-CLASS SELECTOR

<a href=“#”>Contact</a>

HTML CSS

a:hover {color: red}

Browser

Contact

The mouse is over a link but not clicking it

SELECTOR TYPES

Element Selector

Descendant Selector

Child Selector

Id Selector

Class Selector

Attribute Selector

Nth-child Selector

Universal Selector

NOTICE

Coming soon.

NOTICE

Sorry for the inconvenience.

This presentation is a work in progress.

Learn front-end development at rocket speed

inarocket.com

learn css3 for beginners at rocket speed

Engineering

css3 notes

rocket spanish beginners...

html5 n css3

css3 color

1 introduction to css3 -...

taller xhtml y css3 - css3

css3 layout

ninja101.yolasite.comninja101.yolasite.com/resources/beginners...

css3 selectors

css3 animations

rocket piano beginners v1.2

introduction to css3 - denise...

chapter 8: css3 and html5 - computer...

rocket piano - beginners v1.0

css3 surfantants

css3 fundamentals. css3 introduction css3 is the latest...

css3 shubelal

m.e. semester –ii me it.pdf · 2020-01-21 · css, css3...

presentation css3

css3 (dutch)