AJ Zane
I focus on WP, Sass, Angular, & beer. Organize a FrontEnd Web Dev meetup. Hiding in the San Diego of this timeline from interdimensional robot olms
Web Basics : CSS
HTML PROVIDES
CONTENT HIERARCHY
TO DOCUMENTS AND
LINKS PAGES TO EACH OTHER
IS: Utilitarian
NOT: PRESENTATIONAL
since 1996
The Design is bound to the html
HTML CRUFT
Same markup, different presentation
csszengarden.com
All heading 1 elements should be bold.
Therefore, no formatting markup such as bold tags (<b></b>) is needed within the content;
what is needed is simply semantic markup saying,
this text is a level 1 heading.
“
1996 vs 2014
cascading STYLE sheets
Just two concepts:
PROPERTIES
color
The text color will change
cascading STYLE sheets
Just two concepts:
PROPERTIES & ATTRIBUTES
color: green;
The text color will be green
cascading STYLE sheets
Each property expects specific attributes
color
green
red
#ff0000
salmon
border-width
10px
5rem
font-family
comic-sans
lobster
times new roman
height
10px
5rem
15%
cascading STYLE sheets
Certain properties let you declare multiple attributes at the same time
border-style: solid; border-width: 1px; border-color: black;
border: solid 1px black;
INLINE STYLING
Styles can be applied directly to elements
<p>Hello Fullstack</p>
<p style=" ">Hello Fullstack</p>
<p style="color:green; border: solid 1px black;">Hello Fullstack</p>
Inline styles are still crufty
cascading style SHEETS
CSS is best used when it's out of the way
<element> <p>Hello FullStack</p>
#id <p id="fullstack">Hello FullStack</p>
.class <p class="meetup">Hello FullStack</p>
p { color: green; }
#fullstack { color: green; }
.meetup { color: green; }
cascading style SHEETS
.meetup {
color: green;
border: solid 1px black;
}
Formatting
.meetup { color:green; border:solid 1px black; }
Hard to read:
Easy to read:
Keep it simple
- Elements == EVERYTHING
- IDs == Highlander Rule (There can be only 1)
- Classes == :)
use classes
WHERE
<Style> is not
maintainable
<link>
CASCADING style sheets
Attributes defined later override previous attributes
Browser support for CSS properties
Plain english overview of each property
RESOURCES et cetera
slides.com/azanebrain/fullstack-css
AJ Zane | @azanebrain
News and tips to get your CSS working how you want it
Techniques to target specific elements
Different strategies for organizing your projects
A preprocessor that lets you add programatic logic to CSS
Normalize the base CSS across all browsers
—— LABS ——
Fork this pen and work on the excersizes
Web Basics : CSS
Web Basics : CSS
FullStack Labs: CSS
By AJ Zane
FullStack Labs: CSS
CSS Presentation for part two of the Full Stack Labs "Web Basics" curriculum | fullstacktalks.com | @fullstacktalks
- 2,342