CSS Survival Guide

Every web developer needs to use CSS (Cascading Style Sheets) CSS some people hate it, others love it. If you don’t know what CSS an easy way is to think about it is that CSS for a Web page is equivalent to what clothes are to us! They are what we use to style ourselves, clothes allow us to be able to dress in all sorts of different way, which is the same for what CSS can do to a Web page! CSS can also be kind of boring for some or even difficult to newcomers! However, for any newcomers to CSS here is a survival guide for you!

Brief History of CSS

During 1994 when the Web was being used as a platform for electronic publishing, a man by the name of Håkon Wium Lie saw the need for styling on the Web. CSS (Cascading Style Sheets) was then made to be able to help the Web page be laid out similar to the newspaper layout. CSS is not a programming language, but a styling language used on HTML.

CSS Uses

CSS can be used in many different ways! CSS allows you to change a font color to being able to build an animated menu! Here are a few of the most common and basic things you can do with CSS.

• Font size
• Font color
• Background color
• Alignments
• Button color
• etc.

CSS Syntax

Selector {
 property: value;
}

Selectors

Can be the following

• Element which means it can be a Header, Buttons, Paragraphs, Body, and so on.
• Class which lets you select HTML elements with the specific class name that is given to it. Also known as giving an HTML element an attribute. To let the CSS file, know that it is a class selector then you will have to insert a period “.” in front of the class name. An element can be have multiple classes and would be spaced out in-between the two. Take a look at the example below. This means that you can call the following div with a selector of .title or .title-1

<div class = "title title-1"> 

• ID is similar to a class attribute/selector the only difference is that you use a pound sign “#’ to be able to use the ID as a selector.

Property

• Property in this case means what you want to change about the specific selector. This means if you wanted to change the font size you would type “font-size:” a link to a long list of different properties is linked here.

Value

• Value is pretty self-explanatory and just means the value that you want to give it.

div { 
 font-size: 1em;
}

• However, there are many ways to give different values for the same thing take a look at the code to see an example.

div { 
 font-size: 80%;
}
div { 
 font-size: x-small;
}

• As you can see there are different ways you can input a value just for the font-size alone.
• Another example of this would be if you were changing the color for something. You can give the property a value by just typing the color you want like “purple;” or you can be more specific by giving it a hexadecimal number “#cc66ff;”.

div {
 color: purple;
}
div { 
 color: #cc66ff
}

Combining CSS Selectors

• You can combine different CSS selectors to be able to get more specific about what you want to change as well.

.name, ,age {
 color: blue;
}

• The example above allows you to be able to chain two classes if you want them to have the same property and value by just adding a comma “,” before the second selector given, meaning that both the class name and age text will be blue. This allows you to have to write less redundant CSS code.

.ancestor .child {
 background-color: gray;
}

• The example above is called the Descendant Selector. Doing this will grab all of the children within the ancestor. For example, say we have the following code in a html file.

<div> 
   <p> hello </p> 
   <p> world </p> 
</div>

This is what is being displayed onto the webpage.

• if we were to call it within a CSS file by the following code.

div p {
 color: green;
}

This is what is being displayed onto the webpage after adding the CSS above

• This will grab all of the p tags within the div and change the color. So, it will change the text of “hello” “world” to be green.
• There are other CSS combinators that you can use as well like the child selector, adjacent sibling selector and general sibling selector that can be found through here.

Conclusion

Well that is it for my survival guide! I hope that this has helped someone out! Going through and learning a little bit more about CSS taught me some cool tricks I didn’t know about and can’t wait to use! I will be making more in-depth/advanced CSS guides in the future!