html & css masterclass
DESCRIPTION
Masterclass about HTML and CSS, including the new HTML5 structure elements. Great for beginners.TRANSCRIPT
<HTML>
Masterclass
<.CSS>
21 November
What’s HTML and CSS?
<HTML> Content
<.CSS> Style
HTMLIt’s all about the tags
Element
Element
Attribute
Element
Attribute
Content
HTMLAn example
Structure firstWhat’s inside an HTML document?
<HTML>The container
<HEAD>The setup
<BODY>The content
Writing the content
Block or Inline
Block
Inline
BlockCreate a new line and occupy full width
InlineKeep the flow of the document
Usually work in pairs
Most Important ElementsYou’ll use these 90% of the time
<DIV>The all-mighty block element
<SPAN>The inline <div>
<P>Paragraph is for text
<H1>Headings from H1 to H6
<A>Link to other pages or sections
But use them wisely
HTML is semantic
Tags have meanings
Don’t suffer from divitis
Start with the structure
Hello HTML5!
<HEADER>Header for a document or section
<NAV>The new navigation menu
<SECTION>The new <div>
<ARTICLE>Blog posts, news stories, comments
<ASIDE>Related, but not really important content
<FOOTER>Footer for a document or section
A real example
<header>
<nav>
<section>
<article>
<footer>
HTML resources
Let’s start styling!
Add the CSS to the page
SelectorsSelect element to style
Tag
Class
ID
Tag Class
ID
You can be very specific
Be careful with the space
PropertiesWhat do you want to change?
ValuesDetermine the behaviour of the property
Browsers have custom styling
And custom properties
The box-model
CSS can change everything
CSS3 is awesome
But Keep It Simple!
You don’t even need to work
There are tons of CSS frameworks
Keep learning
Questions?
