CSS Reference Page

Basic CSS

A CSS rule set consists of a selector and a declaration block:

A CSS declaration always ends in a semi-colon and declaration groups are surrounded by curly braces:

p {color:green; text-align:center;}

To make it more readable – you can put one declaration on each line:

p {
    color: green;
    text-align: center;}
   }

You can apply CSS to:

Any HTML element including body, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, table, td, tr, th and more.
Class or ID Selectors

Linking Your Style Sheet

View Full Topic

Open up the .html file you want the style sheet to apply to. For this lesson, this should be your index.html, week1.html and vacation.html files.
Add this line in the <head> section right under the <title>

<link rel=“stylesheet” href=“style.css”>

The beginning of your HTML file should look like this now:

<!DOCTYPE html>
<html>
<head>
   <title>CSS Example</title>
   <link rel=“stylesheet” href=“style.css”>
</head>
<body>
    !-- put some html code in here --!
</body>
</html

Create your style sheet - no beginning or ending syntax. Here's a sample one.

p {
   color:blue;
}
h1 {
   color: red;
}

Fonts

View Full Topic

How to Pick Your Font Family

Fun: Pick your fun font. A great resource is Google Fonts.
Web Safe: Pick your an interesting and similar looking font to be your second choice from a list of web safe fonts.
Generic: pick a third choice which is generic like serif, sans-serif, monospace, cursive or fantasy as a back up.

Put it all together

So...got your font family all together? Here are some examples of font families if you get stuck!z

Some options:

font-family:”Bradley Hand”, “Brush Script MT”, cursive
font-family:” Alegreya SC”, Copperplate, fantasy
font-family:Poppins, Roboto, sans-serif;
font-family:Merriweather, Georgia, serif;
font-family:”Source Code Pro", Courier, monospace;

Here is a link to groups of font families.

Web Safe Fonts

Sans-Serif	Serif	Monospace	Cursive	Fantasy
Arial	Times	Andale Mono	Brush Script MT	Impact
Arial Black	Times New Roman	Courier New	Comic Sans MS	Luminari
Helvetica	Times	Courier		Chalkduster
Verdana	Didot	FreeMono		Jazz LET
Trebuchet MS	Georgia	Monaco		Blippo
Gill Sans	Palatino	Lucida Console		Stencil Std
Noto Sans	Bookman			Marker Felt
Optima	New Century Schoolbook			Trattatello
Arial Narrow	American Typewriter			Copperplate
Roboto	Garamond			Papyrus
Optima	Cambria
Montserrat	Garamond
Lato	Perpetua
Calibri	Candara
Open Sans

Text Properties

View Full Topic

font-size: sets the size of the text. The value can be:

Absolute: – doesn’t change with browser changes – use pixels.

    body{font-size: 16px;}

Relative: sets size relative to surrounding elements – use em. 1em is equal to the current font size and the default text size in browsers is 16px. So, the default size of 1em is 16px.

     h1{font-size: 2.5em;}
     p{font-size: 1.25em;}
     li{font-size: .875em;}

Best way - set body to an absolute font-size and then do all the other elements using relative size. If you want to make everything bigger - can simply reset the body's font-size

font-weight Determines whether the text is bold. Most common use is:

font-weight: bold

Other values are bolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700(same as bold), 800 or 900

Test it out.
font-style: Has three values normal, italic or oblique (leaning).

font-style: italic;
font-style: oblique;

text-decoration
States whether text has a line running under, over of through it.

/* underlines the text */
text-decoration: underline;

/* places a line above the text. */
text-decoration:overline; 

/*  puts a line through the text (“strike-through”). */
text-decoration: line-through;

text-transform
Changes the case of the text

/* turns the first letter of every word into uppercase. */
text-transform: capitalize;

/*turns everything into uppercase. */
text-transform: uppercase;

/*turns everything into lowercase. */
text-transform:lowercase;

Color

View Full Topic

color sets the font color
background-color sets the color of the background or the white space surrounding the text.

body{ 
  background-color:#1FD4E4;
  color:#6b6b6b;
} 
p{
 background-color: #8ce047;
 color:#0eb6c9;
}

Want Gradients? Go see this page!

Specifying Color Values

There are three methods to specify the color in CSS.

- a HEX value – like #ff0000
- an RGB value – like rgb(255,0,0)
- a color name – like red. There are 140 color names that are supported by your browser. Everything from PapayaWhip to Blanched Almond to PeachPuff to GhostWhite. Take a look here for the full list.

Background Images

View Full Topic

The background-image property allows you to put images in the background. In addition, you can position the images, repeat them and size them.

body{background-image: url("stevejobs.png"); }

background-repeat: allows you to choose how to repeat the image. To see it in real - look here. Options include:

repeat
repeat-x
repeat-y
no-repeat

Shorthand Property

Even easier? You can do all these steps using the shorthand property. (Try it out!) This combines the following properties - you don't have to use them all but they must be in the right order even if some are missing:)

background-color
background-image
background-repeat
background-attachment
background-position

body { background: #ffffff  url("apple.png ") no-repeat right top; }

Box Model

View Full Topic

Margins, padding and borders are all part of what’s known as the box model.

Content – The content of the box, where text and images appear.
Padding – Clears an area around the content. The padding is transparent.
Border – A border that goes around the padding and content - it can have a color.
Margin – Clears an area outside the border. The margin is transparent.

Padding

View Full Topic

Apply it to all four sides evenly.

p{
   padding: 50px;
}

Apply it to each side.

p{
   padding-top: 25px;
   padding-bottom: 100px;
   padding-right: 50px;
   padding-left: 150px;
}

Here we set the padding for the top and bottom as one setting and the right and left as one.

p{
   padding: 25px 50px; /* top and bottom are padded 25 px
                        right and left are 50px */
}

Padding Shorthand property

Allows you to easily set the padding for all four sides you can use this. Set the dimensions in this order: top right bottom left.

Note: this is widely used and comes in very handy!

p{
   padding: 100px 5px 100px 5px;  /* top right bottom left */
}

Borders

View Full Topic

Borders work similar to padding however instead of adding space -they add lines around the element. You can set the type of border (line, dotted line, double line and more), color and width of the border.

Border Shorthand

table{
  border: 10px dotted #8ce047;
}

Border Style

This is the only property that is required. The values can be:

solid	dotted
dashed	double
groove	ridge
inset	outset.

The example below gives the table a solid border around it.

table {  
  border-style:solid;
}

Or different styles for different sides:

table{
   border-top-style: dotted;
   border-right-style: dashed;
   border-bottom-style: groove;
   border-left-style: solid;
 }

Can also set border width and color.

table { 
   border-style: solid;
   border-width: 3px;
   border-color: #1FD4E4;
}

Margins

View Full Topic

Margins work very similar to padding except that they add space outside the element. What does that mean? Simply, that you cannot set the background-color. Margins are transparent which means it takes on the color of whatever element is behind your element - such as the body or another element.

Sets margin the same on all four sides:

p{
   margin: 50px;
}

Sets margin differently on each side:

p{
   margin-top: 125px;
   margin-bottom: 25px;
   margin-right: 300px;
   margin-left: 10px;
}

Shorthand Property

As usual, the shorthand property allows us to set multiple properties in one line of CSS. Here you would use this order to set all the margins: top right bottom left;

p{
   margin: 100px 50px 100px 50px;
}

Or these other variations:

p{
   margin: 25px; /* all four sides have a margin of 25px*/
}
p{
   margin: 25px 50px; /* top and bottom have 25px margin
                         and right and left are 50px */
}

pseudo Classes

View Full Topic

The ones that are the most common and the most useful are for links. You attach them on to the the <a> tag using a colon followed by the name of the pseudo class.
Here is a list of the ones used with links:

:link – style all links
:visited – style links that have already been clicked on
:active – style link that has been clicked on
:hover – style link that is being hovered over
:focus – style something that has attained focus.

a:hover{
   text-decoration:underline;
   color:#0EB6C9;
}

Some Other Pseudo Classes

first-child: styles something only if it is the very first descendant of the element.
first-letter: styles something only if it is the very first letter of the element.
first-line: styles something only if it is the very first line of the element.

border-radius: Curved borders

View Full Topic

Curved Boxes

border-radius - allows rounded corner to things with either a border, background color or background image. You simply set the number of pixels - the higher the bigger the curve. The smaller the number the less curve.

border-radius: 15px;

box-shadow: shadows on boxes

Opacity - making color lighter and transparent

View Full Topic

Changing the Opacity of the Background Color

Opacity is a term which means how much of something is shown. The default is generally a 100% opacity but you can mute colors by declaring a lesser amount.

In CSS - 1 stands if for 100% and then anything between 0 and 1 represents the percentage.
In the example below, the first box is at 20%, the second 40%, the third 60%, the fourth 80% and finally the last box is at full opacity or 100%.

Text Shadows

Selectors

Full Lesson

To apply specific styles to specific elements - we use class and id selectors.

In CSS you declare these two types of selectors as follows:

A class selector is a name preceded by a full stop .
An ID selector is a name preceded by a hash tag or number character #.

So the CSS might look like:

/* this is an id selector */
#top{
   background-color:#cccccc; 
   padding: 20px;
}

/*this is a class selector*/
.intro{
   color: red;
   font-weight: bold;
}

The HTML refers to the CSS using the attributes id and class name. It could look like this.

   <h1> Coding Class</h1>
    <p id=“top”>What we like best about coding class</p>
    <ol>
       <li class="intro">Learning</li>
       <li>Doing cool things </li>
       <li>Getting unstuck</li>
    </ol>
   <p>This is a great class but a little chaotic sometimes</p>
   <p class="intro">But we are learning lots!!!</p>
   <p>Sometimes...</p>

That looks like this:

div and span tags

Full Lesson

HTML tags apply meaning usually – p makes a paragraph, h1 makes a heading and so on.
Span and div apply no meaning – used to group together a chunk of HTML and apply styles to that with the class and id selector.
The main difference is that span is inline whereas div is usually a block line.

Example using both div and span. First the HTML.

<div id=“scissors”>
   <p>Running with scissors is <span class="paper">crazy</span>.
   Sometimes running with other objects can be difficult too. 
   But <span class="paper">scissors</span>.</p>
   <p>So, don't do it!  Okay?</p>
</div>

And the CSS.

#scissors{
  color:#27BCCE;
  font-size:16px;
}
.paper{
  font-size:48px;
  font-type:italic;
  color: #FF5722;
}

And the final result

Applying CSS Styles to Selectors

View Full Topic

To apply a style to certain tables create CSS like this:

table.orange{background-color: orange;}

Then, in your HTML you would use this:

<table class="orange">
   <tr>
      <td>1</td>
      <td>2</td>
   </tr>
</table>

Nesting

If you are smart about how you make your CSS, then you can keep number of class or ID selectors lower. You can specify properties to selectors within other selectors.

#first{
   background-color:#0EB6C9;
   padding:10px;
}

#first p{
   color:#ffffff;
}
#first h1{
   font-weight: bold;
   font-size: 1.4em;
}

This removes the need for classes or IDs on the p and h1 tags in a file like this.

<div id="first">
   <h1>This is my first header</h1>
   <p>I'm going to talk about how crazy my son is</p>
   <p>Would you agree?</p>
</div>

Now, you don't need to say<h1 id="first"> because it is already in the first id in the div. Same with p because all paragraphs in the first div are set to have a white font color.

Here's what it will look like:

Save

Advanced CSS & Layout

Display

View Full Topic

Block-level Elements

Start on a new line and take the full width - stretching as far to the right and left as it can.

These elements include: <div>,<h1> through <h6>, <p>, <form>, <header>,<footer>, <section>

Inline Elements

Does NOT start on a new line and only take as much space as possible.

These elements include: <span, <a> and <img>.

The display Property

Allows you to set whether an element is displayed inline, as a block or with none.

inline: displays elements in a line. Causes all list items to appear next to each other in one continuous line as opposed to each having its own line

li{
   display: inline;
}

block: makes an element stand alone with a line break before or after. Allows greater manipulation of height, margins and padding. This example makes each link in “nav” large clickable blocks:

#nav li{
   display: block;
   padding: 20px 10px;
}

inline-block: combines inline and block to allow elements to appear inline but you can format the height and width. This example makes each horizontal menu item in “nav” large clickable blocks:

#nav li{
   display: inline-block;
   padding: 20px 10px;
   width: 150px;
}

none: turns it all off. Here's a way to hide an element. Your HTML would be:

<div class="hide">
   <h2>Hidden Things</h2>
   <p>These are the things I want to hide!</p>
</div>

And here's the CSS:

.hide{display:none;}

Using width, max-width and margin: auto

View Full Topic

CSS Dimension properties allow you to set the height and width of an element. height and width can be set to:

auto is the default and means the browser will automatically (get it!?) calculate the height and width.
Specific length values like px or cm
A percentage like 50% or 75% of the containing block.

margin: auto

Setting the width of a block-level element will prevent it from stretching to the edges of the container (usually a web page).

.normalbox{
   width: 500px;
   margin: auto;
}

If margin is set to auto – it will horizontally center the element in its container.
Element will take the width you set – the remaining space will be split between two margins.
But, if your browser window is narrow than your space – it makes an ugly scroll bar or chops the box off.
See this example.

max-width

Allows the browser to handle if the browser is smaller than the container.

.maxbox{
   max-width: 500px;
   margin: auto;
}

This will resize the box.
See this same example as above to see this too

The box model and width

Remember the box model (padding, margins and borders) can impact the width.
You can have two boxes with the same width that are very different sizes.

.smallbox{
   width: 500px;
   margin: auto;
   border: 5px solid #0EB6C9;
}

.bigbox{
   max-width: 500px;
   margin: 50px auto;
   padding: 50px auto;
   border: 1px solid #0EB6C9; 
}

Take a look at this example to see how this works.

The importance of the body tag

Positioning

View Full Topic

Allows you to position an element. Four main options:

position:static: default - just where it is
position:relative: offset by top, right, bottom, left properties

.relativebox1{
   position: relative;
   border: 3px solid red;
}
.relativebox2{
   position: relative;
   top: 40px;
   left: 40px;
   border: 3px solid turquoise;
}

position:fixed: Positioned relative to the browser window and will not move even if the window is scrolled

.fixed{
     position:fixed;
     bottom:0;
     right:0;
     border:3px solid purple;
}

position:absolute:This positions an element relative to the first parent element that has a position other than static. Essentially it has characteristics of both relative and fixed. It is positioned relative to another element but it is also outside of the normal flow.

Float & Layout

View Full Topic

Floating

Floating will shift the container to the right or left of a line with the rest of the content surrounding it. Normally it is used to shift smaller items such as images but it can also be used to set the overall layout of the page.
It's properties are float: left or float:right.
If you want to clear the float so that the page returns to normal flow - for example to have a footer which runs across the foot of the page you can use the clear property.
- clear: left - clears left floated boxes
- clear: right - clears right floated boxes
- clear: both - clears all floats

How Elements Float:

can only be floated left or right horizontally
It will float as far to the left or right as it can of the containing element.
Elements after the float will flow around it.
Elements before will not be affected.
If an image is floated to the right, following text flows around it to the left.

img{ 
    float:right;
}

2 Column Float Layout Example

View Full Topic

2 Column Page Layout

If we wanted to make a web page that had:

Header across the top
2 equal columns of content
Footer across bottom.

How?

Create the header
Create the two columns of text…float one..left and one…right!
Then for the footer….Clear the floats!

Here's the HTML for a basic page with a header, a left column, a right column, a center content space and a footer. Comments are in gray.

<html>
<body>
   <!--Header image ->
   <img id="header" src="images/WebsiteHeader.png">
   <!-- div for the column on left-->
   <div id=“column1”>
       <h1>Column 1</h1>
       <p> Text for column 1</p>
    </div>
    <!--div for the column on right --->
    <div id=“column2”>
       <h1> Column 2</h1>
       <p>Text for column 2</p>
    </div>
     <!--footer -->
    <div id=“footer”>
       <p>This is the end!</p>
    </div>
</body>
</html>

Then we have to write the CSS to format the HTML which will look like:

/*style for column one - floats it to left */
#column1{
  float: left;
  width: 350px;
}
/*style for column two- floats it to right*/
#column2{
  float: right;
  width: 350px;
}
/*style for footer -clears floats */
#footer {
     clear: both;
}

And it looks like this:

3 Column Layout With FLoat

View Full Topic

Here's the HTML for a basic page with a header, a left column, a right column, a center content space and a footer. Comments are in gray.

<html>
<body>
  <!--Header image ->
   <img id="header" src="images/WebsiteHeader.png">
  <!-- div for first column-->
   <div class=“cols”>
       <h2>Column 1</h2>
       <p> Text for column 1</p>
    </div>
  <!--div for the second column --->
    <div class=“cols”>
       <h2> Column 2</h2>
       <p>Text for column 2</p>
    </div>
    <!--div for third column -->
    <div class=“cols”>
       <h2> Column 3</h2>
       <p>Lots of text!!!</p>
    </div>
   <!--footer -->
    <div id=“footer”>
       <p>This is the end!</p>
    </div>
</body>
</html>

Then we have to write the CSS to format the HTML which will look like:

/*style for all three columns */
.cols{
  float: left;
  width: 30%;
  margin: 0 1.5%;
  background-color:#F4FCE0;
  padding: 10px;
  border-radius:10px;
}

/*style for footer -clears floats */
#footer {
     clear: both;
}

And it looks like this:

Nav Bar

View Full Topic

A navigation bar – or a menu – is really just a list of links so we will use the <ul>and <li> elements to make it.

1. Create the HTML for the menu.

<div id="nav"><ul>
   <li><a href="index.html">Home</a></li>
   <li><a href="news.html">News</a></li>
   <li><a href="contact.html">Contact</a></li>
   <li><a href="about.html">About</a></li>
 </ul>
</div>

2. Remove the bullets and padding from the list

#nav ul{
  list-style-type:none;
  margin: 0;
  padding: 0;
}

3. To make a vertical menu bar – we only need to style the <a> elements:

#nav a{
  display: block;
  width:100px;
}

4. To make a horizontal menu - remove the styling from the <a> element and style the <li> element instead:

#nav li {
  display: inline-block;
  width:100px;
}

5. Style Your Menu

Add background colors...add some padding..dress up the font...have some fun. Just an example to get you thinking!

#nav ul{
  list-style-type: none;
  margin: 0;
  padding-top: 10px;
}

#nav li {
  display: inline-block;
  background-color: #0EB6C9;
  color:white;
  font-size: 30px;
  font-family: "Happy Monkey";
  padding: 10px;
  width:150px;
}

#nav a{
  color:white;
  margin: 20px;
  text-decoration:none;
}

#nav a:hover{
  color:limegreen;
}

Basic Flex

View Full Topic

Let's start with a header, footer and three content areas in our HTML:

<header>Top of Page </header>
<main>
  <div class="col1">Col1</div>
  <div class="col2">Col2</div>
  <div class="col3">Col3</div>
  <footer>Bottom of the page</footer>
</main>

Added CSS to give each area different color. Page looks like this:

Add this CSS to your main container -

main{
   display: flex;
}

Now it looks like this:

Flex Properties

View Full Topic

Here are the properties you can apply to affect the layout of your page.

flex-direction: defines which direction - horizontal or vertical - the container should stack flex items. Values include: row, row-reverse, column, column-reverse
justify-content: aligns items horizontally. Values include: center, flex-start, flex-end, space-between, space-around
align-items: aligns items vertically center, flex-start, flex-end, stretch
flex-wrap: this is simple one - just specifies whether items should wrap or not. no-wrap, wrap
flex-flow: shorthand that combines flex-direction and flex-wrap no-wrap, wrap

For more info and examples - see lesson.

Flex Items

View Full Topic

FLEX items allows you to format the items within the container. Each <div> within a flex container is one.

Property	Purpose	Values
order	Set the order of items	Any integer - can be negative
flex-basis	Set the basis for each item – will the container automatically size or be a specific width?	auto or any number like 100px
flex-grow	Set which items can expand if there is space. Default value is 0 – it will only use space it needs. If greater it will take more in proportion.	0, 1, 2 or other digit
flex-shrink	Set which items can shrink if there is needed. Default value is 1 – it will only use space it needs. If greater it will take more in proportion. 0 means it will not shrink	0, 1, 2 or other digit
align-self	Set which way you want items aligned vertically	center, flex-start, flex-end, stretch

CSS Grid Basics

View Full Topic

The structure of CSS Grid

Just like with Flex, it is important to use the <div> tag to create your basic structure. A grid layout consists of a parent container with one or more child containers.

Our HTML

<div class="grid-container">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
</div>

Our CSS

You can use auto, number of pixels or fr units to specify column and row layout.

.grid-container{
  display:grid;
  grid-template-columns: 100px 2fr 1fr;
  gird-template-rows: 2fr 4fr 1fr;
  background-color:#D0F8FC;
  padding: 10px;
}

.grid-container div{
  background-color:#70E9F5;
  border: 1px solid #ffffff;
}

CSS Grid - Gaps between Rows & Columns

View Full Topic

You can set the gaps between columns & rows using the following three properties.

column-gap: 20px;

Sets the gap between columns to be 20 pixels.

row-gap: 5%;

Sets the gap between rows to be 5% of the height.

gap: 3vw;

Sets the the column and row gaps to both be 3% of the viewport.

CSS: Grid Horizontal & Vertical Formatting for Whole Grid

View Full Topic

The justify-content Property

This aligns the whole grid inside the container. The options include space-evenly, space-around, space-between, center, start and end. Play around with it!

 justify-content: space-around;

The align-content Property

This aligns the whole grid vertically inside the container. The options include space-evenly, space-around, space-between, center, start and end. Play around with it!

 align-content: space-around;

CSS Grid - aligning items

justify-self and align-self are the equivalents of justify-items and align-items for the entire grid. They just apply to items in a grid.

The justify-self Property

This aligns the item inside the container. The options include space-evenly, space-around, space-between, center, start and end. Play around with it!

 justify-self: end;

The align-self Property

This aligns the item vertically inside the grid. The options include space-evenly, space-around, space-between, center, start and end. Play around with it!

 align-self: space-around;

CSS Grid: Column Layout & Spanning

CSS Grid: Row Layout & Spanning

Grid Area - Best Way to Do Layout

View Full Topic

Our HTML

<div class="grid">
   <div class="item1">Header</div>
   <div class="item2">Menu</div>
   <div class="item3">Main</div>
   <div class="item4">Sidebar</div>
   <div class="item5">Footer</div>
</div>

Our CSS

.grid{
  display:grid;
  grid-template-area: 
    'header header header header header header'
    'menu main main main main sidebar'
    'menu footer footer footer footer footer';
  gap:20px;
}
.item1{grid-area: header;}
.item2{grid-area: menu;}
.item3{grid-area: main;}
.item4{grid-area: sidebar;}
.item5{grid-area: footer;}