Getting started with Code
Editor and setup to write CSS - create an html file add CSS
Tools needed - browser to run the html code.
Chrome Browser comes with Developer tools that are a powerful way to interact with your
code, including debugging, inspecting and viewing changes.
[Link]
Online Code Editor - great to practice code without a need for download of applications
[Link]
Help and Code Samples - MDN developer of Firefox has an excellent resource with code
samples and browser compatibility/
[Link]
Code Editor - write code with a code editor as it can help structure and suggest tags for code.
[Link]
Adding Styling to your HTML
● Google Chrome Dev Tools
● Adding Styling to HTML tags style <style> link to CSS file
● CSS rule CSS Syntax (Selector) (Declaration) {Property:value}
● Element Selection by tag name, id, class
Styling Overview
● Comments in Code /* */
● find help with CSS
● Google Fonts
● [Link]
cs
● [Link]
Laurence Svekis Course [Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
<title>My Page</title>
</head>
<body>
<div>
<h1 class="blue">Hello World!</h1>
<div style="font-size:2em">Welcome to my site.</div>
<hr>
<p title="My Name">My name is <span
class="blue">Laurence</span> <span></span>Svekis</span>.</p>
</div>
<hr>
<h2 class="blue" >Heading 2</h2>
<h4 class="red">Heading 4</h4>
Laurence Svekis Course [Link]
<h6 >Heading 6</h6>
<span class="h6">Heading 6 #2</span>
<div id="bottom">
hello world blah blah blah. <a href="#myID">Go to the top
element with ID of myID.</a>
<div class="green" >TEST</div>
</div>
</body>
</html>
/*
Comments
*/
@import
url('[Link]
ay=swap');
body {
font-family: 'ZCOOL KuaiLe', cursive;
}
h1, h6, h4{
background-color: purple;
}
Colors Background and Font Color
● Colors - Color types named colors HEX RGB RGBA
● Background - color - image - repeat - attachment - position - background shorthand
[Link]
[Link]
.blue {
background-color: rgba(255,0,255,0.5);
Laurence Svekis Course [Link]
color:white;
}
.red{
background-color:#ff00ff80;
color:rgb(255,255,255);
}
.h6{
background-color:hsl(120,50%,50%);
color:hsla(0,100%,50%,0.5);
}
body{
background-color:#000000;
color:violet;
}
Box Model Border Padding Margin
● Box Model - Borders - Margins - Padding - Height and Width
[Link]
Laurence Svekis Course [Link]
div {
border-style: solid;
border-width: 1px;
border-color:red;
}
h2{
border:solid 1px blue;
background-color:aqua;
width:100px;
height:20px;
overflow:hidden;
margin-top:10px;
margin-bottom:30px;
margin-right:20px;
margin-left:40px;
}
.red{
background-color:red;
Laurence Svekis Course [Link]
border:1px dotted black;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
margin:10px 20px 30px 40px;
}
#bottom{
border:1px dotted black;
padding:10px 20px 30px 40px;
background-color:yellow;
}
Text options
● Text - text-align text-decoration text-transform
Laurence Svekis Course [Link]
#bottom {
color:red;
border:1px solid black;
padding:20px;
margin-top:50px;
line-height: 1;
text-align: left;
text-transform: uppercase;
text-indent: 30px;
letter-spacing:5px;
word-spacing: 20px;
white-space: normal;
}
.small{
font-size:0.6em;
background-color:yellow;
vertical-align:text-top;
text-decoration:line-through;
}
a{
text-decoration: none;
text-shadow: 5px 2px 5px black;
}
Fonts and Font Styles
● Fonts - font-style Google Fonts
Laurence Svekis Course [Link]
[Link]
[Link]
Laurence Svekis Course [Link]
@import
url('[Link]
swap');
body{
font-family: 'Fira Sans', sans-serif;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
font-size:100%;
}
h1{
font-size: 12vw;
color:blue;
text-align: center;
}
.h6{
color:aquamarine;
font: italic bold 1.5em Arial;
background-color:black;
}
#bottom{
font-size: 1.5em;
}
.bigger{
color:red;
font-size:16px;
}
Laurence Svekis Course [Link]
Link States Pseudo-Classes
● Link states - a:link a:visited a:hover a:active
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Servics</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
a:link{
color:red;
Laurence Svekis Course [Link]
}
a:visited{
color:chartreuse;
}
a:hover{
color:darkblue;
text-decoration: none;
}
a:active{
color:darkmagenta;
}
h1{
background-color:black;
color:white;
}
h1:hover{
background-color:darkorange;
}
h1:active{
background-color:red;
}
#bottom span:first-child {
color:red;
}
Display Properties
Laurence Svekis Course [Link]
● Display Properties - inline - none - block
[Link]
li {
background-color:black;
display:inline-block;
padding:10px;
list-style: none;
}
ul {
margin:0;
padding:0;
}
a {
color:white;
}
#bottom {
display:block;
}
span{
visibility:visible;
display:none;
border:1px solid black;
font-size:1em;
}
<nav>
<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Servics</a></li>
<li><a href="#3">About</a></li>
Laurence Svekis Course [Link]
<li><a href="#4">Contact</a></li>
</ul>
</nav>
CSS Position
● Position : static relative fixed absolute sticky
header{
background-color:rgba(255,0,0,0.5);
padding:10px;
position:static;
}
header{
position:relative;
}
header{
position:fixed;
}
header{
position:absolute;
top:10px;
left:10px;
width:200px;
height:200px;
}
header{
position:sticky;
}
Laurence Svekis Course [Link]
CSS Float
● Float and clear left right and none
Laurence Svekis Course [Link]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
<title>My Page</title>
</head>
<body>
<header>
<h1>Welcome to my Website</h1>
</header>
<nav>
<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Servics</a></li>
<li><a href="#3">About</a></li>
<li><a href="#4">Contact</a></li>
</ul>
</nav>
<section>
<article class="left">
<h1 class="blue">Hello World!</h1>
<div style="font-size:2em">Welcome to my site.</div>
<hr>
<p title="My Name">My name is <span
class="blue">Laurence</span> <span></span>Svekis</span>.</p>
<span class="bigger">Cascading Stylesheets </span>— or CSS
is used to style it and lay it out. <img src="[Link]"> For
example, you can use CSS to alter the font, color, size, and
spacing of your content, <span>HTML</span>split it into
<span>HTML</span> multiple columns, or add animations and other
decorative features.<br><span>HTML</span>
Laurence Svekis Course [Link]
</article>
<aside>
side memu
</aside>
</section>
<footer id="bottom">
<div>Thank you for visiting Laurence Svekis</div>
<a href="#myID">Go to the top element with ID of myID.</a>
<div class="green" >TEST</div>
</footer>
</body>
</html>
li {
float:right;
}
li {
float:left;
}
ul{
border:1px solid black;
padding:30px;
}
article{
width:80%;
background:lightpink;
float:left;
}
aside{
width:20%;
background:lightblue;
Laurence Svekis Course [Link]
float:left;
}
img{
float:right;
}
footer{
clear:both;
background:lightslategray;
}
Useful CSS Properties
● Max Width
● Overflow
● Z-index
● outline
header {
outline-color: magenta;
outline-width: 2px;
outline-style: solid;
border: 5px solid yellow;
max-width:800px;
margin:auto;
}
ul{
z-index: -1;
position:fixed;
top:0px;
left:0px;
Laurence Svekis Course [Link]
outline: solid 2px green;
background-color:midnightblue;
}
article, aside{
position:absolute;
left:0px;
top:0px;
}
article{
background:rgba(255,0,0,0.5);
z-index: 5;
}
aside{
background:blue;
z-index: 3;
}
footer{
font-size: 2em;
height:20px;
width:70%;
background:black;
color:white;
overflow:auto;
margin-bottom:100px;
}
Laurence Svekis Course [Link]
CSS Combinators
● CSS combinators for selection - space child selector >
[Link]
Laurence Svekis Course [Link]
header h1{
background-color: red;
}
article span{
background-color:pink;
}
article > span{
background-color:yellow;
}
article > p ~ span{
background-color:purple;
}
article > p + span{
background-color:rgb(27, 204, 56);
}
a[href="#2"] {
color:red;
background-color: moccasin;
}
h1,h2,h4,h6{
padding:10px;
border:5px dotted pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Laurence Svekis Course [Link]
<link rel="stylesheet" href="[Link]">
<title>My Page</title>
</head>
<body>
<header>
<h1>Welcome to my Website</h1>
</header>
<h1>TEst H1</h1>
<nav>
<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Servics</a></li>
<li><a href="#3">About</a></li>
<li><a href="#4">Contact</a></li>
</ul>
</nav>
<section>
<article class="left">
<h1 class="blue">Hello World!</h1>
<div style="font-size:2em">Welcome to my site.</div>
<hr>
<p title="My Name">My name is <span
class="blue">Laurence</span> <span>Svekis</span>.</p>
<span class="bigger">Cascading Stylesheets </span>— or CSS
is used to style it and lay it out. <img src="[Link]"> For
example, you can use CSS to alter the font, color, size, and
spacing of your content, <span>HTML</span>split it into
<span>HTML</span> multiple columns, or add animations and other
decorative features.<br><span>HTML</span>
</article>
<aside>
side memu
Laurence Svekis Course [Link]
</aside>
</section>
<footer id="bottom">
<div>Thank you for visiting Laurence Svekis</div>
<a href="#myID">Go to the top element with ID of myID.</a>
<div class="green" >TEST</div>
</footer>
</body>
</html>
CSS Pseudo Elements
● Pseudo-Elements - ::first-line , ::first-letter, ::after
[Link]
article::first-line{
color:navy;
}
article::first-letter{
color:red;
font-size:3em;
}
article::before{
content:'NEW content';
}
article::after{
content:'After';
}
Laurence Svekis Course [Link]
Responsive Website CSS Float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Laurence Svekis Course [Link]
<link rel="stylesheet" href="[Link]">
<title>My Page</title>
</head>
<body>
<header class="header">
<h1>Welcome to my Website</h1>
</header>
<div class="main">
<aside class="col">
<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Servics</a></li>
<li><a href="#3">About</a></li>
<li><a href="#4">Contact</a></li>
</ul>
</aside>
<article class="left col">
<h1 class="blue">Hello World!</h1>
<div style="font-size:2em">Welcome to my site.</div>
<hr>
<p title="My Name">My name is <span
class="blue">Laurence</span> <span>Svekis</span>.</p>
<span class="bigger">Cascading Stylesheets </span>— or CSS
is used to style it and lay it out. For example, you can use
CSS to alter the font, color, size, and spacing of your content,
<span>HTML</span>split it into <span>HTML</span> multiple
columns, or add animations and other decorative
features.<br><span>HTML</span>
</article>
<aside class="col">
side memu
</aside>
Laurence Svekis Course [Link]
</div>
<footer class="footer">
<div>Thank you for visiting Laurence Svekis</div>
<a href="#myID">Go to the top element with ID of myID.</a>
<div class="green">TEST</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
<title>My Page</title>
</head>
<body>
<header class="header">
<h1>Welcome to my Website</h1>
</header>
<div class="main">
<aside class="col">
<ul>
<li><a href="#1">Home</a></li>
<li><a href="#2">Servics</a></li>
<li><a href="#3">About</a></li>
<li><a href="#4">Contact</a></li>
</ul>
</aside>
<article class="left col">
<h1 class="blue">Hello World!</h1>
<div style="font-size:2em">Welcome to my site.</div>
Laurence Svekis Course [Link]
<hr>
<p title="My Name">My name is <span
class="blue">Laurence</span> <span>Svekis</span>.</p>
<span class="bigger">Cascading Stylesheets </span>— or CSS
is used to style it and lay it out. For example, you can use
CSS to alter the font, color, size, and spacing of your content,
<span>HTML</span>split it into <span>HTML</span> multiple
columns, or add animations and other decorative
features.<br><span>HTML</span>
</article>
<aside class="col">
side memu
</aside>
</div>
<footer class="footer">
<div>Thank you for visiting Laurence Svekis</div>
<a href="#myID">Go to the top element with ID of myID.</a>
<div class="green">TEST</div>
</footer>
</body>
</html>
Laurence Svekis Course [Link]
Responsive Website Flexbox
@import url('[Link]
* {
box-sizing: border-box;
}
body {
font-family: 'Indie Flower', cursive;
}
Laurence Svekis Course [Link]
.header {
background-color: skyblue;
text-align: center;
padding: 20px;
text-transform: uppercase;
}
ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
padding: 5px;
li:hover {
background-color: steelblue;
}
li:hover a {
color: white;
}
li a {
text-decoration: none;
.main {
display: flex;
flex-direction: column;
}
.main article {
flex: 3;
padding: 10px;
}
Laurence Svekis Course [Link]
.main aside {
flex: 1;
text-align: center;
}
.col {
border: 1px solid black;
}
.footer {
background-color: slategrey;
padding: 20px;
text-align: center;
font-size: 0.9em;
}
@media (min-width:640px) {
body {
background-color: #ddd;
}
.main {
flex-direction: row;
}
ul {
flex-direction: column;
}
li {
padding: 10px;
}
}
Laurence Svekis Course [Link]
Responsive Website CSS Grid
* {
box-sizing: border-box;
}
body{
background-color:#ddd;
Laurence Svekis Course [Link]
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.header , .footer{
background-color: black;
color:white;
text-align: center;
padding:10px;
}
.main{
display:grid;
grid-template-areas:
'cola colb colb colc';
}
ul {
margin:0px;
padding:0px;
}
li{
list-style-type: none;
}
li a{
text-decoration: none;
display:block;
background-color:blue;
color:white;
text-align: center;
}
li a:hover{
background-color:red;
}
.col{padding:5px;}
.main aside:first-child{
grid-area: cola;
background-color:steelblue;
padding:20px;
}
.main article{
grid-area: colb;
background-color:white;
}
Laurence Svekis Course [Link]
.main aside:last-child{
grid-area: colc;
background-color:red;
}
.footer{}
@media (max-width:640px){
.main{
grid-template-areas:
'cola'
'colb'
'colc';
}
}
Laurence Svekis Course [Link]