CSS: Cascading Style Sheets

The basic idea: "I want the following HTML to look this way". 



CSS selectors that specify the HTML segment selected  { 
  
    define a style for the selection 

}

Any HTML tag (like h1, p, li...etc) can serve as a CSS selector and the style specified will be applied to all occurrences of that specified tag. 

h1 {
     /* comments in CSS are different from comments in html */

     /* 
     property: value ; 
     */


     color: blue;
     background: yellow;


}
Notes

Three ways to apply CSS styles to HTML
  1. Loading external style sheets
    • By creating a separate file describing a style, you can apply the style to all your pages by loading the external file



  2. Embedded style sheets
    • Embed the style sheet in your HTML file using the <style> element




  3. Inline style sheet
    • Applying styles to individual HTML tags

Notes

Loading external style sheets

By creating a separate file describing a style, you can apply the style to all your pages by load the external style sheet.

Create a file with the CSS styling into a file with the extension .css.

File: mystyle.css

      
h1 {
     /* comments in CSS are different from comments in html */
     color: blue;
     background: yellow;
}


p {
   font-style: italic;
}


Then using the <link> tab include the CSS style sheet into the HTML file

File: 01_external_css.html 


<!DOCTYPE html>
<html>

<head>
<title> My First HTML Page with External CSS </title>

<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>


<body>
<h1> My Heading </h1>
<p> This is a paragraph. </p>
</body>
</html>

Here, we are assuming that mystyle.css and the html file is in the same directory. If it is in another directory, specify the URL the same way you did with links (eg. absolute or relative pathnames).

Notes

Embedding Style Sheets in HTML file

File: [before], [after] 

<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page with Embedded CSS </title>
<style>
h1 {
     /* comments in CSS are different from comments in html */
     color: blue;
     background: yellow;
}
p {
   font-style: italic;
}
</style>
</head>
<body>
<h1> My Heading </h1>
<p> This is a paragraph. </p>
</body>
</html>

You can embed the style sheet using the <style> element whereever you want, but generally within the <head> element.

Notes

Applying Inline Styles

This method is considered least desirable since they intertwine content with presentation.

File: [before], [after] 

<!DOCTYPE html>
<html>
<head>
<title> My First HTML Page with Embedded CSS </title>
</head>
<body>
<h1 style="color: red; background: blue;"> My Heading </h1>
<p style="font-style: normal; font-weight: bold"> This is a paragraph. </p>
</body>
</html>
Notes

CSS Selectors

CSS selectors to specify the HTML parts  { 
      define a style for the selection 
}

Here are some ways of specifying CSS selectors

Comma Separated Lists: applies the style rules to all the tags listed. Hence, the following:

ol, ul, dl {
     color: red;
}

is the same as 

ol {
     color: red;
}
ul {
     color: red;
}
dl {
     color: red;
}


Contextual Selectors: used to specify elements in a specific context where the element is nested inside another element.

The following, without commas in between the elements, specifies only the <em> elements nested inside the <p> element. 

p em {
     color: blue;
}
What about this? 
p a em {
     color: blue;
}
Notes

Cascading Rules

Sample file

Styles come from many sources.

  1. Browser
  2. Various external style sheets
  3. Embedded style sheets
  4. Inline style

The style cascades down from universal specifications in the browser to the more specific ones you specify.

For example, most browsers define the styling of an <h1> element. If you do not specify a style for <h1> yourself, that style defined in the browser cascades down and becomes the effective style for <h1> in your page.


The styles applied folllow the following logic:

  • The style that appears the most recent in the order CSS is loaded (Browser -> External -> Embedded -> Inline) overrides the previous definitions.
    • Since inline styles always appear the latest, it overrides everything else.

  • If there are ties, the more specific CSS selector takes precedence.
    • <p> <em> is more specific than <em>

Notes

Developer Tools

Notes

Block-level and Inline HTML elements

Sample file



You can change the type of an element by using the following CSS property 

display: block; //turn it into a block-level
display:inline; // turn it into inline
display:none;   // don't display
For example, 
div {
   display:inline; 
}

Now you can specify arbitrary areas of HTML code with CSS by using the <div> and <span> tag

What if I have more than one <div>s and <span>s in my HTML page?

Notes