Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

CSS terms & syntax

CSS Cascading Style Sheets This what plain text looks like. We will always write code in a text editor like TextWrangler or Deamweaver using plain text. In CSS files you create rules that dictate how parts of your website are styled. We can link a single CSS file to one or many HTML files. CSS Syntax Elements p - The first element is the selector. It tells us what type of item we are selecting to target with CSS. In this example, we are targeting every paragraph in the HTML file. { - Similar to the <> brackets in HTML, these squiggly brackets open and close the declarations of your selector. The rules you write for specific selectors go inside these. It follows the selector and one space. color - This element is known as property. This element is very similar to an HTML attribute, it defines what property of the selector we are about to describe. In this example, we are about to change the color of all paragraphs. : - The colon connects the property and the value. It must be between the property and the value, you can put a space just after the colon for easier reading but it isnt necessary. white - This elemnt is known as value. It describes what the property should look like. ; - The semicolon tells us that the declaration is over. You can add more declarations after this, but all declarations end with a semicolon. } - The closing squiggly indicates the end of a CSS rule. Here is a sample CSS rule: p{ CSS Rule color: white; background-color: pink; } In this sample CSS rule I declared that all paragraphs will be white with a pink background. Formatting CSS Syntax Elements Whats required: Each CSS rule begins with a selector and ends with one or more declarations surrounded by opening and closing squiggles. Inside the squiggles, each declaration must have a property and a value separated by a colon, and a semicolon must separate the declarations. Spaces and tabs are optional in CSS formatting, but I suggest writing CSS for readability, make it easier for you or someone else who might read your code. And remember, the most important thing is to be consistent in your process. I usually write my selector and the opening squiggly on the first line. Then I go to the next line, tab in once, and write one declaration per line. I end with a closing squiggly on a line by itself, tabbed the same as the declarations. Take your time and format cleanly and consistently and you will learn faster and have fewer problems. Declarations

When writing code, always make sure to use double tick marks " " rather than quotetation marks .

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

HTML Structure & Code <div> <p> </p> <div>

<div> <p> Interesting paragraph of words. </p> </div>

CSS Rule targeting above HTML code p{ color: white; background-color: pink; }

Interesting Pragraph of words.

Colors in CSS You can identify some colors in CSS using english but for more detailed control over your color values use hexadecimal values like #DCD78E.

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

Getting Fancy with Selectors Lets say that we wanted to code the CSS for an error state for a contact form that wasnt filled out correctly. We might write the HTML like this.

Opps, you need to give us your email Address to sign up for our newsletter.

<div id="form"> <div class="error"> <p>

HTML attribute hooks

Opps, you need to give us your email Address to sign up for our email newsletter. </p> </div> </div> Hooking into CSS with class and id Attributes What we have targeted in our CSS example was every paragraph <p> tag. This is great for broad sweeping declarations, but youll find yourself wanting to target specific pieces of your web page. We can use class and id attributes from HTML as Hooks that let us write CSS to control our HTML in a much more specific way. #form-message{ padding-top: 10px; border-top: 2px solid black; } div.error{ background-color: red; padding-top: 10px; } div.error p{ color: white; font weight: bold; } You can mix up these combinations any way you want. you can connect any tag (<div>, <p>, <span>, etc.) to a class attribute or id attribute. You can choose to be more specific with CSS by writing a selector that includes the class attribute or id attribute in addition to the tag itself. Do this by typing the tag you want to target and then string it together with a class attribute or id attribute. We string these together by connecting the period or hash with the tag, making sure to leave our any space characters. So div.error as a selector in CSS targets only <div class="error"> in HTML. class attributes divide with a (.) period. id attributes divide with a # sign.

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

<div class="error"> <p> </p> </div>

Targeting Nested HTML Lets say you want to target a <p> tag that is nested inside of <div class="error">, you just have to build on this using what you already know. In CSS, you can target HTML by the way its nested, in addition to the tag name, class attribute and id attribute. The first part of the selector targets the parent tag, and each chunk of text that follows (with a space before it) is nested in the parent tag prior to it. You can get as fancy with this as you want.

<div class="container"> <div class="wrapper"> <div class="teaser"> <div class="thingy"> <a =class"download"> </a> </div> <div> </div> </div>

<div class="container"> <div class="wrapper"> <div class="teaser"> <div class="thingy"> <a href="report.pdf" class="download"> Download Now</a> <div> <div> <div> <div>

You could target the link in this example in several ways. The easiesy would be to target .download, which would find anything with the class of download. That code would look like this: .download{ font-weight: bold; color: red; } But if you want to target only links with a class attribute of download in side of a tag with a class attribute of teaser. Youd target div.teaser .download to do this. div.teaser .download{ font-weight: bold; color: red; } You could go a step further even like this. div.container div.wrapper div.teaser .download{ font-weight: bold; color: red; } Ordinarily this is a little extreme but occationally you may have to make something like this to target something specific that is nested deep, so you dont effect other parts of your website unintentionally.