{"id":191,"date":"2017-09-27T03:54:55","date_gmt":"2017-09-27T03:54:55","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh101f17\/?page_id=191"},"modified":"2017-11-01T10:42:43","modified_gmt":"2017-11-01T17:42:43","slug":"paint-that-page-with-css","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/dh101f17\/tutorials-guides\/web-publishing\/html-css\/paint-that-page-with-css\/","title":{"rendered":"Paint that page with CSS"},"content":{"rendered":"
\n

You’ve used HTML to build your webpage, but it doesn’t have a lot of style yet. Let’s add some with\u00a0CSS<\/strong>.<\/p>\n

CSS stands for\u00a0cascading 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’t 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 Atom and save it in the same place as your html document, with the name\u00a0style.css<\/strong>.<\/p>\n

(You can call your stylesheet whatever you want, but\u00a0style<\/strong>\u00a0is 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’s not too hard. Inside the<head><\/strong>\u00a0tags 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’d 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’ve specified that all of the content inside\u00a0<h1>\u00a0<\/strong>tags should be made blue and transformed into the Helvetica font. Notice that the content inside the paragraph tags isn’t affected. That’s because the paragraphs are not inside the\u00a0h1<\/strong>tags.<\/p>\n

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

After you’ve edited\u00a0style.css<\/strong>\u00a0so 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’ve also put a border around my dog photo by using the\u00a0img<\/strong>\u00a0tag.<\/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’m going to add some style rules for the\u00a0img<\/strong>\u00a0tag.<\/p>\n

I’ve 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\u00a0margins<\/strong>\u00a0(the space between the element and whatever’s next to it). I’m going to scooch my dog picture over to the right by increasing its left margin. (See what happens when you try\u00a0margin-right<\/strong>,\u00a0margin-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.\u00a0Padding\u00a0<\/strong>is the space between a piece of content and its borders. Let’s 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<\/a>.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

You’ve used HTML to build your webpage, but it doesn’t have a lot of style yet. Let’s add some with\u00a0CSS.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":43,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-191","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/comments?post=191"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/191\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/43"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/media?parent=191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}