CSS WHAT IS IT? HOW DOES IT WORK? (LOOK N GOOD)

Size: px

Start display at page:

Download "CSS WHAT IS IT? HOW DOES IT WORK? (LOOK N GOOD)"

Lawrence Reynolds
6 years ago
Views:

1 CSS (LOOK N GOOD) CSS is short for Cascading Style Sheets. This is the stuff that allows you to add formatting and styling your web pages. WHAT IS IT? Let me show you HOW DOES IT WORK?

2 If you have a headline that looks like this THIS IS A HEADLINE And you add some CSS that looks like this h1 { font-family: helvetica; color: red; font-size: 12px; It ll transform how that headline looks. THIS IS A HEADLINE THIS IS A HEADLINE

3 SELECTOR VALUE h1 { font-family: helvetica; color: red; font-size: 12px; PROPERTY CSS always follows this format. First, you start with a selector. For now, that s just going to be a tag name you want to format. Second, inside some curly brackets, you re going to put a property: value; pair (followed by a semi-colon) for every style you want to set. WHAT ELSE CAN IT DO? YOU MEAN, WHAT CAN T IT DO? - TYPOGRAPHY - COLOR - IMAGES - STRUCTURE/LAYOUT - COMPOSITION - ANIMATIONS - BASICALLY, ANYTHING VISUAL

4 HONORABLE MENTION This site will show you how flexible and powerful CSS can be by showing the same exact HTML in dozens of completely different ways, just by changing the CSS. CSSZENGARDEN TYPE font-family (Helvetica, Times, etc.) font-size (px, pt, em, &, ) color (rgb, rgba, hsl) text-align (left, center, right) text-decoration (underline, none) text-style (italic, normal) font-weight (bold, normal) Here are some common CSS properties for type. LAYOUT And here are some properties for adjusting layout. width height margin padding border

5 MARGIN HEIGHT LAYOUT WIDTH Pork belly etsy beard fixie. Chillwave banh mi american apparel, trust fund bushwick skateboard viral. Wolf messenger bag twee, raw denim terry richardson forage selvage single-origin coffee. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life popup. PADDING Layout is mostly done by affecting the box model. This is referring to the fact that all elements have properties that determine how much space they take up on the screen (and it s always a rectangle, thus: box). Width and height force the content box to be a certain size. Padding is the space between the content and the border. Margin is the space between this element and the ones around it. BORDER LET S TRY IT In your site folder, make a folder called css, and then create a file in there called style.css. MAKE style.css

6 Then add this code to the <head> tag in your HTML. STUFF THIS IN YOUR <HEAD> <link rel="stylesheet" href="css/style.css" type="text/css"> NOW PUT THIS IN style.css : Adding this code to your CSS should change how all of the h1 tags on your page act. h1 { font-family: helvetica; color: red; font-size: 12px; UNITS (SIZE) 12px 1.2em 80% 50vw 20vh Here are some common units of measurement. px - are the traditional size of a pixel, or 1/72nd of an inch em - are essentially the size of a capital letter M. This means this measurement is proportional to the size of the font, so changing the font-size of a parent element will change the size of this. % - will always be a percentage of the height or width of an elements container, depending on what you re setting. vw - is short for viewport width, which is a measurement in relation to the size of the browser. 100vw = 100% of the browser width, 50vw = half the browser width, etc. vh - the same as vw, but with height

7 UNITS (COLOR) blue rgb(125,74,214) rgba(159,15,88,.7) hsl(220, 50, 10) #fa3c14 [color name] - There are a number of common colors you can just refer to by name #[hex code] - These aren t really meant to be human readable, but they are essentially three blocks of number (fa, 3c, 14), each corresponding to a color (red, green, blue in that order), that go from (written in hexidecimal) rgb - It uses three values, from 0-255, for red, green, and blue rgba - Like rgb( ) but with a fourth value for alpha (opacity), that you can set between 0 and 1 hsl - Hue (0-360), saturation (0-100), and lightness (0-100) Here is what it looks like when you apply them to CSS properties h1 { font-family: helvetica; color: red; background: #fa342b; font-size: 12px; line-height: 1.2em; PROTIP BRACKETS WILL BE YOUR GUIDE (IE. QUICK EDIT IS RAD) Quick Edit allows you to edit CSS properties from your HTML. Just select your HTML tag and hit Cmd-E. It ll bring up a quick edit window to adjust the properties of that element. ALSO, auto-complete and syntax highlighting make sure you re doing everything correctly and quickly.

8 BACKGROUND IMAGES You can apply images (as backgrounds) to elements, too. Here s what that looks like. background-image: url(../img/imagename.png); background-size: cover/contain/100px; background-position: top left/200px 100px; background-repeat: no-repeat; HONORABLE MENTION Background images tile and repeat by default, so you can easily make patterns on HTML elements. And if you want a good set of free, well made tile images, go to subtlepatterns.com Subtle Patterns IDs and Classes are ways of identifying elements and differentiating them from other elements in your page ID S AND CLASSES (CALLING EM LIKE I SEE EM)

9 ID HTML: <h2 id= subtitle >TITLE</h2> You add an ID name to a tag using the id property. And you can style that element in your CSS by referring to that ID name with a # sign in front of it. CSS: #subtitle {... CLASS Same thing with classes. You can style these elements with a. in front of the class name in your CSS. HTML: <h2 class= subtitle >TITLE</h2> CSS:.subtitle {... All of them. WHICH ELEMENTS CAN CLASSES AND IDS BE APPLIED TO?

10 Yep. ALL OF THEM BUT WHAT ABOUT THE <IMG> TAG? OR THE <DIV> TAG? WHAT DID I JUST SAY?!

11 Seriously. ALL OF THEM PROTIP ID S LET S KEEP IT CLASSY If you re wondering which one you should use, just use a class name. The main difference between the two of them are that you can only use an ID name once per page, and they aren t nearly as useful as classes when we get to javascript. CLASSES We can select more than just tag names with CSS. SELECTORS

12 p {... h1, h2, h3 {... article p {... * {... div * {... #idname {....class {... SELECTORS SELECTS ALL <p> TAGS SELECTS ALL <h1>, <h2>, and <h3> TAGS SELECTS ALL <p> TAGS INSIDE OF A <div> tag SELECTS ALL ELEMENTS SELECTS ALL ELEMENTS INSIDE ANY DIV SELCTS ANY ELEMENT WITH idname AS AN ID SELCTS ANY ELEMENT WITH class AS A CLASS INHERITANCE Inheritance is the idea that when you style a parent element, the elements inside it (child elements) will get those properties too. <section> <h2>section Title</h2> <p>important Information</p> <p>important Information</p> </section> INHERITANCE For instance, if we style sections to be yellow section { color: yellow; <section> <h2>section Title</h2> <p>important Information</p> <p>important Information</p> </section>

13 INHERITANCE All the text inside those elements will be yellow. section { color: yellow; <section> <h2>section Title</h2> <p>important Information</p> <p>important Information</p> </section> ORDER OF PRECEDENCE.blue { color: blue; But of course it can be more complicated than that. For instance, what if we have two CSS rules that have properties that conflict? Both of these rules affect the div listed at the bottom. div { color: yellow; <div class= blue >What color AM I?!?!</div> ORDER OF PRECEDENCE To make sure we get consistent results, there s an order of precedence, or system that says which competing rule wins. 1. NO. OF ID S 2. NO. OF CLASSES 3. NO. OF ELEMENTS 4. ORDER OF APPEARANCE

14 ORDER OF PRECEDENCE 1. NO. OF ID S WHEN TWO RULES CONFLICT #container #sidebar ul { color: yellow; WILL BEAT #container ul { color: blue; ORDER OF PRECEDENCE The first thing that is checked is how many ID names are in the selector. The one with more ID names wins. After that, the browser will check to see which one has the most class names. 2. NO. OF CLASSES.container.sidebar ul {... WILL BEAT.container ul {... ORDER OF PRECEDENCE After that, it will check the number of elements listed in the selector. 3. NO. OF ELEMENTS header nav a {... WILL BEAT a {...

15 ORDER OF PRECEDENCE If there s a tie, then the browser will choose the rule that comes last in the CSS. 4. ORDER OF RULES.class1 {... (LINE 17) WILL BE OVERWRITTEN BY.class2 {... (LINE 62) ORDER OF PRECEDENCE An easy way to see which wins is to tally them all up together NUMBER OF IDS CLASSES ELEMENTS/PSEUDEO ELEMENTS ORDER OF PRECEDENCE So if both of these selectors applied to the same element NUMBER OF IDS CLASSES ELEMENTS/PSEUDEO ELEMENTS.container.sidebar ul {... #container ul {...

16 ORDER OF PRECEDENCE We can see that 101 (the number of ids, then classes, then element names) beats 021. The second rule would win. NUMBER OF IDS CLASSES ELEMENTS/PSEUDEO ELEMENTS container.sidebar ul { #container ul {... PROTIP You can check out these tools by right clicking an element in your browser and then clicking Inspect DEVELOPER TOOLS ARE SOOOO HAWT. WHATEVER, THOM. IT STILL LOOKS LIKE A MARGINALLY PRETTIER LIST OF CONTENT.

17 JEEZ. YOU GUYS ARE REALLY DEMANDING Just kidding! You guys are sweeties!

The Benefits of CSS. Less work: Change look of the whole site with one edit

The Benefits of CSS. Less work: Change look of the whole site with one edit 11 INTRODUCING CSS OVERVIEW The benefits of CSS Inheritance Understanding document structure Writing style rules Attaching styles to the HTML document The cascade The box model CSS units of measurement