CSS

CSS learning from EJ

Posted by Chaoli Zhang on August 27, 2017

CSS

A short introductory course on CSS by EJ, videos can be found here: CSS Introductory Course

Tutorial 0 - 4
  • background color: h1 {background-color: purple;}
    • h1 is called selector
    • Things in the {} called properties
    • The whole thing is called rules
  • multiple selectors: h1,h2 {background-color: purple;}
  • add a line to header and border:
    • box: border: 1px solid black;
    • line: border-bottom: 1px solid black;
<head>
    <style>
        h1, h2 {
            /*background-color: purple;*/
            border: 1px solid black;

        }
        p {
            color: red;
            font-size: 25px;
            font-family: Helvetica;

        }
    </style>
</head>
<body>

<h1> The fish website </h1>

<p> Welcome to the website </p>

<h2> This is subsection of Bass fish </h2>

<p> Bass fish is yummy </p>

</body>
Tutorial 5 CSS Inheritance

Inheritance.png

  • The rule will apply to sub-class, if there is nothing specified.
  • The rule at higher hierachy can be over-written at low hierarchy.
<head>
    <style>
        body {
            color: green

        }
        p {
            color:red;
            font-size: 25px;
            font-family: Helvetica;

        }
    </style>
</head>
<body>

<h1> The fish website </h1>

<p> Welcome to the website </p>

<h2> This is subsection of Bass fish </h2>

<p> Bass fish is yummy </p>

</body>
Tutorial 6 - 7 CSS classes
  • <p class='blue'></p>
  • <p class='red'></p>
  • add p.blue or p.red in style selector
  • or we can define a universal class : .blue or .red
  • multiple class: <blockquote class='cyan underline'>
<head>
    <style>

        .cyan {
            color: cyan;
        }
        .underline {
            text-decoration: underline;
        }
        p.blue {
            color:blue;
            font-size: 25px;
            font-family: Helvetica;

        }
        p.red {
            color:red;
            font-size: 25px;
            font-family: Helvetica;

        }
    </style>
</head>
<body>

<h1> The fish website </h1>

<p class='blue'> Welcome to the website </p>

<h2> This is subsection of Bass fish </h2>

<p class='blue'> Bass fish is yummy </p>

<p class='cyan'> Bass fish is yummy </p>

    <blockquote class='cyan underline'> Text in blockquote</blockquote>
</body>
Tutorial 8 - 9 font (size), color, line-height, text align
  • font-family: Verdana, Arial, Geneva, Arial Black
  • font-weight: lighter, normal, bold, bolder
  • font-style: italic, oblique

  • background-color: green

  • font-size: 25px
  • font-size: 150%
    • applied in sub hierarchy.
  • font-size: 1.2em
    • applied in sub hierarchy.
      • xx-extra_small
      • x-small
      • small=13px
      • medium=16px
      • large=18px
      • x-large
      • xx-extra_large
  • line-height: change the space between the text

  • text-align: center, left and right
<head>
    <style>
        body {
            color: green;
            font-family: Verdana, Arial, Geneva, Arial Black ;
            font-weight: lighter;
        }
        .cyan {
            color: cyan;
        }
        .underline {
            text-decoration: underline;
        }
        p.blue {
            color:blue;
            font-size: 25px;

        }
        p.red {
            color:red;
            font-size: 25px;

        }
    </style>
</head>
<body>

<h1> The fish website </h1>

<p class='blue'> Welcome to the website </p>

<h2> This is subsection of Bass fish </h2>

<p class='blue'> Bass fish is yummy </p>

<p class='cyan'> Bass fish is yummy </p>

    <blockquote class='cyan underline'> Text in blockquote</blockquote>
</body>
Tutorial 10 use external style sheet
  • external style sheet
    • <link rel="stylesheet" type="text/css" href="/css/test.css">
  • internal style sheet
    • <head> <style> blablabla</style></head>
  • inline
    • <h2 style="color: black"> This is subsection of Bass fish </h2>
<head>
<link rel="stylesheet" type="text/css" href="/css/test.css">
</head>
<body>

<h1> The fish website </h1>

<p class='blue'> Welcome to the website </p>

<h2> This is subsection of Bass fish </h2>
<h2 style="color: black"> inline style </h2>
<p class='blue'> Bass fish is yummy </p>

<p class='cyan'> Bass fish is yummy </p>

    <blockquote class='cyan underline'> Text in blockquote</blockquote>
</body>
Tutorial 17 -21 box model

box.png

  • background-color: purple;
  • padding: 20px;
    • padding-left
    • padding-right
    • padding-top
    • padding-bottom
    • padding: 1px (top) 1px (right) 1px (bottom) 1px (left)
  • border-color: black;
  • border-width: 5px;
  • border-style: solid;
    • The same as border: black 5px solid
  • margin: 20px;
    • margin-left: auto => center
    • margin-right: auto => center
    • margin-top
    • margin-bottom
  • background-image: url(location to the file)

<head>
<link rel="stylesheet" type="text/css" href="/css/test.css">
</head>
<body>

<h1> The fish website </h1>

<p class='blue'>

Kevin Adams
1 month ago
Love your tutorials, you teach very well. Thanks
REPLY
1
Devan Farrell
<img class="imagec" src="/img/Web_design/CSS/CSS_beginner_box.png">
</p>

</body>

Tutorial 22 id attribute

Put this in css file:

#myownidstyle {

    display: block;
    margin-left: 5px;
    margin-right: auto;

}
  • replacing class with id: <p id="myownidstyle"></p>
Tutorial 26-27 div and span element
  • div: divide web page into logical sections
    • they don’t do anything particular in terms of visual effect
  • span: similar to div but on smaller scale
    • inline <span class='spanclass'></span>
<head>
<link rel="stylesheet" type="text/css" href="/css/test.css">
</head>
<body>

<h1> The fish website </h1>

<div id="divmain">
<p class="red">
first paragraph
<img class="imagec" src="/img/Web_design/CSS/CSS_beginner_box.png">
</p>
</div>

<div>
<p class='blue'>
second paragraph
<img class="imagec" src="/img/Web_design/CSS/CSS_beginner_box.png">
</p>
</div>


</body>
Tutorial 30 - 32 block, inline elements
  • block and inline elements
    • block: e.g <p>, <h1>
    • inline: e.g. <img>, <span>
    • convert inline to block display: block;
Tutorial 33 - 35 element position
  • float: to place element up to where, the default is from left to right
  • absolute:
    • position: absolute;
  • fixed:
    • fixed
Tutorial 36 - 38 overflow, cursor
  • overflow: scroll
  • cursor: crosshair
    • cursor: url('something.ico'), default
Tutorial 39 text and images
  • in your css file:
    • .image {float:left;} and <img class='image' src="bla.jpg">
Tutorial 40 - 43 menu
  • vertical:
    • HTML: <ul><li><a href="Home"></a></li></ul>
    • CSS: ul li a { styles as you need}
    • CSS: ul li a: hover { background-color: red}
  • horizontal:
    • HTML: same as vertical but need a div element <div></div>
    • CSS: #nav ul {}, #nav li {} and #nav a {} (#nav a: {} hover)
    • CSS: display: inline
Tutorial 46 - 47 forms
<form>
    <p>
        <label for="name">Name</label>: <input type="text" name="name"> <br><br>
        Age: <input type="text" name=""> <br><br>
    </p>
</form>

Tutorial 48 - 55 selector

selector.png

  • child selector: similar to descendant selector
    • blockquite.test>b
  • strategies:
    • #left {border: solid 2px} #middle {border: solid 2px} #right {border: solid 2px} can be simplified #left #middle #right {border: solid 2px}
  • sibling selector:
    • CSS file: - for next adjacent sibling h2-p []
    • CSS file: ~ for general adjacent sibling h2-p []
    • HTML and CSS: Code
  • attribute selector:
    • HTML: <p lang="fr"> Some text </p>
    • CSS: p[lang] {background-color:orange}
    • CSS: p[lang="fr"] {background-color:orange}
    • anything begins with fr: p[lang^="fr"] {background-color:orange}
    • anything ends with fr: p[lang$="fr"] {background-color:orange}
  • nth child selector (even or odd):
    • #right p:nth-child(even) {}
  • not selector:
    • selector: p{color:red;}
    • not selector: :not(p) {color:cyan;}
  • first selector:
    • p::first-letter {color=purple;font-size=24px}
Tutorial 56 - 58 opacity and gradients
  • opacity: #box {opacity:0.5}
  • gradients: #box {background: linear-gradient(20deg, yellow, blue 20%)}
  • gradients: #box {background: linear-gradient(to right, rgba(255,255,0,0.3), blue 20%)}
Tutorial 59 - 60 shadow
  • text shadow: #text1 {text-shadow: 3px 3px orange}
  • text shadow (double): #text1 {text-shadow: 3px 3px orange, 3px 3px red;}
  • box shadow: #box1 {box-shadow: 3px 3px orange}
  • box shadow: #box1 {box-shadow: inset 0 0 15px black}