syllabus
|
resources
|
IRL Chicago
|
Web Editor



CSS: form follows function;





what is CSS






webpage without CSS


same webpage, with CSS





CSS ( or Cascading Style Sheets ) are rules organized in blocks of code that specify how different elements should appear on your page. There are three different ways to add CSS to your page ( watch this video to learn them all ) but for the purposes of this class we'll be using <style> tags, inside our head





how to CSS






a CSS block contains two parts, a selector which specifies which element(s) the rules will be applied to and a { declaration }, surounded by curly brackets, which specifies how the element should be styled.

the declaration is split in two parts, the property which indicates the apsect of the element you want to change ( ex: color, font, width, border ) and the value which is the settings you want to use for that specific property.






in the example above all the <a> tags ( or link elements ) on the page are being changed. rather than the default blue underlined text, they will now all be purple ( color: #ff00ff ) with no underline ( text-decoration: none; ).

elements can have multiple CSS states, in the example above we've also created a hover state for our links, so everytime the mouse hovers over a link the color changes to #cc3399




sometimes you want to be able to target specific elements on your page ( rather than effecting all the elements of a specific type ), you can do this by creating a class ( . followed by a name ) and then assigning that class to an element using the html class attribute.





understanding color




there are only so many colors that have names ( green, purple, pink ). if you want to assigne a specific color in your CSS you need to use numerical values.

These come in different forms the most common is HEX which looks like color: #00ff33;,

or RGB which looks like color: rgb( 0, 255, 204 );




understanding the box

( block elements vs inline elements )







each element on your page is like a container ( literally a box ). some of these are display block, which means they are as wide as the full page by default, forcing a line break between the element below it ( ex: <h1> <p> <div> ). others are display inline which are only ever as wide as their content by default ( ex: <a> <img> <span> )




control+click > inspect element






inspect the element below on this page, adjust it's padding, margin, width, height and see what happens...


here is an example of a <p> tag, which is display 'block'. control+click on this element and choose 'inspect element' to pull up your dev tools ( in Chrome ), adjust the CSS values and see what happens





.




HOMEWORK



read Chapter 6 from Johnny Ryan's book A History of the Internet and the Digital Future. You can find it online here: Communities based on interest, not proximity. in this Chapter Ryan quotes one of the founders of the Internet as having said, "life will be happier for the on-line individual because the people with whom one interacts most strongly will be selected more by commonality of interests and goals than by accidents of proximity.", what does he mean by 'accidents of proximity', how are online communities different from IRL ones? consider the modern web, can you think of anhy communities that fit this description? write a response to the article where you continue Ryan's investigations of online communities by writing about a contemporary one.

create a webpage for your response and style it with CSS. the aesthetic/styles of your response should reflect the aesthetic of the community you're writing about. Remember tha tyou can 'inspect element' on any website ( should you need to steal any CSS ;)

when you finish upload your page to the server and submit it below

here's a link to the list of all the CSS properties: CSS-Tricks



submit your URL here:


if you have any trouble submitting send me an email: nbriz@saic.edu