Aug
29
2017

Beginners’ Guide to CSS (CSS for dummies)

Article by Janani Dabare

CSS (Cascading Style Sheets) has become one of the most significant tools for building websites. CSS is mainly used to style and layout web pages, for example, to style the font color, size, spacing, split it into multiple columns, or add animations and decorative features. Explained below are the rules of CSS, how they are applied to HTML, how to specify length, color and other attributes in CSS.

CSS rule

CSS rule explains how a browser renders element. It consists of two main parts: Selector and Declarations.

Selector – A selector can contain more than one type of selectors. Those can be either type, class or ID selectors separated by combinators. An example for combinators is greater than (>), plus sign (+) and tilde (~).

Declaration – This is followed by a colon and then the property value. Multiple declarations can be arranged by organizing them into semicolon separated groups.

How to insert CSS

There is more than one way of adding CSS to a document.

External style sheet
This is the commonly used method for adding CSS to an HTML document. Styles are included in a separate CSS file which is saved with a .css extension. To add this external style sheet, you can include the below HTML code inside the tag.
```
<head> <link rel="stylesheet" type="text/css" href="mystfyle.css"> </head>
```
Internal style sheet
CSS rules are directly embedded into an HTML using this method. The following code is needed to add styles to the <head>.
```
<head>
 <style> 
   body {background-color: black;}
   h1 {color: maroon;  margin-left: 40px;}
 </style> 
</head>
```
Inline styles
Styles can be directly added to any HTML element using this method. Style parameters can be added to the element and enter the style rules as values, as shown in the example below:
```
<h1 style="color:blue;margin-left:30px;">  This is a heading.  </h1>
```
Importing a CSS file
CSS file can be attached to the page using this method. To import the CSS file, simply use the following rule:
```
@import "newstyles.css";
```

Box Model

All HTML elements can be considered as conceptual boxes made up of content, padding, borders and margins.

The innermost area is the content area. This contains the element’s actual content such as text or images.
The padding area surrounds the content area while separating the content from the border area.
The border area is the outermost part of the box which can be identified as an outline to the box.
The margin area exists outside the box. It is the shape around the element that separates it from the other elements. Space around the elements is created through this.

CSS properties

Padding
This property is used to create space around the content.The padding can be controlled by using CCS.There are CSS properties for setting padding for each side of an element:

Padding: <padding-top> | <padding-right>| <padding-bottom> | <padding-left>

Margin
This property is used to create space around elements. This sets the size of the white space outside the border. There are CSS properties for setting margin for each side of an element

Margin: <margin-top> | <margin-right>| <margin-bottom> | <margin-left>

Below is an example of how paddings and margins can be used in an element

div {
    width: 158px;
    border: 1px solid #d3d3d3;
    padding: 20px;
    margin: 2px;
}

Backgrounds
Background properties can be used to define the background effects of HTML elements.

Background: <background-color> | <background-image>| <background-position> | <background-size>

List property

Lists can be used to convey a set of either numbered or bullet points.

In HTML, there are two main types of lists:

Unordered lists (<ul>) – list items are marked with bullets
Ordered lists (<ol>) – list items are marked with numbers or letters

List property allows to:

Use different list item markers for ordered lists
Use different item markers for unordered lists
Use an image as the list item marker
Use background colors to list items

Unordered list and Ordered list

list-style: <list-style-type> | <list-style-position> | <list-style-image>
This property is the shorthand property which sets value for the three different list related properties.

list-style-type

This defines the type of the list by setting the content of each marker on the list. Below are keyword values for list-style-type:
disc, circle, square, decimal, lower-alpha, lower-roman, upper-roman, upper-alpha>

list-style-image

This defines whether the list marker is set with an image, accepts an image URL or value of “none”

Table

The visual representation of a HTML table can be improved using CSS. ‘<table>’ element is used to create tables in conjunction with <tr> and <td> elements.

HTML table structure

Tables are defined with the <table> tag.
A table row can also be divided into table headings with the <th> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.

The look of an HTML table can be greatly improved with CSS

Table borders
Table width and height
Table padding
Hoverable table
Striped table
Table color

Table border

Borders can be added using CSS to the whole table or to individual table cells. Adding a table border will result in a border around the outside of the table, but not around each table cell. To get a grid-like effect borders need to be added to all of those elements.

Table width/height

Table widths and heights can be specified using CSS width and height properties, in either pixels or percentages.

Hovarable Tables

CSS: hover property can be used to make the row of a table highlight on hover.

Figure 1: Hoverable table (Image source: http://8i54s5.axshare.com/)

Fonts

CSS gives a great control over the text to be displayed on the web. Font customization can be done using different properties available in CSS. A font family can be one of the following:

Generic family – a group of font families with a similar look (like “Serif” or “Monospace”)
Font family – a specific font family ( “Times New Roman” or “Arial”)

Difference Between Serif and Sans-serif Fonts

Figure 2: Difference between Serif and Sans-serif fonts (Image source: https://www.w3schools.com/css/css_font.asp)

Generic Family	Font Family	Description
Serif	Times New Roman / Georgia	Serif fonts have small lines at the end of some characters
Sans-serif	Arial / Verdana	“Sans” means, these fonts do not have the lines at the end of characters
Monospace	Courier New / Lucida Console	All monospace characters have the same width

font-family: family-name | generic-family
This property defines the font which is applied to the element. The font is not a single font face, it is a “family” of fonts and may be dependent on other typographic values to select the correct font face within the family. A font family property holds several font names. If a browser does not support the first font, it tries for the next available font name.

p {font-family: "Times New Roman", Georgia, Serif;}

font-style: normal | italic | oblique | initial | inherit;
This property selects italic or oblique faces within a font-family. Italic form is generally cursive, normally using less horizontal space, while oblique faces are the usually slopped version of the regular font face.

font-weight: normal | bold | bolder | lighter | number | initial | inherit;
This property sets the thickness of a front and it is dependent either on available font face or weights defined by the browser. Normally the keyword ‘normal’ maps to the value 400 and ‘bold‘ maps to value 700.

Font color

Figure 3: Text decoration (Image source: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-decoration)

Figure 4: Text transform (Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-transform)

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;
This property adds shadow to text. The first two values specify the horizontal and vertical distance of the shadow. The third value specifies the blur radius and the last one describes the color of the shadow.

Figure 5: Text shadow (Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-shadow)

Figure 6: Text align (Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-align)

@FONT-FACE RULE

With the @font-face rule designers no longer need to use web-safe traditional fonts. The font can either be downloaded and applied to the project or it can directly use a URL in the style sheet.
In the latest @font-face rule, initially, a name must be defined for the new font.t (eg: myFirstFont) and then point to the font file.

@font-face{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

Round Corners
With the CSS3 border-radius property supports ‘rounded corners’.

The border-radius property is a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Gradients

Earlier, images were used for Gradients. Now CSS3 gradients display smooth transitions between two or more specified colors.

CSS3 defines two types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

Linear Gradients
Most common and useful type of gradient is the linear-gradient(). The gradients “axis” can go from left-to-right, top-to-bottom, or at any angle you chose.
background: liner-gradient (direction, color-stop1, color-stop2);

Radial Gradients

In a radial gradient color emerges from a single point and smoothly spreads outward in a circular or elliptical shape rather than fading from one color to another in a single direction as with linear gradients.

background: radial-gradient (color-stop1, color-stop2);

Shadows

CSS3 gives the ability to add drop shadow effects to the elements similar to Photoshop without using any images.
box-shadow: offset-x offset-y blur-radius color;

offset-x — Sets the horizontal offset of the shadow.
offset-y — Sets the vertical offset of the shadow.
blur-radius — Sets the blur radius. The larger the value, the bigger the.
color — Sets the color of the shadow.

Pseudo Class Selectors

Pseudo-classes are used to define a special state of an element. These pseudo elements are useful in various situations.

History of the navigation (:visited, for example),
The status of its content (like :checked on some form elements)
Position of the mouse (like :hover which lets you know if the mouse is over an element or not)

Syntax

Figure 7: Pseudo code class added links (Image source:https://www.smashingmagazine.com/2010/02/the-definitive-guide-to-styling-web-links/)

:hover – When the mouse cursor rolls over a link, that particular link is in its hover state.

button:hover {background-color: green;}

:active – Selects the link while it is being activated

a:active {color: red;}

:visited- select only links that have been visited

a:visited{color: purple;}

:first-child – Selects the first element within a parent

p:first-child {background-color: yellow;}

:last-child – Selects the last element within a parent

p:last-child {background-color: red;}

:nth-child()- The selector allows you to select one or more elements based on their source order, according to a formula

:empty – Selects only elements that have no children and no content

:disable – Selects inputs that have the disabled attribute. A lot of browsers will make the input a faded out gray, you can control that with this selector.

Figure 8: Disable pseudo class(Image source:https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_enabled_disabled)

:checked – Deals with the state of an element such as a checkbox or radio button.

Figure 8: Checked pseudo class (Image source:https://css-tricks.com/almanac/selectors/c/checked/)

CSS is evolving day by day. There are a number of new CSS strategies which will come into play in the near future. CSS3 is constantly on the move, as new properties are adopted and some old properties are dropped from latest browsers.

CSS preprocessors are the latest CSS innovation. CSS preprocessors help to write maintainable, future proof code and reduce the number of lines in CSS. CSS preprocessors such as Sass, Less, and stylus solve all these issues by introducing reusable variables and more.

References