{"id":355,"date":"2014-02-19T21:15:13","date_gmt":"2014-02-20T02:15:13","guid":{"rendered":"http:\/\/art.buffalo.edu\/coursenotes\/art320\/?page_id=355"},"modified":"2025-09-16T14:13:40","modified_gmt":"2025-09-16T18:13:40","slug":"ex02-part-2-css","status":"publish","type":"page","link":"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/ex02-part-2-css\/","title":{"rendered":"Exercise 3, Part 2: CSS"},"content":{"rendered":"\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/exercise-3-part1-html\/\" data-type=\"page\" data-id=\"342\">Part 1: HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/ex02-building-a-site-with-html-and-css\/ex02-part-2-css\/\">Part 2: CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/exercise-3-part-3-responsive-css\/\" data-type=\"page\" data-id=\"386\">Part 3: Responsive CSS<\/a><\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">CSS<\/h1>\n\n\n\n<p>CSS is a set of formatting rules that are applied to the HTML based on <strong>selectors<\/strong> and <strong>declarations<\/strong>.<\/p>\n\n\n\n<p><strong>Selectors<\/strong> determine which HTML element a style should be applied to, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>tags<\/em>: <code>&lt;p&gt;<\/code><\/li>\n\n\n\n<li><em>classes<\/em>: can be applied to any element, such as <code>&lt;span class=\"boldRed\"&gt;<\/code>. In the CSS, class names begin with a dot, such as <code>.boldRed<\/code>.<\/li>\n\n\n\n<li><em>IDs<\/em>:&nbsp;specify a style for a single, unique element, such as <code>&lt;div id=\"banner\"&gt;<\/code>. In the CSS, ID&nbsp;names begin with a #, such as <code>#banner<\/code>.<\/li>\n\n\n\n<li><em>pseudo-classes<\/em>: add custom looks and behaviors to certain selectors, such as a:hover. See <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Pseudo-classes\">MDN Pseudo Classes<\/a> for more details.<\/li>\n<\/ul>\n\n\n\n<p>Selectors can also be grouped or nested within each other. Grouped selectors apply the same rule to a number of different elements. Nested selectors may affect certain classes that are only within other classes.<br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">h1, h2, p, li {\n }\nApplies to the h1, h2, p and li tags.<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">#subnav li a {\n }\n Only applies to anchor tags within li tags in the #subnav element.<\/pre>\n\n\n\n<p><strong>Declarations<\/strong> consist of a <em>property<\/em> and a <em>value<\/em>. The property is the style attribute (like color or margin) that you wish to change. Each property has a value (like &#8220;red&#8221; or &#8220;20px&#8221;).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Common CSS properties:<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>color<\/li>\n\n\n\n<li>text-align<\/li>\n\n\n\n<li>line-height<\/li>\n\n\n\n<li>font-family<\/li>\n\n\n\n<li>font-size<\/li>\n\n\n\n<li>font-style<\/li>\n\n\n\n<li>font-weight<\/li>\n\n\n\n<li>background-color<\/li>\n\n\n\n<li>background-image<\/li>\n\n\n\n<li>background-repeat<\/li>\n\n\n\n<li>list-style-type<\/li>\n\n\n\n<li>margin<\/li>\n\n\n\n<li>padding<\/li>\n\n\n\n<li>border<\/li>\n\n\n\n<li>float<\/li>\n\n\n\n<li>clear<\/li>\n<\/ul>\n\n\n\n<p>For a complete list of CSS properties, see MDN&#8217;s&nbsp;<a title=\"CSS Properties from MDN\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\">CSS Reference<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Layout<\/h2>\n\n\n\n<p>divs and spans<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>By default, browsers place a line break after each <code>&lt;div&gt;<\/code> element. That can be overridden using floats (moves a <code>&lt;div&gt;<\/code> left or right) and clears (forces a line break left and right.) See MDN&#8217;s explanation of <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/float\">float<\/a><\/strong>&nbsp;and <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clear\">clear<\/a><\/strong>.<\/li>\n\n\n\n<li>Create your <code>&lt;div&gt;<\/code> tags in your HTML according to your flow analysis, and size and position them in CSS.<\/li>\n\n\n\n<li>Most block level elements within your layout will require a width attribute in order to behave properly. Heights can be set if needed, otherwise it will be determined by the content within the element.<\/li>\n\n\n\n<li>To determine height and width, consider the CSS Box Model.&nbsp;<span style=\"font-size: inherit\">Every box is composed of four parts&nbsp;defined by their respective edges: the <\/span><em style=\"font-size: inherit\">content edge<\/em><span style=\"font-size: inherit\">, <\/span><em style=\"font-size: inherit\">padding edge<\/em><span style=\"font-size: inherit\">, <\/span><em style=\"font-size: inherit\">border edge<\/em><span style=\"font-size: inherit\">, and <\/span><em style=\"font-size: inherit\">margin edge<\/em><span style=\"font-size: inherit\">.<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/box_model\">Original CSS Box Model<\/a><\/p><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2014\/02\/box-model.png\" alt=\"box model\" class=\"wp-image-728\" style=\"width:316px;height:auto\" srcset=\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2014\/02\/box-model.png 800w, https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2014\/02\/box-model-300x225.png 300w, https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2014\/02\/box-model-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Margin<\/strong> &#8211; Clears an area around the border. The margin does not have a background color, it is completely transparent<\/li>\n\n\n\n<li><strong>Border<\/strong> &#8211; A border that goes around the padding and content. The border is inherited from the color property of the box<\/li>\n\n\n\n<li><strong>Padding<\/strong> &#8211; Clears an area around the content. The padding is affected by the background color of the box<\/li>\n\n\n\n<li><strong>Content<\/strong> &#8211; The content of the box, where text and images appear<\/li>\n<\/ul>\n\n\n\n<p>The total width of the element in the example below is 300px:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code style=\"font-size: var(--wp--preset--font-size--medium);letter-spacing: 0px\">width:250px;<\/code><code style=\"font-size: var(--wp--preset--font-size--medium);letter-spacing: 0px\">padding:10px;<\/code><code style=\"font-size: var(--wp--preset--font-size--medium);letter-spacing: 0px\">border:5px;<\/code><code style=\"font-size: var(--wp--preset--font-size--medium);letter-spacing: 0px\">margin:10px;<\/code><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/css-tricks.com\/box-sizing\/\">CSS3 Responsive Box Model<\/a><\/h3>\n\n\n\n<p>With box-sizing: border-box; we can change the box model so that an element&#8217;s specified width and height aren&#8217;t affected by padding or borders, making responsive layouts easier to control.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\nbox-sizing: border-box;\n}<\/code><\/pre>\n\n\n\n<p>Positioning and Overlapping Elements: CSS allows for elements to be positioned in the following ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Static: HTML elements by default are static, according to the normal flow of the page.<\/li>\n\n\n\n<li>Fixed: Positioned relative to the browser window, will not move even if the window is scrolled.<\/li>\n\n\n\n<li>Relative: adjusted to a position relative to its normal position.<\/li>\n\n\n\n<li>Absolute: positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is &lt;html&gt;.<\/li>\n\n\n\n<li>Overlapping: The z-index property specifies the stack order of an element when it is positioned outside the normal flow. An element can have a positive or negative stack order.<\/li>\n\n\n\n<li><p>For a detailed explanation, see <a title=\"CSS Positioning\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/position\">CSS Positioning<\/a><\/p><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Floats and Clears<\/h2>\n\n\n\n<p>Adding the FLOAT property to an element takes it out of the normal flow and moves it as far to the left or right of it&#8217;s containing element as possible (until it reaches the edge of its parent or butts up against another floating object.)<\/p>\n\n\n\n<p>Any other elements, such as paragraphs or lists, will wrap around the floated element.<\/p>\n\n\n\n<p>Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.<\/p>\n\n\n\n<p>You can specify:<\/p>\n\n\n\n<p>a) whether an element is floated or not, and <br>b) which side it \ufb02oats to.<\/p>\n\n\n\n<p>A CLEAR cancels a float.<\/p>\n\n\n\n<p><code>Clear: right<\/code> forces the next element in the flow to appear on a new line. <\/p>\n\n\n\n<p><code>Clear:left<\/code> forces a line break before the floating object. Clear:both puts an element on its own line, below all previous elements in the flow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Grid Layout and Flexbox<\/h2>\n\n\n\n<p><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\"><strong>Grid<\/strong><\/a> and <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\"><strong>Flexbox<\/strong><\/a> are two recent additions to CSS that facilitate layout creation and element positioning, previously accomplished with inflexible tables and more recently, floats and clears. Grid provides a way to establish a two-dimensional (horizontal and vertical) responsive design system, while Flex gives greater control over the one-dimensional (either horizontal or vertical) distribution and spacing of elements within a container. It makes vertical alignment of objects much easier that with other CSS methods.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Add CSS Formatting to Your HTML<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Instructions<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download this <a href=\"https:\/\/ubwp.buffalo.edu\/art320\/wp-content\/uploads\/sites\/103\/2014\/02\/banner.png\">image<\/a>&nbsp;and place it into a folder named &#8220;images&#8221; inside your site folder.<\/li>\n\n\n\n<li>In VS Code create a New file and save it as style.css into your yourlastname-ex03 site folder.<\/li>\n\n\n\n<li><span style=\"font-size: 1rem\">Copy the css code below, and paste it into style.css.<\/span><\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code>@charset \"UTF-8\"; <\/code><code>\/* CSS Document *\/ <\/code>\n<code>\/* Universal Selector Reset *\/ <\/code>\n<code>* {<\/code><code>margin: 0;<\/code><code>padding: 0;<\/code><code>box-sizing<span style=\"font-family: inherit;font-size: inherit;text-align: initial;letter-spacing: 0px\">: <\/span><span style=\"font-family: inherit;font-size: inherit;text-align: initial;letter-spacing: 0px\">border-box;<\/span><\/code><code>} <\/code>\n<code>\/* End Reset *\/ <\/code>\n\n<code>:root {<\/code><code>--body-color: #d5d7ff;<\/code><code>}<\/code>\nbody {\n  background-color: var(--body-color);\n  text-align: left;\n  font: 11px\/1em \"Lucida Grande\", Lucida, Verdana, sans-serif;\n  min-height: 100vh;\n}\n\n#wrapper {\n  margin: 0 auto;\n  width: 960px;\n}\n\n<code>h1 {<\/code><code>font-size: 1.5em;<\/code><code>line-height: 1.75em;<\/code><code>color: #639;\nmargin-bottom: 1.75em;<\/code><code>}<\/code>\n<code>h2 {<\/code><code>font-size: 1.3em;<\/code><code>line-height: 1.75em;\nmargin-bottom: 1.75em;<\/code><code>}<\/code>\n\n<code>h3 {<\/code><code>font-size: 1.1em;<\/code><code>line-height: 1.3em;\nmargin-bottom: 1.3em;<\/code><code>}<\/code><code>\np {\nfont-size: 1em;\nline-height: 1.3em;\nmargin-bottom: 1.3em;\n}<\/code>\n<code>header {<\/code><code>width: 100%;<\/code><code>background-color: #000;<\/code>padding-top: 50px;\n<code>}<\/code>\n<code>nav {<\/code><code>padding-top: 3px;<\/code><code>height: 40px;<\/code><code>float: right;<\/code><code>}<\/code>\n<code>nav li {<\/code><code>font-family: \"Courier New\", Courier, monospace;<\/code><code>font-size:13px;<\/code><code>white-space: nowrap;<\/code><code>display: inline;<\/code><code>list-style-type: none;<\/code><code>padding-right: 1.5em;<\/code><code>}<\/code>\n<code>nav li a {<\/code><code>color: #FFFFFF;<\/code><code>text-decoration: none;<\/code><code>font-weight: bold;<\/code><code>}<\/code>\n<code>nav li a:hover {<\/code><code>color: #d5d7ff;<\/code><code>text-decoration: underline;<\/code><code>font-weight: normal;<\/code><code>}<\/code>\n<code>#banner {<\/code><code>width: 100%;<\/code><code>height: 50px;<\/code><code>clear: both;<\/code><code>background-image: url(images\/banner.png);\nbackground-repeat: no-repeat;\nbackground-size: cover;<\/code><code>}<\/code>\n<code>main {<\/code><code>width: 60%;<\/code><code>margin-right:<\/code><code>5%; <\/code><code>float: left;<\/code><code>margin-top: 50px;<\/code><code>} <\/code>\n<code>aside {<\/code><code>width: 35%;<\/code><code>float: right;<\/code><code>margin-top: 50px; <\/code><code>}<\/code>\nmain img {\nwidth: 50%;\nheight: auto;\n}\n\nfooter {\nclear: both;\nwidth: 100%;\nheight: 2.5rem;\nbackground-color: #ccc;\nmargin: 50px auto;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add Interactive Elements<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add CSS to the img rule to float the picture in the main div to the right, allowing text to flow around it to the left.<\/li>\n\n\n\n<li>Make the image clickable by wrapping the&nbsp;<code>img<\/code>&nbsp;element in an&nbsp;<code>&lt;a&gt;<\/code>&nbsp;tag and assigning an&nbsp;<code>href<\/code> value of&nbsp;<code>https:\/\/www.birds.cornell.edu\/<\/code>.<\/li>\n\n\n\n<li>Add pseudo-classes for&nbsp;<code>a:visited<\/code>, to change the color of links that have been visited.<\/li>\n\n\n\n<li>Change the image to black and white when moused over by creating a rule:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code>img:hover<\/code> {&nbsp;\n<code>filter: saturate(0);<\/code>}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/ubwp.buffalo.edu\/art320\/exercises\/exercise-3-building-a-site-with-html-and-css\/exercise-3-part-3-responsive-css\/\">Continue to Part 3<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS CSS is a set of formatting rules that are applied to the HTML based on selectors and declarations. Selectors determine which HTML element a style should be applied to, [&hellip;]<\/p>\n","protected":false},"author":295,"featured_media":0,"parent":358,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-355","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/users\/295"}],"replies":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/comments?post=355"}],"version-history":[{"count":49,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/355\/revisions"}],"predecessor-version":[{"id":4162,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/355\/revisions\/4162"}],"up":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/358"}],"wp:attachment":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/media?parent=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}