{"id":276,"date":"2022-01-19T00:10:57","date_gmt":"2022-01-19T00:10:57","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/is270s23\/?page_id=276"},"modified":"2022-01-20T17:34:16","modified_gmt":"2022-01-20T17:34:16","slug":"paint-that-page-with-css","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/is270s23\/resources\/web-design\/paint-that-page-with-css\/","title":{"rendered":"Paint that page with CSS"},"content":{"rendered":"\n

If you’d like, you can watch a video<\/a> of me working through these steps.<\/em><\/p>\n\n\n\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\n\n\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\n\n\n

Link your HTML document to a CSS document<\/h3>\n\n\n\n
\"media_1445645339389.png\"\/<\/figure>\n\n\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 folder as your html document, with the name style.css<\/strong>.<\/p>\n\n\n\n

(You can call your stylesheet whatever you want, but style<\/strong> is customary.)<\/p>\n\n\n\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\n\n\n

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

Now, after you save your HTML document, you should be linked! (You won\u2019t be able to tell that, though, until you\u2019ve completed the next step.)<\/p>\n\n\n\n

How CSS styles work<\/h3>\n\n\n\n
\"media_1445645488785.png\"\/<\/figure>\n\n\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\n\n\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 (for example) the paragraph tags isn\u2019t affected. That\u2019s because the paragraphs are not inside the h1<\/strong> tags.<\/p>\n\n\n\n

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

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

h1 {\ncolor:blue;\nfont-family:helvetica;\n}<\/code><\/pre>\n\n\n\n
Make everything different colors!<\/h3>\n\n\n\n
\"media_1445645907625.png\"\/<\/figure>\n\n\n\n
Everybody know that the more color a webpage has on it, the better it is. Add some color by styling tags.<\/p>\n\n\n\n
h1 {\ncolor:blue;\nfont-family:helvetica;\n}\n\np {\ncolor:pink;\n}\n\nh3 {\ncolor:blue;\n}\n<\/code><\/pre>\n\n\n\n
Change background colors<\/h3>\n\n\n\n
\"media_1445646064171.png\"\/<\/figure>\n\n\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\n\n\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\n\n\n
body {
background-color:yellow;
}<\/pre>\n\n\n\n
Add some borders<\/h3>\n\n\n\n
\"media_1445646352089.png\"\/<\/figure>\n\n\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\n\n\n
img {
border: 5px solid fuchsia;
}<\/pre>\n\n\n\n
Do some resizing<\/h3>\n\n\n\n
\"media_1445646487538.png\"\/<\/figure>\n\n\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\n\n\n
I\u2019ve chosen to use percentages, but you can also use pixels (50px).<\/p>\n\n\n\n
img {
border: 5px solid fuchsia;
width:50%;
height:50%;
}<\/pre>\n\n\n\n
Move things around<\/h3>\n\n\n\n
\"media_1445882521016.png\"\/<\/figure>\n\n\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 margin-bottom<\/strong>).<\/p>\n\n\n\n
img {\nborder: 5px solid fuchsia;\nwidth:50%;\nheight:50%;\nmargin-left:100px;\n}<\/code><\/pre>\n\n\n\n
Add some padding<\/h3>\n\n\n\n
\"media_1445882630200.png\"\/<\/figure>\n\n\n\n
Margin is the space between an element and its neighboring elements. Padding <\/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\n\n\n
h1 {
color:blue;
font-family:helvetica;
background-color:pink;
border:5px solid red;
padding:50px;
 }<\/pre>\n\n\n\n
If you\u2019d like, you can learn more CSS<\/a>, or, if we\u2019re short on time, you can skip to publishing your site to the web<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
If you’d like, you can watch a video of me working through these steps. You\u2019ve used HTML to build your webpage, but it doesn\u2019t have a lot of style yet.… Continue reading Paint that page with CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":272,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-276","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/comments?post=276"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages\/276\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/pages\/272"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/is270s23\/wp-json\/wp\/v2\/media?parent=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}