CSS Properties

Now that we’ve gone over adding HTML tags to the page, let’s cover adding styles to those tags. We can do quite a lot with styles! We can change:

  • Typography
  • Colors
  • Appearance (Corners, Borders, Decorations)
  • Layout
  • Position
  • Inline vs Block
  • Animations
  • and many more

CSS styles are always written in property: value pairs (like background: blue;) and terminated with a semicolon.

Applying CSS to an HTML file

CSS can be applied to HTML tags in three different ways.

  1. Inline using an HTML tag’sstyleattribute
    1. <div style="background: blue; color: white;">Hello </div>
  2. Via a <style> tag in the HTML page
  3. Through an external CSS file
    1. <link rel="stylesheet" href="./css-demo-finished.css" />

Targeting specific elements

Inline styles are always applied directly to the element you place them on, but <style> tags and external CSS files need a way to match elements with their respective style sets. This is done with CSS selectors. When selectors are combined with CSS styles, we call this a ruleset.

CSS rulesets take on the following form:

  1. selector1,
  2. selector2 {
  3.   property1: value1;
  4.   property2: value2;
  5. }

Here’s a more detailed view from Chris Eppstein:
image.png

Selectors can be a single tag, class, ID, or attribute. It can also be a combination of those elements.

Below is a series of selectors and property/value combinations that we’ll apply to our CSS demo page.

  1. /* Targeting the entire page */
  2. body {
  3.   font: 1.2em sans-serif;
  4. }
  6. /* Targeting an HTML tag */
  7. h1 {
  8.   /* Color name */
  9.   color: black;
  11.   /* 6-digit hex  */
  12.   background: #ababab;
  14.   /* Margin: specified separately for each side */
  15.   margin-bottom: 15px;
  16.   margin-top: 15px;
  18.   /* Shorthand: Padding applies to all sides  */
  19.   padding: 10px;
  21.   /* Border shorthand and 3-digit hex */
  22.   border: 1px solid #ddd;
  23. }
  25. /* Overriding inherited styles */
  26. span {
  27.   color: #004578;
  28. }
  30. /* Sibling selector */
  31. a ~ a {
  32.   /* Changing elements from inline to block */
  33.   display: block;
  34. }
  36. /* Targeting a class name  */
  37. .tiles {
  38.   display: flex;
  39. }
  41. /* Descendant selector */
  42. .tiles img {
  43.   width: 100%;
  44. }
  46. /* Direct descendant selector */
  47. .tiles > div {
  48.   /* rgb color */
  49.   background: rgb(10, 10, 10);
  50.   color: white;
  51.   flex-basis: 100%;
  52.   /* Padding/margin shorthand. Goes clockwise from top.
  53.   10px - all
  54.   10px 20px - top/bottom left/right
  55.   10px 20px 15px - top left/right bottom
  56.   */
  57.   padding: 10px 20px 15px;
  58.   margin: 10px 20px 10px 0;
  59.   border: 1px solid white;
  60. }
  62. /* Qualified selector */
  63. div.important-links {
  64.   background: #004578;
  65. }
  67. /* Style inheritance only works for unstyled elements */
  68. a {
  69.   color: white;
  70. }
  72. /* Hover pseudo-selector */
  73. a:hover {
  74.   color: #ccc;
  75. }
  77. /* Positional pseudo-selector  */
  78. .tiles > div:last-child {
  79.   /* overrides margin-right but leaves other margins alone */
  80.   margin-right: 0;
  81. }
  83. /* ID selector */
  84. #contact-form {
  85.   display: flex;
  86.   flex-direction: column;
  87. }
  89. /* Attribute selector */
  90. input[type='submit'] {
  91.   margin-top: 10px;
  92. }

注：本节 demo 中的 style.css 代码都已屏蔽，可以一步步取消屏蔽观察 CSS 效果。