CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for

CSSPatrick Behr

CSS

• HTML = content

• CSS = display

• It’s important to keep them separated• Less code in your HTML

• Easy maintenance

• Allows for different mediums• Desktop

• Mobile

• Print

• Braille

Zen Garden

• CSS Zen Garden

http://www.csszengarden.com/

Styles in HTML

• Browser• Browser wars

Styles in HTML


• HTML elements• <FONT>

• <CENTER>

• <MARQUEE>

• <BLINK>

Styles in HTML


• HTML elements• <FONT>

• <CENTER>

• <MARQUEE>

• <BLINK>

• CSS• CSS1=1996, CSS2=1998, CSS3=Ongoing

• Style attribute•

CSS in HTML


• Style element (inline style sheet)

•

CSS in HTML


• Style element (inline style sheet)

•

• External Style Sheets •

CSS in HTML

Cascading

• Allows multiple styles

Cascading


• Precedence• Browser

Cascading



• Order

H1 {color : yellow;}

H1 {color : red;}

H1 {color : blue;}



• Order

• Specificity• Type selector

Cascading

body {color : yellow;}

div {color : red;}

p {color : blue;}

Cascading



• Order


• Class selector

p {color : lightblue;}

.dark {color : darkblue;}

Cascading



• Order


• Class selector

• ID selector

p {color : lightblue;}

.dark {color : darkblue;}

#first {color : red;}

Cascading



• Order


• Class selector

• ID selector

• Inline

h1 {color : blue;}

Cascading



• Order


• Class selector

• ID selector

• Inline

• !important

h1 {color : blue !important}

Rules

• Made up of • Selector

• Declaration• Property

• Value

h1 { color: yellow; }

Rules



• Value


Rules



• Value


Rules



• Value


Rules



• Value


Selectors

• Type selector h1 {color: blue}

Selectors

• Type selector

• Class selector

h1 {color: blue}

.required {border: solid red}

Selectors

• Type selector

• Class selector

• ID selector

h1 {color: blue}


#error {color: red}

Selectors

• Type selector

• Class selector

• ID selector

• Grouping

h1 {color: blue}


#error {color: red}

h1, h2, h3 {color: blue}

Selectors

• Type selector

• Class selector

• ID selector

• Grouping

• Descendant

h1 {color: blue}


#error {color: red}


ul li a {text-decoration:none}

Selectors

• Type selector

• Class selector

• ID selector

• Grouping

• Descendant

• Child

h1 {color: blue}


#error {color: red}


header > h1 {color: blue}

article > h1 {color: blue}


Selectors

• Type selector

• Class selector

• ID selector

• Grouping

• Descendant

• Child

• Adjacent

h1 {color: blue}


#error {color: red}


header > h1 {color: blue}

article > h1 {color: blue}


h1 + p {color: blue}

Selectors

• Grouping article, aside, details,

figcaption, figure, footer,

header, hgroup, menu, nav,

section {display : block}

Selectors

• Descendant div {color : green;}

p {color : blue;}

div p {color : orange;}

Selectors

• Combinations p {color : blue;}

.bright {color : yellow;}

div.bright {color : red;}

Selectors

• Combinations article > h1 + p {

color : blue;

}

Menu

• Unordered List

• List Items

• Anchors

Menu

• Remove underlines ul li a {

text-decoration : none;

}

Menu

• Remove the bullets ul li {

list-style-type : none;

}

Menu

• List horizontally ul li {


display : inline;

}

Menu

• Add a border ul li {


display : inline;

border : 1px solid black;

}

Menu

• Add a little padding ul li {


display : inline;


padding : 2px;

}

Menu

• Mouse over/Hover ul li:hover {

background-color : lightgray;

}

Declarations

• General• height (min & max) specifies the height of an element

• width (min & max) specifies the width of an element

• padding padding between content & border

• margin sets the margin between elements

• position alternative element positioning

Declarations

• Background• background-color sets a background color

• background-image adds a background image

• background-attachment determines the image position

• background-repeat determines if images are repeated

Declarations

• Border• border-width sets the width of the border

• border-style sets the line style of the border

• border-color sets the line color of the border

Declarations

• Font• color sets the foreground color

• font-family sets the font type

• font-size sets the size of the font

• font-style applies italics or oblique

• font-weight sets the boldness of the font

• line-height sets the minimum height of line

• text-align text alignment within an element

Declarations

• font-family

font-family: Cambria, Times, "Times New Roman", serif;

font-family: Calibri, Tahoma, Helvetica, Arial, sans-serif;

font-family: Consolas, "Courier New", Courier, monospace;

Media Query

• Apply specific presentation for specific output devices

• Same content

• Different CSS for desktop, mobile, print• Fluid/Responsive design

Media Query

• Media type• all | print | screen | speech

• Media features• width

• height

• hover

Media Type

• Set font for print

• Set font for screen

@media print {

body {font-size : 10pt}

}

@media screen {


}

Media features

• Screen <= 600px

• Screen >= 600px

@media (max-width:600px) {


}

@media (min-width:600px) {


}

Media features

• Menu ul li {



padding : 2px;

}

@media (min-width:250px) {

ul li {display : inline;}

}

Media features

• Menu

Media features

• Menu

Box Model

• Each element is represented as a box

• The box model describes the space taken by the element

• 4 edges• Content

• Padding

• Border

• Margin

Box Model

Margin

Border

Padding

Content

Box Model

Box Model

span {


}

Box Model

span {

margin : 10px;

}

Box Model

span {

padding : 10px;

}

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float

Float – 2 column layout




Flexbox

• Layouts used floats and positioning

• Things that were a real pain:• Vertically centering content inside its parent

• Making elements use equal amount of the available width/height

• Making all columns the same height if they contain a different amount of content

• Flexbox fixes that

Flexbox

Aligns and evenly spaces items inside a container

Container

Item Item Item Item

Flexbox

Container

Item Item Item Item

container { flex-direction: row }

Flexbox

container { flex-direction: row-reverse }

Container

Item Item Item Item

Flexbox

Container

Item

Item

container { flex-direction: column }

Item

Item

Flexbox

Container

Item

Item

container { flex-direction: column-reverse }

Item

Item

Flexbox

Container

Item Item Item Item

container { flex-wrap: wrap }

Item Item Item Item

Grids

• A grid breaks the page up into rows and columns

• Native CSS grids are on the way!

• 3rd party grid systems (search “CSS Grid framework”)• Bootstrap

• Flexbox Grid

• Skeleton

Grids

A container element represents the entire grid (.container)

Grids

A parent element represents each row (.row)

Grids

Apply classes to elements to determine how many columns wide

.col-3 .col-2.col-7

Grids


.col-3 .col-2.col-7

Grids


.col-6

.col-3 .col-2.col-7

.col-3 .col-3

Grids


.col-3 .col-2.col-7

.col-6.col-3 .col-3

Grids


.col-6

.col-3 .col-2.col-7

.col-3 .col-3

.col-4.col-8

Pre-processors

• Adds functionality to CSS

• Variables

• Nesting

• Mixins

• Pre-processors:• SASS - written in Ruby

• LESS – written in JavaScript

• Others

Pre-processors

• Variables

$font-stack: Arial, Helvetica, sans-serif;

$main-color: #cc4123;

body {

color: $main-color;

font : $font-stack;

}

Pre-processors

• Nesting

nav {

border: 1px solid black;

}

nav ul {

list-style: none;

}

nav ul a {

text-decoration: none;

}

Pre-processors

• Nesting

nav {

border: 1px solid black;

ul {

list-style: none;

a {

text-decoration: none;

}

{

}

Avoid Spaghetti Code

• SMACCS – Scalable and Modular Architecture for CSS• Base, Layout, Module, State, Theme

• https://smacss.com/

• BEM – Block, Element, Modifier• menu, menu item, a disable menu item

• http://getbem.com/

• OOCSS – Object Oriented CSS• https://github.com/stubbornella

https://smacss.com/

http://getbem.com/

https://github.com/stubbornella

Documents

CSS - OCEAN User Group of Southern California · •Add a border ul li {list-style-type : none; display : inline; border : 1px ... •SMACCS –Scalable and Modular Architecture for