Table of Contents

The Cascasding Style Sheet or "css"

What is CSS?

CSS is the styling language for HTML code. It control how you HTML document would appear on the screen. It may affect a number of html pages at once, since the same style is used in each page. It saves a lot of time and effort. With an external stylesheet file, you can change the look of an entire website by changing just one file!

CSS style may be used inside the html document or it may be in separate files which shoud end in ectension ".css". CSS defines the design, layout and variations in display for different devices and screen sizes.

CSS Syntax

Each CSS rule consists of two parts:

  • Selector : That is the HTML element you want to style.
  • Declarations : each declaration consists of: * name , e.g. color
    • colon :
      • value , e.g. red
  • Declarations are separated by semicolons (;) and enclosed in curly brackets "{}"
p {
  color: black;
  text-align: left;
}

TYPES OF SELECTORS

Element Selector

Element selectors are html elements like "

". To use it just enter element name and follow it with declaration block.

ID SELECTORS

Some HTML elements have id attribute inside the element to select a specific element with the same name. This id is unique to this element and not others with same name.

To use this selector you must enter the id name after "=" before the declaration block.

CLASS SELECTORS

Some HTML elements has a class attribute. This selector control elements with such class attribute, not any other class. To select elements with a specific class attribute, enter dot (.) followed by the class name before the declaration block.

You can also select specific elements with this class to be affected by the declarations, if you enter the name of element to select before the dot and class name.

p.center {
  text-align: center;
  color: red;
}

You can also select an element with specific two class names.

<p class="center large">This paragraph refers to two classes.</p>

UNIVERSAL SELECTOR

This select all elements on the page.

* {
  text-align: left;
  color: black;
}

GROUPING SELECTORS

You may want to specify a declaration for a group of elements in the HTML document. To group elements separate their names with commas.

h1, h2, h3{
  text-align: center;
  color: red;
}

How to use CSS Styling

You can use CSS in three ways: - External CSS - Internal CSS - Inline CSS

After creating a separate css file, include a reference to the external style sheet file inside the

<link> element in you html document.
<code>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
</code>

If you want to use css inside the html file, define your selectors and declarations inside the "style" element inside the head section of the html file.

<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>

Inline CSS is used when you want to apply a style attribute within the element you want to style.

<h1 style="color:blue;text-align:center;">This is a heading</h1>

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

  • Inline style (inside an HTML element)
  • External and internal style sheets (in the head section)
  • Browser default

Declarations

Color

You specify color with color name or its RGB, HEX values.

Color Names : see this link [[https://www.w3schools.com/colors/colors_names.asp| Color Names ]]

  • RGB Values : "rgb(255, 99, 71)"
  • HEX values : "=ff6347"
  • HLS values :"hsl(9, 100%, 64%)"

You can control :

  • Background Color : ""
  • text color : ""
  • Border Color : ""

Background

CSS background properties:

  • background-color and opacity : "background-color: green; opacity: 0.3;"
  • background-image : "background-image: url("paper.gif");"
  • background-repeat :
  • "background-repeat: repeat-x;"
  • "background-repeat: repeat-y;"
  • "background-repeat: no-repeat;"
  • background-attachment :
  • "background-attachment: fixed;"
  • "background-attachment: scroll;"
  • background-position : "background-position: right top;"

Borders

The border-style property specifies what kind of border to display. "{border-style: dotted;}" border-style properties :

  • dotted ..............
  • dashed ------------
  • solid -
  • double =
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Border width:

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):

h1 {
  border-style: solid;
  border-width: 5px;
}

h2  {
  border-style: solid;
  border-width: 25px 10px 4px 35px; 
  /* 25px top, 10px right, 4px bottom and 35px left */
}

References

  • https://www.w3schools.com/Css/
  • https://en.wikipedia.org/wiki/CSS

Back to Top