learn css3 for beginners at rocket speed

CSSat rocket speed

inarocket.com

FOR BEGINNERS

Learn front-end development at rocket speed

inarocket.com

http://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

HTML

content + styles

HTML

content + styles

HTML

content + styles

HTML

content + styles

HTML

content + styles

HTML

content + styles

HTML

content + styles

HTML

Client

You

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

CSS

content

HTML

content

HTML

content

HTML

content

HTML

Client

You

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

img

css

js

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

img

css

js

page1.html

HTML

page2.html

HTML

style.css

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

Value

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

Value

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