CSS

CSS 101

  • CSS stands for ‘Cascading Style Sheets’. It is used to describe the style of an HTML document.
  • CSS is a language for presenting web pages.
  • CSS was specially designed to format the appearance of web pages and is widely used to resolves the need for HTML attributes to control the appearance of an element.
  • With CSS we are able to change the appearance of many elements at once.

 

“ CSS describes how HTML elements should be displayed. ”

Adding CSS to an HTML Document

There are three ways you can add css to an HTML document.

  1. Inline CSS
  2. Internal CSS – Style Tag
  3. External CSS

 

Inline CSS

We use inline style to apply a unique style for a single html element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

<div style=”background-color: red;”> </div>

 

The Style Tag

We use the style tag (<style>) to add CSS to an HTML document. It is best to put the style element inside the head element.

Note: use this method if one single HTML page has a unique style.

<style>

div{

background-color: red;

}

</style>

 

External CSS

We use external CSS to change the look of an entire website by changing just one file.

To apply the effects each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

HTML FILE:

<link rel=”stylesheet” src=”style.css”>

CSS FILE:

div{

background-color: red;

}

h3{

color: blue;

}

CSS Syntax

CSS Syntax is the standard format for writing CSS code.

There are few terms we can derive from the previous page:

  • Selector – This is an identifier, a name that references a particular HTML element.(eg. div,p,body).
  • Property – This is a particular characteristic of an element that you want to change.(eg. color,height,width.
  • Value – This is the figure that a particular property can have. It can be a number like 50cm for height, a color name like purple or anything else.

These are measures used to determine the size, length and width of an HTML element. For example, when we say that a football pitch is 100 meters long, the unit used here is ‘meter’.

We are going to learn two different units:

  • Pixels
  • Percentage

Pixel

A pixel is considered as the smallest single component of a digital image. It doesn’t matter what a pixel is, what matters most is why we use pixels.

A pixel is a small unit of measurement than a meter or a centimeter. This makes it easier to make designs which are more precise.

Device screens are also small hence they require small units. Using larger units will force us into using decimals to make designs which fit the screen. You do not want to use decimals, do you?

Pixel unit is denoted by ‘px’.

 

Percentage/Percent

We all know that percentage is a fraction of 100. In CSS it is the size of an element’s property relative to that of its parent element. For example, if the width of a child element is 50%, then it occupies 50% of it’s parent width.

Percentage unit is denoted by the symbol ‘%’.

 

Applying Units

  • Negative values are allowed.
  • A whitespace cannot appear between the number and the unit.

div {

height:   150px;

width:   62%;

}

CSS properties are names of the physical characteristics of an HTML element. These properties include height, width, border-color, font-size and many more.

All CSS properties have their own associated values. For example, height property takes in a number with a distance unit (5px, 10cm and so on).

In CSS, all properties and their values are written in small letters. Units are also written in small letters.

The trick in CSS is to combine several properties to get a desired design.

Display Property

The display property specifies how an element aligns itself in the HTML document.

There are many values associated with the display property but we’re going to learn only 3:

 

  • block                         display: block;  
  • inline-block             display: inline-block;  
  • inline                         display: inline;  

 

Display Block

A block element allows no other element beside it even if there is space to accommodate another element.

An block element will never try to fill in space left by other elements. It will, instead, position itself at the bottom of its sibling element.

 

 

Display: Inline-block;

An inline-block element allows other elements beside it.

An inline-block element will also fill in space left by another inline or inline-block element. This is only if there is enough space to accommodate it.

 

Display: Inline;

An inline element allows other elements beside it.

An inline element will also fill any space left by its sibling element regardless of whether it fits or not. If the space is not enough for all of it to fit, the inline element will cut itself to fill the available space before jumping to the bottom.

 

CSS Flexbox

A Flexbox makes it easier to design flexible responsive layout structure without using float or positioning.

To start using flexbox in styling you first have to define the parent element as a flex container by giving its display property to flex

E.g div{ display: flex;}

Then all the child elements should have flex values of your desired ratio

Eg. img,p{ flex: 1;}

 

Width & Height Properties

width property specifies the horizontal size of an HTML element.

height property specifies the horizontal size of an HTML element.

Both these properties accept a numeric value followed by a unit. We recommend you use pixel (px) or percentage (%) as a unit.

 

Background-color property

background-color property specifies the color of an HTML element.

The property accepts any color as a value.

  • It is written ‘color’ and not ‘colour’.

 

Color Property

color property specifies the color of text in an HTML element.

The property accepts any color as a value.

 

Border-width Property

border-width property specifies the thickness of an HTML element’s border.

The property accepts a numeric value followed by a unit. We recommend you use pixel (px) or percentage (%) as a unit.

Example:

border-width: 8px;

 

Border-style property

border-style property specifies the style of an HTML element’s border line.

The property accepts many different values. We are going to learn some:

 

Border-color property

border-color property specifies the color of an HTML element’s border.

The property accepts any color as a value.

Example:

border-color: purple

 

Border Shorthand Property

It’s possible to specify all individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

The previous border properties can also be written as

border: 8px solid purple;

 

border-radius property

border-radius property specifies the roundness of an HTML element’s border.

The property accepts a numeric value followed by a unit. We recommend you use pixel (px) or percentage (%) as a unit.

  • Set its value to 0 for an edgy shape.
  • Set its value to 100% for an round shape.

Example:

border-radius: 5px

Horizontal alignment deals with positioning text relative to the horizontal space available. This can also be said to be positioning of text relative to the width available.

To align text horizontally, we simply use the text-align property. The text-align property takes in values: left, center and right.

Example:

text-align: center;

text-align: right;

text-align: left;

 

Vertical Alignment

Vertical alignment deals with positioning text relative to the vertical space available. This can also be said to be positioning of text relative to the height available.

To align text vertically, we use the line-height property or the padding property.

The line-height property accepts a numeric value followed by a unit. We recommend you use pixel (px) only as a unit.

  • Unfortunately, the line-height property does not take in relative units (percentage %).
  • The line-height property is only useful for HTML elements with single-line text.

 

Line-height property

The line-height property is mainly used to align text at the middle of an HTML element.

To do this, you must make sure that the value of the height property and the line-height property are the same. These values must also be absolute values (values in pixels and not percentage).

  • The line-height property can only be used to vertically center single-line text.

Example:

line-height: 100px;

 

Padding Property

Due to limitations of the line-height property, the padding property is used in cases where the line-height property is not helpful.

Padding is the empty space around the content of an HTML element. Text is restricted from occupying the padding space.

Example:

padding: 20px;

 

If you want text to start at the top of an HTML element, make sure the padding-top property is set to 0.

If you want text to start at the middle of an HTML element, make sure the padding-top property and padding-bottom property have the same value. It is also important to make sure that there is just enough space for text to fit inside the content space.

If you want text to start at the bottom of an HTML element, make sure the padding-top property is set to the highest value possible to enable text to just fit in.

  • With CSS you are able to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.

 

  • The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom.

 

  • A z-index property can help you to create more complex web page layouts. 

Example:

HTML

<div class = “div1”></div>

<div class = “div2”></div>

<div class = “div3”></div>

CSS:

.div1{

background-color:yellow; 

width:300px; 

height:100px; 

position:relative; 

top:60px; 

left:80px; 

Z-index:1;

}

.div2{

background-color:red; 

width:300px; 

height:100px; 

position:relative; 

top:-60px; 

left:100px; 

Z-index:2;

}

.div3{

background-color:green; 

width:300px; 

height:100px; 

position:relative; 

top:-180px; 

left:120px; 

Z-index:3;

}