last class I introduced you to HTML coding and the creation of a simple web page
. ... CSS. CSS has been around for several years and was developed to help ...
4521 section two: css / introduction
last class I introduced you to HTML coding and the creation of a simple web page. the styling that you performed through adding attributes and arguments should help with understanding the next section of web development: cascading style sheets, or CSS. CSS has been around for several years and was developed to help cope with controlling the look of content across large websites where changes at the in-line level were becoming almost impossible. CSS enables a designer/developer to write attributes on an external document. these attributes (called properties in CSS) are attached to tags within the HTML and apply to every tag with that name. for instance, if I write a rule for h1 tags that rule will apply to all h1 tags throughout the website without regard to where they are (as long as the CSS is properly linked to each HTML document). obviously, this lessens the workload caused by in-line editing significantly. the other benefit is that the various rules one can write are expansive and contain the flexibility to create the appearance of simple interactivity. CSS is written in rules which contain the following parts: rule declaration h1 {color:#333; padding-left:3px;} selector
property: value;
a rule consists of an selector and a declaration statement. the declaration statement has pairs of properties and values which are separated by a colon. different properties are separated by a semicolon. generally speaking, rules are written for elements in the order of their appearance on the page. properties should go from the broadest to the most specific. CSS can be applied to three different kinds of selectors; tags (elements), classes, and IDs. when writing a rule for each of these selectors, you need to pay attention to the protocols for identifying each. › tags are written just as they appear in the HTML: h1, p, ul › classes are written with a period followed by a user-specified name: .headline, .descriptor › IDs are written with a number sign and then a user-specified name: #header, #sideBar you may also write compound selectors to target specific elements within other elements. let’s say. for instance, that you want your sidebar headlines to have the same importance as your main content, but you want them styles differently. you would write a selector starting with the containing element first, followed by a space and
then the targeted element: #sideBar h1 this selector will target only h1 tags within the ID sidebar finally, there are two important tags to become familiar with. the div and span tags are basically empty tags that are used to configure different things. div tags are used to make block-level elements such as page divisions. span tags are used for in-line elements. these provide ways of targeting elements that exist within a block-level element - modifying part of a sentence to be in italic, for instance:
you don’t reallywant to do that?
section two: css / boxes basic page structures in CSS are based on boxes. boxes are simply containers that you put your information into to better organize the page. we will start our segment on CSS by learning how to style boxes and see how they control information. Boxes are made up of 4 parts: content, padding, borders, and margins.
margin border padding content
Suspendisse rhoncus odio quis nunc rhoncus consequat. Vestibulum congue, est id ultrices bibendum, metus ipsum porttitor orci, ac feugiat quam risus vel mi. Etiam eu mi risus, eleifend viverra lectus. Ut id auctor arcu.
I should say that a box can be composed of four elements. you needn’t have anything but content, but the other elements are handy. content: content is just what it says. whatever you have be it images or text is what makes up your content. the content both influences and responds to its containing elements. padding: padding and margin are often confused and in some cases can perform the same basic functions. the way to understand it is this; padding exists between the content and the border. if you have no border or margin, padding can push content away from other elements
border: again, sort of self explanatory. if you want lines around any of your content, you use borders. borders are really pretty handy for design and can be applied to individual sides or as an enclosing box. there is even code to radius the corners individually. borders also have specified thicknesses, colors and styles. margins: margins act like padding except that margins exist outside of the border. even if there is no visible border, margins will begin at the edge of the padding. margins are what push content away from other content. add it up: okay, where all of this becomes important is that all of these features take up room. later when we discuss page layout, you’ll need to take into account all of your box element’s measurements in order to determine how much room the take up... and you have to add up everything. if I have a 300px paragraph with 10px of padding, a 1px border and 20px of margin my total width is...
