Downloaded 68 times
Uploaded byShawn Calvert
2,124 views
CSS Foundations, pt 1
The document provides an overview of CSS foundations including the three layers of web design, what CSS is, CSS syntax, selectors, applying styles, and the cascade. It discusses the structure, style, and behavior layers and how CSS is used to control presentation. Key points covered include the different ways to add CSS rules, CSS selectors like type, ID, class, and descendant selectors, and how specificity and inheritance apply styles. It also reviews CSS properties for styling text, lists, and links.
Related topics:
More Related Content
Similar to CSS Foundations, pt 1
More from Shawn Calvert
CSS Foundations, pt 1
- 1.CSS Foundations, pt122-3375 Web Design I // Columbia College Chicago
- 2.For Starters!!Post assignmentand blog postReview student blog postsInstructor review of Assign 3HTML refresher exercise!!
- 3.Skills learned sofar how to create a web directory and link between filesCode a basic webpage from scratchhow to mark up different types of content with appropriate HTML tagshow to use basic HTML attributes to create links and web imageshow to set up a site domain, server host and install a wordpress site
- 12.Three layers ofweb design: Structure, Style, Behavior
- 13.Three layers ofweb design
- 14.Three layers ofweb design
- 15.Three layers ofweb design
- 16.BEHAVIORJavascriptPRESENTATIONCSSImagerySTRUCTUREHTML markupSite planningThreelayers of web design
- 17.
- 18.
- 19.Stylesheet A stylesheet isa set of rules defining how an html element will be “presented”in the browser.These rules are targeted to specificelements in the html document.
- 20.The concept isvery similar to how you create stylesheets in InDesign.
- 21.Cascading Most pages willhave multiple stylesheetsthat define different styles to the sameelements.The cascade defines an ordered sequenceof style sheets where rules in later sheetshave greater precedence than earlierones.
- 22.low importanceClient (user)stylesheet Linked stylesheet high importanceEmbedded stylesheet Inline Styles
- 23.Stylesheet 1 make theparagraph 16px, Verdana, red Stylesheet 2 make the paragraph blue 16px, Verdana, blue
- 25.How to addcss to your document
- 26.There are 2basic ways to add styles to your html page: External (linked) <head>Internal
- 27.External <head> <link rel="stylesheet" type="text/css"href="stylesheet.css"> </head> Except in special circumstances, best practice isto keep all your styles in a separate css document.Linked stylesheets can be applied across multipledocuments and sites.
- 28.Internal (embedded) <head> <style> p{color: red} </style> </head> You can add styles directly into your html pageusing the “style” element in the <head> ofyour document.Embedded styles apply ONLY to that html document.
- 29.Internal (inline) <p style=”color:red”>Red Text</tag> You can add styles directly into your htmlmarkup using the “style” attribute on openingtag of your element. This is called an “inline”style.Inline styles apply ONLY to that specificinstance of the element.
- 31.Best Practice In mostcases you should use the external method of addingstyles to your html page.Writing the css in the <head> of your document is acceptableif you definitely only want to apply the styles to a single page.However, adding your styles “inline” — inside a html startingtag, e.g. <p style=”font-size: 14px”> — should be avoided.
- 32.CSS SyntaxSyntax =the rules for how to write the language
- 33.Three terms fordescribing your styles:CSS ruleCSS selectorCSS declaration
- 34.CSS Rule selector {property:value;} declaration Every style is defined by a selector and a declaration. The declaration contains at leastone property/value pair.Together they arecalled a CSS Rule.
- 35.CSS Selectorbody {font-family:Arial, Helvetica}"p{color: #666666}"h1 {font-size: 24px}"a {color: blue} The selector associates css rules with HTML elements.
- 36.CSS Selectorp { color:red } The selector is typed in front of the declaration,with a space separating it and the openingcurly-bracket (aka curly-brace).Typically, extra spaces and returns are added asshown for the sake of readability.
- 37.CSS Selector h1,h2,h3,h4 { font-weight:bold } You can apply styles to multiple selectors in thesame rule by separating the selectors withcommas.
- 38.CSS Declaration p { property:value } The declaration is always defined in a property/value pair. The two are separated by a colon.How you define the properties will affect howHTML elements are displayed.
- 39.CSS Declaration p { font-family:Arial, sans-serif; font-size: 14px; color: #666666; } You can apply multiple declarations to aselector(s) by separating the delcarations withsemi-colons.
- 41.
- 42.
- 43.Type (element) Selectors body{declaration} p {declaration} h1 {declaration} ul {declaration} The simplest selector is the type selector, whichtargets an html element by name.
- 44.The essential selectortypes (elements) Primary StructureBody ElementsFormatting Elementshtmlpembodybrih1 – h6strongulbolqablockquoteimgspandiv
- 45.Type selectors vsID & Class selectors Type selectors use the tag names that arebuilt into HTML. ID and class selectors use names that youdefine, and are added to html elementsto make them more specific.
- 46.Class Selectors .ingredients {declaration}"CSS <ulclass=”ingredients”> HTMLA class is an html attribute that is added to yourhtml markup. You reference that ID in your csswith a period.
- 47.ID Selectors #logo {declaration}"CSS <imgid=”logo” src=”” alt=””> HTMLAn ID is an html attribute that is added to yourhtml markup. You reference that ID in your csswith a hash.
- 48.IDs vs Classes Themost important difference between IDsand classes is that there can be only one IDon a page, but multiple classes.An ID is more specific than a class.An element can have both an ID andmultiple classes.
- 49.IDs vs Classes ID:#344-34-4344Class: MaleClass: StudentID: #123-54-9877Class: FemaleClass: Student
- 50.Multiple classes CSS .ingredients.time {declaration}"HTML <divclass=”ingredients time”> <h1></h1> </div> Elements can have multiple classes, giving youmore control. The are written in the CSS in theexact order they appear in the html, with nospaces.
- 51.Combining IDs andclasses CSS #wrapper.ingredients.time {declaration}"HTML <div id=”wrapper” class=”ingredients time”> <h1></h1> </div> Elements can have both ids and classes. Whilean element can have only one id, it can havemultiple classes.
- 52.Descendant Selectors .ingredients p{declaration}"CSS <div class=”ingredients”>"HTML<p></p>"</div> A descendant selector is a selector thatcombines the selectors of different elements totarget a specific element(s).
- 54.
- 55.
- 56.The Cascade The “cascade”part of CSS is a set of rulesfor resolving conflicts with multiple CSSrules applied to the same elements.For example, if there are two rules definingthe color or your h1 elements, the rule thatcomes last in the cascade order will“trump” the other.
- 57.low importanceClient (user)stylesheet Linked (external) stylesheet high importanceEmbedded (internal) stylesheet Inline (internal) Styles
- 58.Inheritance & Specificity Asa designer, your goal is to set an overallglobal consistent style, then add in morespecific styles as needed.You can control how and where your styles areapplied to your HTML by managing theirinheritance and specificity.
- 59.Inheritance Most elements willinherit many style propertiesfrom their parent elements by default. A parentis a containing element of a child.HTML" <body> <div> <ul> <li></li> </ul> </div> </body> relationship"parent of site"parent of ul and li, child of body"parent of li, child of div and body"child of ul, div, and body" !
- 60.Inheritance body make the paragraph16px, Verdana, red p make the paragraph blue 16px, Verdana, blue
- 61.Not all propertiesare inherited
- 63.Specificity Shortly after stylingyour first html elements,you will find yourself wanting more control overwhere your styles are applied.This is where specificity comes in. Specificity refers to how specific your selector isin naming an element.
- 64.Specificity If you havemultiple styles applied to the sameelement, the browser goes with whicheverselector is more specific. MaleMale Student Male Student George
- 65.Specificity body make the paragraph16px, Verdana, red p make the paragraph blue p.pink make the paragraph pink 16px, Verdana, pink
- 66.Where specificity getstricky The basic concept of specificity is fairly simple:you target specific elements in your HTML bylisting out more of their identifiers.For example, if you want to apply a specialstyle to a paragraph, you need a “hook” in thehtml to make it different from every otherparagraph.
- 67.Where specificity getstricky This can get tricky in your css, because the more specific you make your selectors, theharder it is to manage global styles(inheritances).
- 68.Where specificity getstricky Make all text pink.body {color: pink} Make all text in the element with the id“recipe” blue.#recipe {color: blue} Make all text in the element with the class“ingredients” blue..ingredients {color: green} Make all text in the paragraph elementwith the class “ingredients” purple.p.ingredients {color: purple} Make all text in the paragraph elementwith the class “ingredients”, contained inthe element with the id “recipe”, grey.#recipe p.ingredients {color: grey}"
- 69.Where specificity getstricky HTML <div id=”recipe”> <p class=”ingredients”> <div>"CSS body {color: pink} #recipe {color: blue} .ingredients {color: green} p.ingredients {color: purple} #recipe p.ingredients {color: grey}"!
- 71.
- 72.Property Valuescolor: #444444;font-family:"Times New Roman", Georgia, serif;font-size: 16px; (define in px, em, or %)Style declarations are made of a property anda value. The type of value you can usedepends on the property.
- 73.There are 5basic ways of identifying fonts:Web Safe Fonts (called font-family in your text)Font-FaceService-Based Font-FaceImagessIFR/Cufon
- 74.Web-safeWeb-safe fonts arefonts likely to be present on a widerange of computer systems, and used by Web contentauthors to increase the likelihood that content will bedisplayed in their chosen font.If a visitor to a Web site does not have the specifiedfont, their browser will attempt to select a similaralternative, based on the author-specified fallbackfonts and generic families or it will use fontsubstitution defined in the visitor's operating system.
- 75.
- 76.
- 77.Font StackThe font-familyproperty can hold several font names as a"fallback" system. If the browser does not support the firstfont, it tries the next font.Start with the font you want, and end with a generic family,to let the browser pick a similar font in the generic family,if no other fonts are available.!EXAMPLES body { font-family: Helvetica, Arial, sans-serif}"h1 { “Lato”, Arial, sans-serif}"
- 78.Units of TypeSizeThere are three different ways to define type sizes in css.ems Ems are a relative unit: 1em is equal to the current font size.The default text size in browsers is 16px. So, the default sizeof 1em is 16px.px Pixels are a an absolute unit, it sets the text to a specific sizeinstead of a size relative to the browser’s default. Except inspecial cases, you should define pixels in your css with thenumber and “px” together, no spaces: “16px”.% Like ems, percentages are also a relative unit. It is very usefulfor layout, not usually a good idea for type sizes.
- 79.Specifying ColorThere arethree different ways to define color in css.Hex Codes This is the most common way to identify colors in CSS. Thecode gives two characters to correspond to RGB values. Thenumber always has 6 characters (#44de42), unless all fourcharacters are the same, and you can shorten it (#444).RGB You can use a color’s RGB values with this syntax: p {color: rgb(34,123,125);}Color Names There are built-in color names that you can use, that willprovide generic hues: p {color: rgb(34,123,125);}
- 80.
- 81.Color: white, black,greyWhite = #ffffff, or #fffBlack = #000000, or #000Greys = #111111 – #999999
- 84.Type properties tolearn now:colorfont-familyfont-sizefont-weightfont-styleletter-spacingline-heighttext-aligntext-transform
- 85.Example values:color: #444444;font-family:"Times New Roman", Georgia, serif;font-size: 16px; (define in px, em, or %)font-weight: bold; (or by number, 400, 700)font-style: italic;letter-spacing: .02em;line-height: 1.6; (relative to whatever your type size is)text-align: left; text-transform: uppercase;
- 87.
- 88.List stylingLinks canbe styled just like any text, but havespecial properties. The most often used is “liststyle-type”, which allows you to control whetherbullets are used, and how they are styled.ul { list-style-type: none; padding: 0px; margin: 0px; }!!!
- 89.List stylingBy default,<li> elements are block-level elements(they stack on top of each other). You can forcethem to line up in a row by changing the displayproperty to “inline.”li { display: inline; }!!!
- 91.
- 92.Link statesLinks canbe styled just like any text, but havespecial pseudo-classes that allow you to definetheir behavior.a {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */When setting the style for several link states, thereare some order rules:— a:hover MUST come after a:link and a:visited— a:active MUST come after a:hover!
- 93.LinksBy default, linksare underlined. You can turn this off bychanging the “text-decoration” property.In the example below, the link will only have an underlinewhen the cursor is hovering over the element.a { color:#FF0000; text-decoration: none; } a:hover { color:#00FF00; text-decoration: underline; } !
- 94.