Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

Cascading Style Sheets

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. cite: Wikipedia

You should know HTML 5 before you try to learn CSS 3. If you do not yet know basic HTML - please go watch our 30-minute
HTML tutorial for Beginners. If you have mastered HTML basics - you can begin your climb to learning CSS.

After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "Now I know CSS Syntax". But if you still don't understand something, please write that in your comments too so that we know what topics need an additional video tutorial. (5 minutes)

Learn CSS 3! Cascading Style Sheets enable you to add styles to fonts, set position of elements, set margins and paddings, decorate your hyperlinks and so much more. CSS 3 also includes code for adding animation to your websites. CSS is where you start decorating your web page and is a lot of fun! First, you select the item that you want to target (decorate) and then you define the value of the properties used for decorating. In the example below you can see that I have selected the paragraph tags on the page, then set the font size and then the color.

css code for font-size and font color

Comments in CSS

You can add comments in your CSS files by starting with /* writing your comment and then ending it with */. You use the same method whether you are adding a single-line comment or a multi-line comment. Comments in code are only seen by other developers and will not be viewable to the end user (unless they know how to find them.) However, never put private information like passwords in your comments because anyone who knows how to view CSS comments can see whatever you typed out. See the demo code below:

css comments in code

3 Places For CSS

After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "Now I know 3 ways to add CSS to my HTML". Doing so helps us know that you understand the material discussed in the video.(4 minutes)

You have 3 places in which you can place your CSS code. The preferred method is to write your CSS styles in an external file (often times named: styles.css) and then add a link to that style.css file in the head tag of your html page. The second option for where to place your CSS code is called "internal styles" and are wrapped in style tags and placed inside the head section of your CSS. The disadvantage to this location is that if you want all of your pages to use this code, you will have to update every single page on your website - whereas, if you had written your code in an external file then you would only change the code in that one file and your entire site would be updated. The last method is called "in-line styles" and this is where you define your styles directly inside of the element on the page. This is usually only done during development and testing and should really be moved to your external style sheet before going live.

External Stylesheet:
<head> <link rel="stylesheet" href="css/styles.css" /></head>

Internal Styles:
<head> <style> p#new{color:red} </style> <head>

In-line Styles:
<p style="color:red">My text here. </p>

If you have watched the videos above AND left a comment on each of the YouTube pages, then go ahead and move to the next page to learn more CSS. By leaving comments on our YouTube video pages, you show the YouTube algorithm that you gained value from watching the video and then YouTube will start suggesting it to more people. Please support our efforts in providing FREE training for all by leaving a comment on every single video you watch. If we can get our students to leave comments on our videos then we will not charge for lessons and instead continue providing FREE training. Thank you!

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143


Campsite Coders logo in footer

Copyright 2023 . All rights reserved