The Basics of CSS

Definition of CSS

CSS stands for Cascading Style Sheets and provides HTML with layout and design. Along with
making things pretty and aesthetically pleasing, CSS also provides a general structure to HTML.

Some of the most important CSS properties (in my opinion) are (in no order):

• color – specifying text color.
• font-family – specifying font type.
• font-size – specifying font size.
• text-decoration – specifying text decorations, such as underline.
• font-style – specifying font styling, such as italics.
• font-weight – specifying font weight, such as bold.
• width – specifying the width of an element.
• height – specifying the height of an element.
• background – specifying the background.
• border – specifying a border.
• text-shadow – specifying a shadow for our text.
• float – specifying the float of an element, such as left or right.
• position – specifying the position of an element, such as absolute or relative.
• z-index – specifying the z-index of an element, such as 999; which would put that styled element ‘on-top’ of all other elements that either have a negative z-index specified or no
z-index specified.
• padding – specifying padding inside an element, such as padding around text.
• margin – specifying the margin between elements.

CSS can be implemented in three different ways to HTML:

1. Inline
2. Internal
3. External

Learn Online for Free

At ZENVA we have a full HTML/CSS beginners video course, you can access it for free here.

Using Inline CSS

So, lets use some inline CSS to change a few things in our HTML structure.

Output:

Color

As you have probably noticed, we have used the English word for the color we want to use. But there are another
two ways we can define colors in CSS; The rgb color values and something called Hexadecimal.
All three types of defining colors in CSS are acceptable, you can read more about colors in CSS
here: W3Schools.

Example of RGB color values:

rgb(255,0,0)

Example of Hexadecimal color values:

#ff0000

Using CSS in The Head

As you can see, our inline CSS is very effective, but perhaps not very efficient nor productive.
Inline CSS is good for adding slight changes or specifying colors for different text elements, but it
starts to get a little ‘wordy’ and messy.

When we add CSS to HTML either; externally or in the head section, we can use selectors.
Selectors allow us to ‘select’ or ‘point’ to a specific element of our HTML. CSS can use HTML
elements as selectors, such as the paragraph, anchor, em and strong tags.

When you use a selector in CSS, it automatically refers to and applies the specified styles to all
specified elements in the HTML. There are several ways to make these selectors ‘unique’ or point to
only ‘some’ parts of HTML that contain the same element or selector.
A class is an effective way of referencing a specific part of our HTML code, we are basically pinpointing
the section of our code that contains the class we have created in our style and applying that styling to the section that is included in the section of code with the class implemented. We canrefer to classes with a ‘.’ at the start of the class name in our CSS and we can add a class to just about any HTML element to effectively add styling to our HTML.

Lets try the same thing, but this time adding our CSS to the head section of our HTML document
and using selectors.

        
        
            
            
            

                header{
                    color: #ffffff;
                    background-color:#000000;
                }
                p{
                    color:rgb(0,255,0);
                }
                em.bottom{
                    font-size:10px;
                }
                footer{
                    font-weight:bolder;
                }

Using ids in CSS

As you may have guessed, we are using a class to identify our bottom em tag. The dot notation
before the class name allows us to select or target an element in our HTML by it’s class name. We can use id’s like so:

        
        
            
            
            

                header{
                    color: #ffffff;
                    background-color:#000000;
                }
                p{
                    color:rgb(0,255,0);
                }
                em#bottom{
                    font-size:10px;
                }
                footer{
                    font-weight:bolder;
                }

All we have to do is change ‘class’ to ‘id’ for the element we are referring to, and change the ‘.’ in
front of our CSS selector (in the head element) to the ‘#’ symbol.

The # symbol (when not used as href attribute) is generally used to signify an id within the HTML.
The major difference between using classes and id’s is; classes can be re-used time and time again in
the same HTML document, whereas id’s must be unique.

You can think of a class as a group or multiple items, and an id as a single identification.
The output of the above code is the same as the output for the previous code example, we are getting the same results as we are basically telling the browser the same thing, just in different ways.

Creating External CSS

To add an external CSS to our HTML, we need to tell the HTML all about it- what relation it has to
our HTML, the type of file it is and its location and name.

Remember the meta tags from before?

Well this is implemented in the same way (completely different concepts), by adding a line of code
into our head section of our HTML document.

We use a rel value to tell HTML what the CSS file’s relation is to the HTML, a type value to tell the HTML the type of file it is and a href value telling the HTML where the file is located and its name.

Note: CSS files have a file extension of .CSS

We can add an external style sheet to our HTML by using link tag.
So, lets create a small CSS file, to use externally.

  header{
            font-size:25px;
            color:#111111;
            font-weight:bolder;
        }

        footer{
            font-size:12px;
            color:#00ff00;
        }

        p{
            color:#ff0000;
        }

Go ahead and save the above styling into a new CSS file, titled style.css.

Linking to External CSS

If our style sheet was located in the same directory as our HTML file, we would add the tag to the head section of the HTML document, like so:

Just as our CSS examples’ before, no matter of its location (inline, internal and external), the CSS
will tell the browser to render the styles for our HTML in the same way.

HTML Element State

With our new CSS abilities we are able to style a HTML element based on it’s ‘state’.

HTML Element state refers to the ‘state’ that the elements is in; some of these include: Hover and Active.
You may have noticed that when you hover over a link on a web page, that the link will change
color (among other aspects).

We can do this with almost any HTML element.

article:hover, article:hover a{
            background-color:#ff0000;
            color:#ffffff;
        }

        article:active{
            background-color:#222222;
        }

In the above example we have styled all ‘hovered’ over articles and the anchor tags, when the article
is being ‘hovered’ over with a background of red and a text color of white.

Along with defining hover style, we can define active style. Active is defined by an element that is
‘actively’ being clicked on, i.e. if you are clicking a button, that button’s state is now active.
In the above example, an article that is ‘active’ will have a background color of almost black.

The CSS Box Model

One of the fundamental understandings of CSS is the Box Model. The Box model helps us to
understand the layout and design of HTML and CSS.

The CSS Box model is made up of content, Padding, Borders and Margins.

So… what is Padding, Margins and Borders?

As you can see, padding is the gray area that surrounds our content, borders are what surround the
padding and margins are what spaces our ‘box’ from the surrounding elements.

By definition:
-The padding is the area that separates the content from the border.
-The border is the area that separates the padding from the margin.
-The margin is the area that separates the surrounding elements from our ‘box’ or element.

How do we define these?

div{
            height:50px;
            width:500px;
            padding:50px 30px;
            margin:0 auto;
            border:1px solid #000000;
        }

In the above example, we have set the padding for the top and bottom of the element to 50px and the left and right padding to 30px. The margin has been set to 0px for the top and bottom and the left and right margin is set to auto. When we set a value of auto in our margins, it will basically ‘centre’ the element within the containing or parent element.

As you may have noticed, we have also set our border. Our border is 1px wide for each side, is solid
and has a color of black.

The rendered output will be 152px in height (top and bottom padding, plus the width of
our borders and the specified height of our element) and 562px in width (left and right padding,
plus the width of our borders and the specified width of our element).

Fonts

When using CSS we can change the default font-family of our text. We can specify multiple font-families for any given element. If the user has the first specified font on their system, that is the font that will be rendered. If the user does not have our first specified font on their system, the browser will attempt to render the next font and so on until one of the fonts are located on the users system.

These font-families are separated with a comma and the proceeding fonts are referred to as fall-back fonts.

header{
            font-family: "Helvetiva Neue", Helvetica, sans-serif;
        }

In the above example we are saying that our header should have a font-family of Helvetica Neue, if that is not located on the users system, we will try Helvetica. If Helvetica is not located on the user’s system, we will ‘fall-back’ to a generic sans-serif font.

You can find out more about sans-serif fonts here: Sans-serif.

Opacity

In CSS3.0 we can easily specify an opacity for an element:

section article{
            opacity:0.5;
        }

In the above code we are saying that every article within a section should have an opacity of 50%.

This is will make all of our articles within a section appear transparent. When we set the opacity of an element, we are also setting the contents’ opacity as well and this can have undesired effects.

Alpha Color Space

Instead of using the opacity property in CSS, we can set an Alpha Color Space. We can do this by specifying the color or background-color of an element using the rgb color values.

Now, to specify the Alpha Color Space, we simply add an extra value to our rgb color values; what I mean by that is we change rgb to rgba and have four values for the colors, instead of the usual three.

The Alpha Color Space value will take a value of between 0 and 1.

The Alpha Color Space will specify the opacity of that element.

section article{
            height:100px;
            width:150px;
            background-color:rgb(255,0,0);
        }
        section article:active{
            background-color:rgba(255,0,0,0.5);
        }

In the above example we have set all of our articles within a section to have a background-color of red. When these articles are hovered over, we are using the same color, but with a Alpha Color Space value of 0.5. In other words, when we hover over our article elements we will have a background-color that will be slightly transparent.

Box Shadow & Border Radius

In the next example you will notice the border-radius and box-shadow properties. We can specify a box-shadow for most of our HTML elements and this will literally give our ‘box’ (or element) a shadow; giving the element a 3D like appearance.

The box-shadow property can take 4 parameters; the h-shadow value, the v-shadow value, the blur-distance and the color of the box-shadow.

The border-radius property will set a ‘border radius’ for each of out elements corners; resulting in rounded corners.

div{
            height:50px;
            width:150px;
            box-shadow:3px 2px 2px #000000;
            border-radius:4px;
            padding:8px;
        }

This will be the resulting output:

To learn more about CSS3.0, check out the CSS3.0 Roadmap.

I hope you found this resource useful!