Intermediate to Advanced CSS

Intermediate to Advanced CSS

1. Text Styling & Formatting Targeting Element Tags

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Text Formatting with CSS</title>

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

<body>

    <h1>Text styling</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam modi repellat quaerat odit suscipit ea voluptatibus quasi ad hic optio aliquid eius est, 
        doloribus atque, mollitia eveniet! Rerum, culpa dignissimos.</p>

    <h2>A blockquote </h2>
    <blockquote>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, quos temporibus labore a laudantium facilis quibusdam unde 
        at dolor repellendus? Minus excepturi laborum assumenda, aliquid iusto quasi aut accusamus odio?</blockquote>

        <h3>More Text Styles</h3>
        <p>Some text here with extra HTML tags such as a <span>span tag</span>, <em>Simple emphasis</em>, and dont forget the <strong>strong tag</strong></p>

</body>
</html>

CSS

/* Text Formatting with CSS */

* {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 18px;
}

body {
    padding: 40px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #373737;
}

h1,h2,h3,h4,h5,h6 {
    margin: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

h1 {
    font-size: 3.6em; /* 3.6 x the base font size*/

}

h2 {
    font-size: 2.6em; /* 2.6 x the base font size*/
}

h3 {
    font-size: 1.6em; /* 1.6 x the base font size*/
    letter-spacing: -1px;
    text-indent: 80px;
    line-height: 1.3;
}

span {
    text-decoration: line-through;
}

em {
    text-transform: capitalize;
}

strong {
    text-transform: uppercase;
}

Browser

CSS.png

2. Borders

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Borders</title>
    <link rel="stylesheet" type="text/css" href="stylesheets.css">
</head>

<body>

  <h1>CSS Borders</h1>

  <div id="box1" class="border-box">
      Box with thin solid border
  </div>
   <div id="box2" class="border-box">
      Box with thin dashed border
  </div>
   <div id="box3" class="border-box">
      Box with thin dotted border
  </div>
   <div id="box4" class="border-box">
      Box with thin double border
  </div>
   <div id="box5" class="border-box">
      Box with thick solid border
  </div>
   <div id="box6" class="border-box">
      Box with thick dashed border
  </div>
   <div id="box7" class="border-box">
      Box with thick dotted border
  </div>
   <div id="box8" class="border-box">
      Box with thick double border
  </div>

</body>

</html>

CSS

.border-box {
    background-color: #fc3;
    margin: 0 0 20px;
    padding: 40px;
    width: 320px;
    text-align: center;
}

#box1 { border: solid 1px black; }
#box2 {border: dashed 1px black;}
#box3 {border: dotted 1px black;}
#box4 {border: double 3px black;}
#box5 {border: solid 4px black;}
#box6 {border: dashed 4px black;}
#box7 {border: dotted 4px black;}
#box8 {border: double 6px black;}

Browser

CSS Borders.png

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Styling Links</title>

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

<body id="styling-links">

  <div id="container">

    <h1>Styling Links</h1>

    <p><a href="/" id="link-1">Link #1</a></p>
    <p><a href="/" id="link-2">Link #2</a></p>
    <p><a href="/" id="link-3">Link #3</a></p>
    <p><a href="/" id="link-4">Link #4</a></p>


  </div><!-- #container ends-->

</body>

</html>

CSS

#styling-links {
    background: #333;
}

#styling-links #container {
    background: white;
    text-align: center;
    width: 640px;
    margin: 0 auto;
    padding: 40px;
}

a {
    display: inline-block;

}

/* unvisited link */
a:link {
    color: #fc3;
}

/* visited */

a:visited {
    color: #fc3;
}

/* hovered */

a:hover {
    color: aqua;
}

/* Active */

a:active {
    color: black;
}

a#link-1:link {
    background: blue;
    padding: 10px;
}

a#link-1:hover {
    background: pink;
    padding: 10px;
    color: purple;
}

Browser

styling.png

4. Styling Web Forms

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <title>Styling Forms</title>

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

<body>


    <div id="container">


        <form>
            <fieldset>
                <legend>Contact us</legend>

                <label class="form-name">You name</label>
                <input type="text" id="form-name">

                <label class="form-email">You email</label>
                <input type="email" id="form-email">

                <label class="form-address">You address</label>
                <input type="text" id="form-address">

                <label class="form-phone">You phone</label>
                <input type="tel" id="form-phone">

                <label id="form-message">Send a message</label>
                <textarea id="form-message"></textarea>

                <input type="submit" value="Send message">


            </fieldset>
        </form>
    </div><!-- container -->






</body>

CSS

#container {
    width: 600px;
    margin: 0 auto;
}

fieldset {
    padding: 40px;
    border: solid 1px #aaa;
    background: url('https://www.publicdomainpictures.net/pictures/200000/nahled/plain-blue-background.jpg');


}

fieldset legend {
    background: white;
    padding: 10px;
    border: solid 1px #aaa;
}


input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    padding: 10px;
    margin: 0 0 20px;
    border: solid 1px #454545;
    border-top: none;
    display: block;
    width: 50%;
    font-size: 14px;
    color: #777;
    font-family: monospace;
    text-transform: uppercase;

}
textarea {
    resize: none;
}

label {
    font-size: 12px;
    text-transform: uppercase;
    background: url('');
    display: block;
    width: 50%;
    padding: 2%;
    color: white;

}

input[type="submit"] {
    background: none;
    background: url('') repeat-x;
    height: 40px;
    border: solid 1px #777;
    padding: 0 40px;
    color: white;
}

input[type="submit"]:hover {
    cursor: pointer;
    border-color: #444;
}

input[type="submit"]:active {
    border-color: #111;
    outline-color: red;
}

Browser

form.png

5. Floats

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <title>CSS Floats</title>

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

<body id="floats">

    <div id="container">
        <h1>CSS Floats</h1>

        <div id="mainColumn">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In tenetur unde neque odio at incidunt aperiam dicta eius? Totam sapiente odio, ab culpa animi unde eos iste a inventore nemo?</p>
        </div>
        <div id="sidebar">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque sequi aliquid quidem animi autem, ducimus repellat at libero ea explicabo optio illo atque, error, velit perspiciatis distinctio fugiat labore quasi!</p>
            </div>

    </div>

</body>

</html>

CSS

#floats {
    background: #d41;
}

#floats #container {
    background: white;
    padding: 20px;
    height: 400px;
}


#mainColumn {
    width: 350px;
    float: left;

}

#sidebar {
    width: 250px;
    float: right;
}

Browser

floats.png

6. Relative, Absolute & Fixed Position

Relative position is positioned relative to its normal position. The fixed position is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The absolute position is positioned relative to the nearest positioned ancestor.