Punch it Up with HTML and CSS

Punch it Up with HTML and CSS

• 1.
  Montreal Girl Geeks– HTML and CSS with Amanda Aitken of The Girl’s Guide to Web Design Fun and juicy notes! --- Who am I? - Amanda Aitken - Incurable entrepreneur - Founder/owner of Better Than Chocolate Web Design (http://betterthanchocolatewebdesign.com) - Founder/owner of The Girl’s Guide to Web Design (http://girlsguidetowebdesign.com) --- Why do I believe it’s so important for women to learn to code? o Lets you turn your dreams into a reality online o Saves you time, money and stress usually associated with working with a designer/programmer when you just wish you knew how to do it yourself o Kind of fun to be able to hold your own with the guys! --- Why are people so afraid of learning to code? o Seems shrouded in mystery o Looks like a foreign language o The perception is that you need to memorize all kinds of stuff or be “math nerdy” o Maybe you tried to learn before and got frustrated o Lack of resources (or awareness of resources) that teach you to code in a really accessible, FUN way --- How to get around the fear factor?
• 2.
  o Learn in a low-intimidation format with plenty of support from your teacher and others learning alongside you o Know that: Tinkering is the name of the game You really can’t “break” anything; the worst thing that will happen is that a) nothing will happen, or b) things will look weird, and you can put it back Almost everything is fixable There are multiple ways to do anything web design-related (no “right” way) Tons of free help resources available online --- - The fact is, anyone can learn to code (and many people can learn to design) - My promise to you: by the end of this talk, you will know how to code basic HTML and CSS and be empowered to spruce up your blog or site to make it match the gorgeous vision you have for it in your mind. --- Let’s get this party started! So...exactly what are HTML and CSS, anyway? - HTML: HyperText Markup Language - CSS: Cascading Style Sheets - HTML inserts elements like paragraphs, headings, and line breaks onto a page and labels them for what they are (i.e. “semantically”) - CSS controls the way these elements look with “style rules” --- HTML tags look like this (don’t worry about understanding these yet): <h1> <p> <em> <br > <img src="http://yoursite.com/yourimage.gif"> <ul> <a href="http://google.com"> --- CSS style rules look like this (don’t worry about understanding these yet):
• 3.
  h1 {font-size:300%;} p {width:200px;} h3 {color:#000000;} a {text-decoration:none;} img {margin-bottom:20px;} h1 {background-color:yellow;} p {padding-top:100px;} h2 {text-align:center;} h1 {height:10px;} --- As you can see, the HTML tags and the CSS style rules have something in common: <h1> h1 {font-size:300%;} <p> p {width:200px;} <h3> h3 {color:#000000;} <a href="http://google.com"> a {text-decoration:none;} <img img {margin-bottom:20px;} src="http://yoursite.com/yourimag ul {background- e.gif"> image:url('http://yoursite.com/yourfolder/yourim <ul> age.gif');} --- This is because the CSS style rules are used to style the HTML elements. HTML and CSS work in tandem to create non-standard design effects. You’re taking the standard HTML elements (which by default, look pretty boring) and using CSS style rules to dress them up and make them look cool. --- Here’s how a site will usually look with no CSS attached to it:
• 4.
  --- By using HTMLand CSS together, you can create a completely unique look for your blog, site, or shop. --- Ok...so HTML and CSS seem to be able to do some pretty powerful stuff. But in the context of my site, blog, or shop, where do the HTML and CSS hang out? o Your site, blog, or online shop is “made of” HTML. HTML makes up its structure, like bricks or beams in a building. o Meanwhile, CSS hangs out in a single specialized location, known as your “stylesheet”. Your stylesheet is a file (think of it as a piece of paper – and hence, a “sheet”) that contains all the style rules that apply to your site and make it look the way it does. o The stylesheet is stored somewhere on the web server of the company you host your blog, site or shop with. o The stylesheet is mentioned in the HTML of your site, so that your browser knows the two are linked. --- Where is your stylesheet? - Depends on the kind of blog, site or shop you have. - You may have direct access, or you may need to download it via FTP, make edits, and re-upload. - You may not have access at all.
• 5.
  - Find out where your stylesheet is by Googling it (i.e. “how to access the stylesheet for theme x” or “how to edit CSS on Typepad blogs”) --- What we know so far: HTML and CSS work together to create effects that differ from the standard (boring) way HTML elements are presented on a webpage. But how exactly do we write these HTML tags or CSS style rules? --- Intro to HTML tags - Every element on a webpage is defined by an HTML tag - HTML tags are always enclosed in pointy brackets --- - They look like this: <h1> <p> <em> <br> <img src="http://yoursite.com/yourimage.gif"> <ul> <a href="http://google.com"> --- Sometimes they have just a couple of letters inside them, and sometimes they refer to additional items, like the link tag or the image tag. For a complete list of up-to-date HTML tags, visit http://w3schools.com/tags/default.asp. --- How to figure out what an HTML tag means Think in terms of abbreviations. <h1> “heading level 1” <img src="http://yoursite.com/yourimage.gif"> “image source” ---
• 6.
  When assigning HTMLtags: - You usually need to ENCLOSE that content in the appropriate tags - That is to say, you need an opening tag and a closing tag. --- Here’s how it looks when you have both the opening and closing tags in place: <h1>Whatever you type here is a really big, important headline</h1> <h2> Whatever you type here is a relatively big, important headline</h2> <h3> Whatever you type here is a medium-sized headline</h3> <p> Whatever you type here is a paragraph</p> <em>Whatever you type here is going to be emphasized with italics</em> <a href="http://google.com">Whatever you type here is the text that the viewer clicks on to access the link</a> --- - Note that the closing tag has a slash after the initial pointy bracket. This is the only thing that makes it differ from the opening tag. Opening tags: <h1> <p> <em> Corresponding closing tags: </h1> </p> </em> --- A few exceptions: <br> <img src="http://yoursite.com/yourimage.gif"> These tags do not require closing tags because the HTML tag contains all the info the browser could need to know. --- So we’ve got the HTML tag structure down, and where know where to go to find a list of all available HTML tags...but where do we go to add new HTML to our sites (and why would we want to do that, anyway?) - If you have a blog, site or shop based on Tumblr, Typepad, WordPress, Wix, Blogger, Big Cartel, or Shopify (just to name a few), there is already a bunch of HTML in place on your blog or site. - Only exception: if you’re coding a website from scratch in HTML (not recommended)
• 7.
  --- A little later,I’ll show you how to see the HTML that’s already there in the background. More important to know right now: how to ADD HTML tags to your posts and pages. Most platforms give you access to edit pages and posts in HTML mode. You can usually enter HTML into other places, too – like in a Text widget that you place in a WordPress sidebar, for example. --- So why would you want to add HTML to your site, blog or shop? A few examples: o to add a big headline to a page o to insert an image in a post o to add links to other sites to your sidebar You can usually use plugins and built-in tools, but knowing how to write HTML = more flexibility, and the ability to then use CSS to make your site look awesome. --- How to enter HTML code on your site, in a nutshell: - Open the page or post you want to add HTML to - Make sure you’re in HTML or “code” mode - Type in the HTML - Save the page or post --- HTML elements look boring (black and white, Times New Roman font) by default, but if we add some CSS into the mix, we can: - Add a fun background image - Put fun dotted borders around it - And do other cool stuff to it ---
• 8.
  So now thatwe see what we can do to a standard HTML element with CSS, let’s dive right in to the juicy stuff! CSS lets you do two things to your site: - Style existing elements - Style new elements that you define --- First, let’s look at how to style existing elements on your site. Let’s say that you decide you want all the h1s on your site or blog to be pink. What you need to do is put some CSS code in your stylesheet to make this happen. This code is called a “style rule”, and in this case, it would look like this: h1 {color:pink;} --- Once the style rule is in your stylesheet, here’s what happens: - Site loads on the computer screen of your visitor - Browser checks the stylesheet for style rules - If it finds a style rule, it displays the h1 in the appropriate, dressed-up way --- To help get you familiar with the way CSS style rules look, here are a few that we’ll discuss: h1 {font-size:300%;} p {width:200px;} h3 {color:#000000;} a {text-decoration:none;} img {margin-bottom:20px;} h1 {background-color:yellow;} p {padding-top:100px;} h2 {text-align:center;} --- That’s pretty funky-looking. Can we talk about the anatomy of a CSS style rule? Yes, we can! Here’s how a style rule is structured:
• 9.
  element {property:value;} - The element is the thing that you’re assigning the CSS style rule to - The property is the aspect of that element that you want to control with the style rule. The property must be followed by a colon. - The value is what you want to do to that property of the element. This must be followed by a semicolon. - The whole thing is surrounded by curly brackets. --- So to look at our example again: element {property: value;} h1 {color:pink;} If we put this in our stylesheet, the browser knows to make all the occurrences of “h1” on our site pink. --- Similarly, we could: - Make all the paragraphs on our site pink p {color:pink;} - Make all the h3s on our site pink h3 {color:pink;} --- A word about colour - 147 official colour names: http://www.w3schools.com/html/html_colornames.asp - Hex codes for every other shade you can think of - COLOURlovers.com - Eyedropper tools: http://www.hongkiat.com/blog/eyedroppers-color-pickers-for-designers/ --- Ok – so we know colour is one CSS property we can target by writing style rules. But what other CSS properties do we have to work with? Tons of them! You can control things like height, border, background image, margins, padding, letter-spacing...you name it! Check out http://www.w3schools.com/css/css_reference.asp for a complete reference. --- When one style rule just isn’t enough - You can write multiple style rules for a single HTML element.
• 10.
  - Simply list them one after another (with a space between them) within your set of curly brackets. Like this: h1 {font-size:300%; color:green;} --- So now that we know how to style all the existing HTML elements of a particular type on your site using style rules, let’s look at how to style new elements that YOU define. - We know you can assign a CSS style rule to any HTML element. - But what if you want to control the look of only a specific occurrence of an element on your site? - In other words: what if you want only one paragraph in one of your posts to use blue text (instead of every paragraph in every post). --- - To handle scenarios like these, you assign a “class” to the HTML element you want to change. - Easy way to remember this: class = “extra classy” - Assigning a class to an HTML element involves 3 steps: 1. Decide what to name the class 2. Add a reference to the class name to your HTML code 3. Add a style rule that refers to the class name to your stylesheet Let’s look at how this works, exactly. --- Our example: - We want to change the look of a paragraph in a single blog post - We want to make the text pink, add a black background colour, and add some padding to the top of the paragraph --- Step 1: Decide what to name your class - Should be logical (e.g. “blueparagraph” or “reallybigtext”)
• 11.
  - Class names must start with a number, and can only include letters, numbers, underscores and dashes We decide to name the class “pinkandblack” --- Step 2: add a reference to the class name to your HTML code - The part in red is what you would add to the post or page that contains the paragraph whose appearance you want to modify: <p class="pinkandblack">Here’s the content in the paragraph you want to change the look of</p> --- Step 3: Add a style rule that refers to the class name to your stylesheet Here’s what we would add to our stylesheet: .pinkandblack {color:pink; padding-top:10px; background-color: black;} - Note that in the stylesheet, the class name is preceded by a period - Note that the class name you chose (pinkandblack) appears both in the HTML on the post/page and in the stylesheet. --- You can add a class to any HTML element. For example, you could assign the “pinkandblack” class to any other element on your site to give that element a pink font colour, upper padding, and a black background color, like this: <h1 class=”pinkandblack”>Here’s the content of the headline you want to change the look of</h1>. --- Ok...that makes sense. But I’m not sure I get what the big deal is about classes. - The person who designed and coded your site design, theme or template did so using a bunch of CSS classes. - Because your site or blog or shop will have lots of classes and IDs pre-coded into it by the theme’s original creator, in order to change the look of most of the stuff on your site, you need to be able to write style rules for those classes.
• 12.
  - This means you need a way to a) find out what those classes are and b) a way to manipulate them by changing or adding on to the style rules that the designer wrote for the classes that he or she put in there. Which brings us to... --- The magic of Firebug! - Firebug is an add-on for Firefox - You can download Firefox for free, and then get Firebug at http://getfirebug.com - Firebug lets you lift the curtain on the inner workings of your site - It shows you the HTML and CSS that are making your site “tick” - It lets you PREVIEW how changes to your CSS would look if you added them to your stylesheet, in real time. --- For instructions on how to use Firebug: - Check out my article on Design*Sponge: http://www.designsponge.com/2011/06/biz-ladies- understanding-css.html Now let’s talk about one of the most powerful techniques for creating unique layouts and designs on your blog or site. It all starts with an HTML tag known as... --- The <div> ! A <div>: - Is an area of space that you can fill with stuff - Comes in handy when you want to change the look of a chunk of content that contains a mix of text and images, because you can enclose that chunk with <div> and </div> tags, assign a class to the div, and then use CSS to change the look of it. --- For example, let’s say you have some text and an image that you want to group together, so to speak. Meaning that you want to do certain things to them as a duo. Here’s what the HTML looks like for the image and the text:
• 13.
  <img src=”http://yoursite.com/images/montrealgirlgeeks.gif”><br> This istext that appears under the image --- Now, you decide you want to: - Left indent both the text and the image by 100 pixels - Put a blue background colour behind both the text and the image - Put an orange border around both the text and the image The best way to do this is to wrap both the chunk of text and the image in a div, assign that div a class of “leftindentbluebg”, and then write a style rule for that class in your stylesheet. --- Let’s look at how we would make this happen. You would add the stuff in red below to your HTML: <div class="leftindentbluebg"> <img src="http://yoursite.com/images/montrealgirlgeeks.gif"><br> This is text that appears under the image </div> --- And here’s what you would put in your stylesheet: .leftindentbluebg {padding-left:100px; background-color:blue; border-style: solid;border- width:1px; border-color:orange;} The result is that both the text and the image are “treated to” all the CSS styles listed above, as a unit. Pretty cool, no? ☺ --- How it all comes together
• 14.
  - So you get yourself set up with a blog, site, or shop – but what process do you use to customize the look of it? - Let’s review the steps you’ll need to take to customize the look of your site with HTML and CSS and get it looking exactly the way you want it to. --- Three steps to change the look of something on your site: o 1. Decide what you want to change o 2. Identify the HTML tag or CSS class for the element you want to change, or assign a class to the element so that you can control the look of it individually with a style rule o 3. Write the CSS rule(s) to make the change in your stylesheet and save your stylesheet Let’s look at each step individually. --- Step 1: Decide what you want to change - This is the fun part. Decide what you want to do and write it down so that you’re clear on it. --- Step 2: Identify the HTML tag or class for the element you want to change, or assign a class to the element so that you can target it with a style rule - Use Firebug to select the element you want to change so that you can see the HTML tag and/or class associated with it in the bottom left pane and the style rule(s) associated with it in the bottom right pane. - If the element you want to change the appearance of doesn’t yet have a class associated with it, and you want to control it separately from the other elements on the site with the same HTML tag, you will need to assign a new class to the element by putting a reference to the class in the HTML for the page or post. Step 3: Write the CSS rule to make the change and add it to your stylesheet --- Ok...so that all makes sense. But what if the area on the page whose appearance you want to control is not associated with an HTML tag? - When this happens, the best thing to do is to wrap it in <div> tags and assign a class to that div.
• 15.
  - Remember: the <div> is your secret weapon for targeting areas on the page that aren’t already associated with an HTML tag – and for applying the same styles to multiple items (graphics, text, whatever) that occur in the same area of the page. --- Troubleshooting site customization Sometimes you’re working on a site, and the style rules you put in your stylesheet don’t seem to be working. When this happens, it’s usually one of three issues: - You left out a semicolon or put a funny character in there somewhere - You’re not targeting a specific enough class or ID - You have a different style rule lower down in your stylesheet that is overwriting the one you’re currently working on --- What’s next? - Using the techniques you’ve just learned, you have an excellent basis for customizing any site, blog, or shop that gives you access to the stylesheet. - But of course, there’s more to learn. There’s so much you can do with CSS, and this is only a starting point. - If you’re interested in learning more, you’ll want to learn more about CSS specificity, CSS IDs, divs, the CSS “box model”, floats, shorthand for CSS rules, and all kinds of other tricks, techniques, and standards. --- Final recommendations! - If having a site that you can create from the ground up and completely customize is important to you, I’d strongly suggest going for self-hosted WordPress and Thesis - Thesis actually *facilitates* customizations in some very powerful ways. - You get easy to access to your stylesheet. - Lets you create sites like the ones in my portfolio (http://betterthanchocolatewebdesign.com/portfolio-and-praise) --- - I teach all this (plus the graphic design you need!) in my online course, The Girl’s Guide to Web Design
• 16.
  - You can purchase the “Jetsetter” version of the course at any time at http://girlsguidetowebdesign.com/enroll/ - Hope you enjoyed and are now feeling empowered! Don’t forget to: o “Like” us on Facebook at http://facebook.com/girlsguidetowebdesign o Follow me on Twitter at http://twitter.com/amandaaitken. I’d love to stay in touch and see what you end up creating as a result of your new HTML and CSS skills!