{"id":1406,"date":"2016-10-25T16:59:36","date_gmt":"2016-10-25T23:59:36","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh101f16\/?page_id=1406"},"modified":"2016-10-25T18:20:39","modified_gmt":"2016-10-26T01:20:39","slug":"paint-that-page-with-css","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/dh101f16\/tutorials-guides\/web-publishing\/html-css\/paint-that-page-with-css\/","title":{"rendered":"Paint that page with CSS"},"content":{"rendered":"
\n

You\u2019ve used HTML to build your webpage, but it doesn\u2019t have a lot of style yet. Let\u2019s add some with CSS<\/strong>.<\/p>\n

CSS stands for cascading style sheet<\/strong>, a somewhat confusing name for a language that you use to format your page so that it looks just the way you want. CSS can get super-complicated, but the basic principles aren\u2019t hard to master.<\/p>\n<\/div>\n

\n

Link your HTML document to a CSS document<\/h3>\n
\"media_1445645339389.png\"<\/div>\n
\n

You can add CSS styles to your HTML document in a few different ways, but I like to keep all of my CSS rules in a separate document. Open a new text document in Sublime\u00a0and save it in the same place as your html document, with the name style.css<\/strong>.<\/p>\n

(You can call your stylesheet whatever you want, but\u00a0style<\/strong> is customary.)<\/p>\n

Now we have to tell the HTML document to look for the CSS document in order to receive information about styles. Luckily, that\u2019s not too hard. Inside the<head><\/strong> tags on your html document, type<\/p>\n

link rel=\"stylesheet\" href=\"style.css\"<\/code><\/p>\n

Now you should be linked!<\/p>\n<\/div>\n<\/div>\n

\n

How CSS styles work<\/h3>\n
\"media_1445645488785.png\"<\/div>\n
\n

The basic rule is that you specify the html tag you\u2019d like your rule to affect and then say what you want to do to the content inside the tag. Then all of the content inside of that tag will be affected.<\/p>\n

In the example above, I\u2019ve specified that all of the content inside <h1> <\/strong>tags should be made blue and transformed into the Helvetica font. Notice that the content inside the paragraph tags isn\u2019t affected. That\u2019s because the paragraphs are not inside the h1<\/strong> tags.<\/p>\n

As you can see, your rules go inside angle brackets, which look like this { }<\/strong> and are separated by semicolons.<\/p>\n

After you\u2019ve edited\u00a0style.css<\/strong> so that it looks as it does in the above image, save it and refresh your web browser. Your new style should be reflected on the page!<\/p>\n<\/div>\n<\/div>\n

\n

Make everything different colors!<\/h3>\n
\"media_1445645907625.png\"<\/div>\n
\n

Everybody know that the more color a webpage has on it, the better it is.<\/p>\n<\/div>\n<\/div>\n

\n

Change background colors<\/h3>\n
\"media_1445646064171.png\"<\/div>\n
\n

To CSS, every element on your webpage forms a box. You can change the background color of this box by using the background-color style rule.<\/p>\n

As you can see above, even the body tag forms a box that contains everything on the page. Who wants a boring background color? Make that page stylish!<\/p>\n<\/div>\n<\/div>\n

\n

Add some borders<\/h3>\n
\"media_1445646352089.png\"<\/div>\n
\n

Since everything on your page is a box, you can add borders around everything. Notice that I\u2019ve also put a border around my dog photo by using the img<\/strong> tag.<\/p>\n<\/div>\n<\/div>\n

\n

Do some resizing<\/h3>\n
\"media_1445646487538.png\"<\/div>\n
\n

You can change pretty much anything with CSS, including sizes. I want my dog picture to be smaller, so I\u2019m going to add some style rules for the img<\/strong> tag.<\/p>\n

I\u2019ve chosen to use percentages, but you can also use pixels (50px).<\/p>\n<\/div>\n<\/div>\n

\n

Move things around<\/h3>\n
\"media_1445882521016.png\"<\/div>\n
\n

You can use CSS to move things around on the page. The most direct way to do this is to change the margins<\/strong> (the space between the element and whatever\u2019s next to it). I\u2019m going to scooch my dog picture over to the right by increasing its left margin. (See what happens when you try margin-right<\/strong>, margin-top<\/strong>, and\u00a0margin-bottom<\/strong>).<\/p>\n<\/div>\n<\/div>\n

\n

Add some padding<\/h3>\n
\"media_1445882630200.png\"<\/div>\n
\n

Margin is the space between an element and its neighboring elements. Padding\u00a0<\/strong>is the space between a piece of content and its borders. Let\u2019s give the header some more padding to make it stand out. Looking good!<\/p>\n

Now that you have an amazing webpage, let’s talk about how we can break a page into sections in the next tutorial.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

You\u2019ve used HTML to build your webpage, but it doesn\u2019t have a lot of style yet. Let\u2019s add some with CSS. CSS stands for cascading style sheet, a somewhat confusing … Continue reading “Paint that page with CSS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1391,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-1406","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages\/1406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/comments?post=1406"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages\/1406\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages\/1391"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/media?parent=1406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}