Help Center

Coding Resources

CSS Resources

CSS 1 Reference Guide

This article is a quick guide that goes over syntax and concepts taught in the CSS 1 course.

Last updated - July 22, 2024

Link Tag
Text Shadow
Rounded Corners
Box Shadow
Color Gradient
Comments
Classes
Color Picker
Margin and Padding
Pseudo Selectors
Opacity
Div Tags
Button Design
List Styles
Icons
Borders
Positioning
Media Queries
Background Image Style

Link Tag

The <link> tag is what connects a CSS file to an HTML file. The <link> tag belongs in the <head> section of an HTML file.

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

Text Shadow

The text-shadow adds a shadow to your text. This property has 4 values in this order:

horizontal-offset
vertical-offset
blur-radius
color

h1 {
    text-shadow: 5px, 5px, 2px, grey;
}

Rounded Corners

The border-radius property creates rounded corners on an element. Inputting one value rounds all corners equally while inputting 4 values rounds each corner individually. The 4 values are:

top-left-radius
top-right-radius
bottom-right-radius
bottom-left-radius

div {
    border-radius: 10px;
}

.box {
    border-radius: 10px, 30px, 8px, 25px;
}

Box Shadow

The box-shadow property creates a shadow that is placed behind an element. The box-shadow property can have 2, 3, or 4 values. The 4 values are:

horizontal-offset
vertical-offset
blur-radius
color

div {
    box-shadow: 5px 5px 5px green;
}

Color Gradient

The linear-gradient() and radial-gradient() CSS functions are used to create a color gradient. These functions are used within the background-image property. The linear-gradient() has at least 2 values, the first and second color. If you would like to change the direction of the gradient, a value can be added as the first value. The directions are:

to bottom
to right
to left
to top

body {
    background-image: linear-gradient(to right, blue, white)
}

The radial-gradient() function takes at least 3 color values.

background-image: radial-gradient(red, green, blue);

Comments

Comments improve readability of code without being read by the code interpreter. Below is an example of an HTML comment.

<!--This is a comment-->

Below is an example of a CSS comment.

/*This is another comment*/

Classes

A class can be created in an HTML tag with the syntax class="myClass." To style a class in CSS, type a period followed by the class name. One class can be applied to multiple HTML elements.

<!--HTML file-->
<h1 class="myClass">Hello!</h1>

/*CSS file*/
.myClass {
    color: blue;
    font-family: impact;
}

Color Picker

The Color Picker is used to select any color you would like to add to your website. Skill Struck's Color Picker can be found in the top right corner of your screen. It is the color pallet icon the third icon from the left.

Margin and Padding

Margin is the space around an element. Padding is the space within an element. Both margin and padding of an element can be adjusted in CSS.

The "margin" property adjust the margin on all sides while "margin-top," "margin-right," "margin-bottom," and "margin-left" adjust the margin of only one side.

h1 {
    margin: 5px;
}

h2 {
    margin-left: 8px;
}

The "padding" property adjusts the padding on all sides while "padding-top," "padding-right," "padding-bottom," and "padding-left" adjust the padding of only one side.

div {
    padding: 5px;
}

h1 {
    padding-top: 2px;
}

Pseudo Selectors

Pseudo selectors change the style of an element when a user-caused event occurs. The most common pseudo selector is :hover. When an element is hovered over, the block of code connected with that pseudo selector is applied.

h1:hover {
    background-color: red;
    color: white;
}

Opacity

Opacity affects the transparency of an element. A value of 1 is not transparent at all while a value of 0 is completely transparent. 0.5 is half transparent.

h1 {
    opacity: 0.5;
}

Div Tags

Div tags are used to organize or group HTML code together. Divs can be styled like any other HTML element.

<!--HTML file-->
<div>
  <h1>Header goes here</h1>
  <p>Paragraph goes here</p>
</div>

/*CSS file*/
div {
    background-color: blue;
}

Button Design

There are a few CSS properties that are helpful when styling buttons.

background-color	The background-color property allows you to change the color of the button's background. .button { background-color: orange; }
color	The color property allows you to change the button's text color. .button { color: white; }
border-radius	The border-radius property allows you to create rounded corners on a button. .button { border-radius: 5px; }
text-decoration	The text-decoration property can style or remove the text underline. .button { text-decoration: none; }
margin	Margin adds space around a button. .button { margin: 10px; }
padding	Padding adds space within a button. .button { padding: 10px; }

List Styles

Both unordered and ordered lists can be styled.

list-style: circle	The circle value changes an unordered list's bullet points to a circle with a black outline and white center.
list-style: square	The square value changes an unordered list's bullet point to a filled in square.
list-style: lower-alpha	The lower-alpha value changes an ordered list's numbers to lowercase letters.
list-style: upper-roman	The upper-roman value changes an ordered list's numbers to roman numerals.

Icons

To add icons to a page, the Google Material Icons stylesheet needs to be imported.

<!--HTML file-->
<head>
  <link rel="stylesheet" 
        href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

Icons can be added using the <i> tag. The class "material-icons" will need to be added to the icon tag.

<body>
  <i class="material-icons">wifi</i>
</body>

To view all available icons in the Material Icon library, click here.

Borders

We can add borders to images, buttons, and other tags with help from CSS.

border-color	The border-color property sets the color of a border. div { border-color: green; }
border-style	The border-style property sets the style of the border. The options include none, dotted, solid, groove, ridge, dashed, inset, outset, and double. div { border-style: dotted; }
border-width	The border-width property sets the width of the border. div { border-width: 10px; }
border	The border property is a shorthand that combines the previous 3 properties. The first value is width, the second is border-style, and the third is the border-color. div { border: 10px solid pink; }

Positioning

Fixed positioning fixes an HTML element to one spot on the page. Absolute positioning fixes an element to one position within its parent element. These 4 properties are used to position an element:

top	The top property sets the vertical position of an element referencing the top of the element. div { position: fixed; top: 10px }
bottom	The bottom property sets the vertical position of an element referencing the bottom of the element. div { position: fixed; bottom: 15px; }
left	The left property sets the horizontal position of an element referencing the left side of the element. div { position: absolute; left: 10px; }
right	The right property sets the horizontal position of an element referencing the right side of the element. div { position: fixed; right: 15px; }

Media Queries

Media queries are used to make a website more responsive. Min-width applies CSS code when a screen is greater than or equal to a set width. Max-width applies CSS code when a screen is less than or equal to a set width.

@media (min-width: 768px) {
  body {
    background-color: blue;
  }
}

@media (max-width: 768px) {
  body {
    background-color: red;
  }
}

Background Image Style

Background images can be styled to make a big impact on your page.

background-image: url()	This property and value combination adds a background image to a page. body { background-image: url("URL goes here") }
background-repeat	The background-repeat property sets how a background image repeats across an element. The values include no-repeat, repeat, repeat-x, and repeat-y. body { background-repeat: repeat; }
background-position	The background-position property sets the position of a background image. The values center, top, right, bottom, and left can be used. body { background-position: top; }
background-size	The background-size property sets the size of a background image. body { background-size: cover; }