In this course you'll learn how to use CSS to add styles to your HTML webpages. This course contains 10 videos and will teach you the basics on CSS. Take a look at the course break down below:
1. Introduction
In this introduction episode we talk to you about what you can expect in this CSS course.
2. Using CSS
In this video we'll be covering a few topics including What is CSS, How to use CSS, and the Basic syntax of CSS.
What is CSS?
CSS stands for Cascading Style Sheets and CSS is used to stylize a page. HTML is the content of the page and CSS defines how the content should be displayed.
How to use CSS
There are 3 different ways to add CSS to your HTML pages including Inline CSS, Internal CSS, and External CSS.
Using inline CSS you can add a style attribute to your HTML tag and include the CSS inline.
<h1 style="background:blue; color:white;">Hello CSS</h1>Using internal CSS we add the CSS to the head of our page and enclose it in <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>CSS Basics</title>
<style>
h1{
background:blue;
color:white;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>To use External CSS we can include a link tag that specifies where external stylesheet is located in the href tag.
<!DOCTYPE html>
<html>
<head>
<title>CSS Basics</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello CSS</h1>
</body>
</html>So if we created a new file called style.css we could include the following content to the file.
h1{
background:blue;
color:white;
}Using external CSS is the most commonly used since it makes our code cleaner by separating the styles into its own file.
Basic Syntax of CSS
The basic syntax for CSS is to specify the selector p from our example below and then we include our css inside of the { } brackets. The element that we want to apply our CSS to is referred to as the selector. Then if we want to give our element a color of blue we will specify color, which is referred to as the property and blue, which is the value. Take a look at the example below:
p{
color:blue;
}3. Colors and Backgrounds
In this video we will learn about the color and background property.
Color
To use the color property we could easily give it a color value like so:
p{
color:blue;
}In the example above we are saying that we want every p element to have a color of blue. We can use the traditional colors such as red, blue, green, black, grey, and so on. Or we could use rgb or hex color values.
RGB colors
To use rgb colors you can use the following syntax rgb(255, 255, 255) that would be an RGB value of white. RGB stands for Red, Green, Blue and each value inside of the rgb() represents red, green, and blue value from 0 to 255. So, if we were to specify a color of rgb(0, 0, 0) we would get a color of black because Red, Green, and Blue have a value of zero. How might we get the color blue from an RGB value. We could do the following:
p{
color:rgb(0, 0, 255);
}HEX colors
Next we could use hex values which look like the following #FFFFFF, that would give us a color of white. HEX representation of RGB, #RRGGBB and the numbers go from 0-9 then A-F, so a blue value would be represented like the following:
p{
color:#0000FF;
}Background
Backgrounds have multiple properties and values that can be used including background-color, background-image, background-repeat, background-attachment, and background-position.
background-color
The background-color property will set the background color of any element. This color can also be represented as an RGB or Hex value that we talked about above.
body{
background-color: green;
background-color: rgb(0, 255, 0); /* RGB Color */
background-color: #00FF00; /* Hex Color */
}background-image
The background-image property can be used to set an image as the background for any html element. Checkout the example below:
body{
background-image: url('/path/to/image.jpg');
}background-repeat
The background-repeat property can be used to specify whether a background image should repeat or not repeat. You can also set repeat-x or repeat-y if you only want it to repeat on that axis.
body{
background-image: url('/path/to/image.jpg');
background-repeat: no-repeat;
}background-attachment
The background-attachment property can be used to specify whether a background image should be fixed when the user scrolls or if it should scroll down as the user scrolls the page.
body{
background-image: url('/path/to/image.jpg');
background-attachment: fixed; /* default is scroll instead of fixed */
}background-position
The background-position property can be used to specify the position of the background image.
body{
background-image: url('/path/to/image.jpg');
background-position: center center;
}The background-position accepts the x-position and the y-position. The x-position can be left, center, right and the y-position can be top, center, bottom. You can also specify a pixel value for each position so the property could also look like: background-position: 100px 100px; and it will position the background 100 pixels from the top and the left.
4. Text & Fonts
In this video we talk about the multiple text and font properties. These properties include color, text-align, text-decoration, text-transform, letter-spacing, line-height, font-family, font-size, font-weight, font-style, and font-variant which we will cover in further detail.
color
The color property is the most commonly used text property and it simply specifies the color of the text like so:
p{
color: blue;
}text-align
Using text-align will specify how the text should be aligned. The common text alignments are left, center, right. Take a look at the example below:
p{
text-align: center;
}text-decoration
The text-decoration property can specify whether you want the text to have an underline, overline, strikethrough, or none. Take a look at the example below:
p{
text-decoration: underline;
}text-transform
Using the text-transform property you can give it a value of uppercase, lowercase, or capitalize.
p{
text-transform: uppercase;
}letter-spacing
Using the letter-spacing property you can specify the spacing between each letter as a pixel value. Take a look at the following example.
p{
letter-spacing: 15px;
}line-height
The line-height property will specify how much height spacing you want the text to take up. Take a look at the example below:
p{
line-height: 50px;
}font-family
The font-family will specify which font face you want to use for the text. By adding multiple fonts you can specify any fallbacks if the user does not have the font installed on their computer.
p{
font-family: "Times New Roman", Georgia, Serif;
}font-size
The font-size property will specify how large or small you want the text to be.
p{
font-size: 12px;
}font-weight
The font-weight will specify how thick you want the font to be. You can choose a value between 100-900 or you can use normal or bold.
p{
font-weight: bold;
}font-style
Using the font-style we can specify whether we want the text to be italic or normal.
p{
font-style: italic;
}font-variant
Using the font-variant you can make text have a value of small-caps or normal.
p{
font-variant: small-caps;
}5. Widths and Heights
In this video we'll teach you about the CSS width and height property. To set the width and height of an element you can simply use the width and height properties.
#block{
width:200px;
height:200px;
}6. Margin, Padding, & Borders
In this episode we teach you about CSS margin, padding, and border.
Margin
The CSS margin property sets margin spacing outside of the element. You can specify a value for margin-top, margin-right, margin-bottom, and margin-left. Or you can specify them all at the same time by using margin.
p{
margin: 25px 50px 75px 100px;
}In the example above we will have a margin-top: 25px; margin-right: 50px; margin-bottom: 75px; and margin-left: 100px;. If we only specified one value in the margin property like so:
p{
margin: 25px;
}then all sides will have a margin of 25 pixels.
Padding
Padding has the same rules as the margin above except the spacing will be inside of the element. You can also specify padding-top, padding-right, padding-bottom, or padding-left separately or you can specify them all in one line similar to above. Here's a simple example of the padding property:
p{
padding: 25px;
}Border
Using the CSS border property we can add a border to any HTML element. There are 3 basic border properties that you can use which include border-width, border-style, and border-color.
border-width
The border-width property specifies how thick the border should be. As an example let's say that we want the border-width to be 10 pixels, we would represent that like the following:
#element_id{
border-width: 10px;
}border-style
The border-style property specifies what kind of style we want for our border which can be a solid, dotted, or dashed border.
#element_id{
border-style: solid;
}border-color
The border-color specifies what color we want for our border. The example below will give us a blue color.
#element_id{
border-style: #0000FF;
}border
We can use the border property to specify the width, style, and color in one line.
#element_id{
border: 10px solid #0000FF;
}7. Floats, Display, & Position
In this episode we are covering the float, display, and position properties. Take a look at each of them below:
float
The css float property is used to float an element to the left of the screen or the right of the screen. By default with any block element it will take up the whole width but by specifying float:left; or float:right; you can make sure the block element stays to the left or the right of the screen. Checkout the following example:
#block{
width:200px;
height:200px;
background:#333;
float:left; /* Float this element left */
}display
The display property will specify how to display an element on the screen. There are 4 main display properties.
The first 2 are display:block; and display:none; If an element is set to display block it will be displayed on the screen and take up the full width of it's location (unless it has a float property). If the element is set to display:none it will not be displayed at all and it will be hidden.
Next there is the display:inline; and display:inline-block;
If you specify inline the element will not break a new line or take up the full width instead it will be displayed inline with the rest of the content. Display inline will not be treated as a block and will not be able to have many attributes such as margin and padding.
If the element is set to display:inline-block it will be the same as the inline except it will be treated as an actual block or square.
p{
display:inline-block;
}position
The CSS position property specifies the type of positioning that the element should have on the page.
There are 4 main positions which include static (which is default if the position propert is not set), relative, absolute, and fixed.
Static Position
The static position is the default position that any element will have on the page, if you do not set the position property it will have a value of static.
Relative Position
Relative position will have a position similar to static however, it will allow you access to a few more properties including top, left, right, and bottom positions. Let me give you a quick example:
p{
position:relative;
top:10px;
left:10px;
}the paragraph element above will now have a relative position from it's current location but it will be positioned at an offset of 10 pixels from the top and 10 pixels from the left.
Absolute Position
An absolute positioned element will have the same properties as relative; however, instead of it having a starting position from it's static position it will have a starting position of absolute, this means that if you position it from the top of 10 pixels and left of 10 pixels, it will be 10 pixels offset from the body of the page instead of it's actual position.
p{
position:absolute;
top:10px;
left:10px;
}Fixed Position
Fixed position will give you all the same results as the absolute position; however, when the user scrolls down the page the fixed element will still stay at the same position; whereas with absolute positioning it will scroll along with the page.
p{
position:fixed;
top:10px;
left:10px;
}8. Links & Lists
In this video we'll be cover links and lists. You can checkout each of these properties below:
Links
Links are text that can be clicked to visit another page. There are 4 different states for each link which include the :link, :visited, :hover, and :active state.
:link state
The :link state is the same as the default <a> link so the 2 examples below will do the same thing.
a{
color:#0099CC;
}
a:link{
color:#0099CC;
}:visited
The :visited state is a link that has already been visited.
a:visited{
color:#FF0000;
}:hover
The :hover state is a link that is currently being hovered.
a:hover{
color:#00CC99;
}:active
The :active state is a link that is currently being clicked, as the users mouse click is down the link will have an :active state.
a:active{
color:#000000;
}Lists
Lists are used to represent a list of items or text. There are 2 types of list which include unordered lists and ordered lists. Take a look at each of the CSS properties that these lists have below.
list-style-type
The list-style-type can only be applied to unordered lists and they specify the different styles that you can use for your bullet points. Take a look at each of the main values below:
ul{
list-style-type: disc; /* filled in circle */
list-style-type: circle; /* outlined circle */
list-style-type: square; /* filled in square */
list-style-type: none; /* no bullet points */
}9. Classes, ID's, and Psuedo Elements
In this episode we'll be teaching you about the difference between Classes and Id's, and Pseudo Elements.
Classes
A class is when you have an element that will show up multiple times in your document and you want to apply certain styles to that class element. To create a class in HTML it will look like the following:
<div class="my_element"></div>Then to give it some styles in css you will reference it by using a . and then the name of the element like so .my_element
.my_element{
background:#ff0000;
color:#fff;
}Id (identifier)
Unlike classes an ID should only appear once in the document. To give an element an ID you will use the # symbol followed by the name of the element. So in HTML your ID would look like the following:
<div id="element"></div>Then in your CSS you would stylize this element like so:
#element{
background:#ff0000;
color:#fff;
}Pseudo Elements
Pseudo Elements are used to specify a certain section or part of an element. Pseudo elements are used by adding a :: at the end of the element and then the name of the pseudo-element. For instance to make the first line red in a paragraph we could do the following:
p::first-line{
color:#ff0000;
}Or possibly we want to make the first letter of a paragraph red, we could do the following:
p::first-letter{
color:#ff0000;
}We also have ::before and ::after elements that we can use to add any content before or after an element. These can be used like the following:
p::before{
content: ' Before Element';
}
p::after{
content: ' After Element';
}One last pseudo element worth mentioning is the ::first-child and ::last-child, which will stylize the first and last child elements.
ul li::first-child{
background: green;
}
ul li::last-child{
background: green;
}10. Wrapping Up
Congratulations on reaching the black-belt episode. In this last episode we'll be wrapping up a few last topics including comments, inheritance, and descendent selectors.
Comments
Using comments in your CSS allows you to leave notes or comments for yourself. Checkout the example of comments below:
/* This a comment */
p{
color:blue;
}
/* This is another comment */Inheritance
Inheritance is when an element inherits a value from a parent element. For example if you do not specify a color value for your <p> tags, but you specify a color of green for the body of your document, then your text in a paragraph will inherit the color green.
body{
color:green;
}
p{
font-size:12px;
}
/* Paragraph above will inherit the color green */Descendent Selectors
Descendent selectors are selectors that match all elements that are descendents of a specified element. Take a look at the example code below:
<p>Hello I'm a paragraph</p>
<p class="message">And I'm another paragraph</p>Now, if we were to add the following css:
p.message{
color:green;
}Only the second paragraph would have the color of green because we used a direct descendent selector. Take another look at another example below. Say that we have the following HTML.
<p>Hello I'm a paragraph</p>
<div id="section">
<p>And I'm another paragraph</p>
</div>Now to give the second paragraph the color of green we could know that the <p> tag is a descendent of the <div id="section"> so we could write this like so:
#section p{
color:green;
}And now only the second paragraph will have the color green since we used a descendent selector.
Congrats on wrapping up this final video and earning your black-belt in this CSS Basics Course.
Comments (0)