{"id":740,"date":"2020-01-04T16:34:18","date_gmt":"2020-01-04T21:34:18","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=740"},"modified":"2020-01-04T16:34:18","modified_gmt":"2020-01-04T21:34:18","slug":"intro-css","status":"publish","type":"page","link":"https:\/\/nmi.cool\/webdev\/intro-css\/","title":{"rendered":"CSS"},"content":{"rendered":"\n
\"\"
Photo by Efe Kurnaz<\/a> on Unsplash<\/a>.<\/figcaption><\/figure>\n\n\n\n

Cascading Style Sheets (CSS)<\/strong> controls the style of webpages. <\/p>\n\n\n\n

By creating CSS rules<\/strong>, you can add styles to certain elements in your HTML pages. For example, you can change your background color, set your font to Helvetica, or italicize a subheading\u2014you get the idea.<\/p>\n\n\n\n

First, it\u2019s important to identify two different types of HTML elements.<\/p>\n\n\n\n

    \n
  1. Block elements<\/strong> always start on a new line. These include tags such as <h1>, <p>, and <div>.<\/li>\n\n\n\n
  2. Inline elements <\/strong>flow within the text. They don\u2019t naturally start on a new line (think bolding text, such as <b>, adding images, <img>). <\/li>\n<\/ol>\n\n\n\n

    When it comes to visualizing CSS, pretend that each HTML element has an invisible block around it. We will be applying rules to these invisible blocks\u2014rules that dictate the style of that particular element.<\/p>\n\n\n\n

    Three ways to add style<\/h2>\n\n\n\n
      \n
    1. Inline CSS: <\/strong>the least elegant of all the ways to add CSS to your HTML. With inline styling, you add your CSS style to every element on the page. This is the least efficient way to add CSS because you had to modify every single HTML element, one by one. <\/li>\n\n\n\n
    2. Internal CSS: <\/strong>A slightly quicker way to add CSS is with <style><\/style><\/code> tags within the <head><\/code> tag of your page. This is best when you are applying styles to only ONE webpage.<\/strong><\/li>\n\n\n\n
    3. External CSS: <\/strong>The third, and most professional way, is to create an external stylesheet. This is a separate .css<\/code> file that is linked to each HTML file you\u2019d like to style.\u00a0This way, you can create one master stylesheet to rule them all. This is what we’ll use for every graded project you turn in for this class. <\/li>\n<\/ol>\n\n\n\n

      Inline CSS<\/h2>\n\n\n\n

      Inline CSS is clunky and inefficient, and best if you’re only targeting one particular HTML element. To write inline CSS, you modify your already existing HTML element tag to include style.<\/p>\n\n\n\n

      <h3 style=\"font-size: 36px\"> This title is now 36 px. <\/h3><\/code><\/pre>\n\n\n\n
      Internal stylesheets<\/h2>\n\n\n\n
      To add an internal stylesheet, directly under your title tags, in the <head><\/code> section, you’d add style tags:<\/p>\n\n\n\n
      <!doctype html> \n<html> \n<head>     \n    <title>Hello world!<\/title> \n    <style> Add your CSS rules here. <\/style><\/strong>\n<\/head> \n\n<body> \n\n<\/body> \n<\/html><\/code><\/pre>\n\n\n\n
      To start stylin’, all you need to do is write some CSS rules in between the style tags.<\/p>\n\n\n\n
      External stylesheets<\/h2>\n\n\n\n
      Within your <head><\/code> tag in your HTML files, you can link to an external stylesheet link:<\/strong><\/p>\n\n\n\n
      <link href=\"css\/style.css\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\n
      Please note there is no closing tag<\/strong>, meaning, this is an empty element. <\/p>\n\n\n\n
      The href<\/code> portion points to the CSS file, which is usually located in a folder appropriately named css.<\/code> If your file is named something besides style.css<\/code> or housed in a different folder, you’ll need to update the href<\/code> value so that it matches your file name and location. 

      Rel<\/code> stands for relationship.<\/p>\n\n\n\n
      Additionally, you can link multiple stylesheets to one HTML page.<\/p>\n\n\n\n
      Note:<\/strong> Older versions of HTML will have you also include type=\"text\"<\/code> in the stylesheet link. If you see this, just know that it refers to the type of document being linked. It won’t hurt to include it, but you don’t technically need it.<\/p>\n\n\n\n
      CSS Rules<\/strong><\/h2>\n\n\n\n
      This is the basic structure of a CSS rule:<\/p>\n\n\n\n
      h1 {font-family: Georgia; \ncolor: blueviolet;}\n\np {font-size: 16px; \nfont-family: Verdana;}<\/code><\/pre>\n\n\n\n
      Selector: <\/strong>h1, p 
      The selector refers to the element you want the style applied to.

      Declaration: <\/strong>{font-family: Georgia; color: blueviolet;}
      The declaration is the part in the curly brackets. The declaration includes information on how the elements should be styled, written in the form of properties and values. 

      In other words: selector {declaration}<\/strong><\/p>\n\n\n\n
      Properties and values:<\/strong> {property: value; property: value;}
      Within the declaration, you have properties<\/strong> followed by values<\/strong>. Each property is separated by a semi-colon. 

      In the above example, font-family is a property, followed by the value of Georgia. <\/p>\n\n\n\n
      Adding colors<\/h2>\n\n\n\n
      The predefined color options<\/strong> (the ones that appear as simple names such as blueviolet) are ones recognized by many browsers.<\/p>\n\n\n\n
      Hex codes <\/strong>are another way to add color. Hex codes are six-digit codes that represent the amount of red, green, and blue in that particular shade. They always start with a hashtag, for example, #BA0C2F<\/strong> is UGA’s official Bulldog Red.<\/p>\n\n\n\n
      To change the color of a paragraph, you add a “p” selector followed by the declaration: {color: green;}<\/p>\n\n\n\n
      <!DOCTYPE html>  \n     <title>Hello World!<\/title> \n     <style>\n           p {color: green;}<\/strong>\n     <\/style>\n<\/head> \n<body> \n   <p> This text is now green. <\/p>\n<\/body> \n<\/html> <\/code><\/pre>\n\n\n\n
      Selecting colors<\/h2>\n\n\n\n
      Colors must have high contrast<\/strong>\u2014meaning, you would never have light gray text on a medium gray page; or pink text against a purple background. <\/p>\n\n\n\n
      Text is easiest to read when there is high contrast between colors, especially for accessibility purposes.<\/p>\n\n\n\n
      Here are two of my favorite websites that generate color combinations:<\/p>\n\n\n\n