CS 102 : Intro to CS

Appearance

Lesson 1 ​

Basic CSS

CSS Structure ​

Cascading Style Sheets (CSS) is a set if properties that the modern browser can use to format various HTML tags. Properties in the CSS file will override the browser's default formatting for any styles included in the file

Styles to be included in your web pages are described in a file with the extension .css

The filename can be anything, but typically is named style.css

To identify the CSS file to the browser, it is linked in the HTML <body> section

html
<head>
	<title>I forgot to change my title!</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
</head>

<link rel="stylesheet" href="style.css"> tells the browser to load style.css as a stylesheet, and use the contents to override browser defaults with any tags inside the file

Anatomy of a Style ​

Any HTML tag included in the CSS file will cause the browser to format all instances of that tag with the included style elements

css
h1 {
  color: red;
}

color is a style property

red is a style value

All property/value pairs inside the curly braces will be applied to the tag (<h1> in the example)

Note: No <> are used in CSS files

Also, each format option This tag style will make all <h1> text red

All other styles, such as font, size, etc will still be rendered using the browser's default styles

For multiple property/value pairs, each is separated by a semicolon

css
h1 {
  color: red;
  font-size: 18px;
}

Insert CSS into an HTML Document ​

Inline ​

A list of style property/value pairs can be include directly in an HTML elements. Only the element containing the style will be affected

This works best in a page with many of the same HTML elements that need have different styles

Example:

html
<!DOCTYPE html>
<html>
 <body>
   <p style="color:red;">This is a red paragraph.</p>
   <p style="color:green;">This is a green paragraph.</p>
 </body>
</html>

Below is what how it will appear in a browser

This is a red paragraph.

This is a green paragraph.

This approach to styling pages should be used sparingly. Updates page styles can be a lot of work. Also, the page looses a lot of continuity when elements look different

Internal ​

A complete style block can be defined inside of the HTML file. All style elements are enclosed in a <style></style> block

Example:

html
<!DOCTYPE html>
<html>
 <head>
 <style>
   body {
     background-color: linen;
   }
   h1 {
     color: maroon;
     text-align: center;
   }
   p {
     color: green
   }
 </style>
 </head>
 <body>
   <h1>This is a heading</h1>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>
 </body>
</html>

Below is what how it will appear in a browser

This is a heading

This is a paragraph

This is another paragraph

Using this approach it is easy to set all HTML elements of the same type to the same style settings

This does make the HTML file longer, and the styles only work in that HTML file Define all styles in a separate file and link it into the HTML file. If a website with multiple pages, the developer will need to copy/paste the <style></style> block into all HTML files. And, any changes to a style must be updated in all files

External ​

CSS styles are defined in a separate file. That file is then linked into the HTML's <head></head> section. All styles in the file will be imported in and applied to the rendered HTML elements

Example:

mystyle.css

css
   body {
     background-color: linen;
   }
   h1 {
     color: maroon;
     text-align: center;
   }
   p {
     color: green;
   }
html
<!DOCTYPE html>
<html>
 <head>
   <link rel="stylesheet" href="mystyle.css">
 </head>
 <body>
   <h1>This is a heading</h1>
   <p>This is a paragraph</p>
   <p>This is another paragraph</p>
 </body>
</html>

Below is what how it will appear in a browser

This is a heading

This is a paragraph

This is another paragraph

The same files can be linked into multiple HTML files to make pages consistent. Any change to styles it make in the CSS file and are seen immediately in all pages

Use External CSS in CS-102

For small project external CSS files are the simplest way to organize styles and apply them to create constant pages

Basic CSS properties ​

All examples are shown as they appear in a separate CSS file

color ​

Change test color of an element

Example:

css
p {
 color: darkblue;
}
html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

background-color ​

Color of background of element

Example:

css
body {
	background-color: lightblue;
}

Colors entire content area of browser

css
p {
 color: darkblue;
 background-color: lightblue;
}

Colors the area behind the text in the paragraph

html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Built-in Color Names

Modern browsers support 140+ color names for Text, Backgrounds, and other CSS elements

Check out W3School's CSS Color List

width ​

Sets the percentage of the browser's horizontal area that an element will occupy

Example:

css
hr {
 width: 50%;
}

Below is what how it will appear in a browser

The above HR is spanning 1/2 the content area of this page. It is centered, by default

font-size ​

The letter size of text in an element. There are several different units of measure. We will be using px or pixel measurements

Example:

css
p {
 font-size:25px
}
html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

font-family ​

A list of preferred fonts, in the order of preference. If the browser does not support the first font listed, it will try the next, continuing down the list until it finds one it supports. If none are supported, the browser will choose its default font

Fonts containing a space in the name require double quotes around the font name

Example:

css
p {
 font-family: "Lucida Console", "Courier New", monospace;
}
html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

The font of the test, above, may be different depending on the browser you are using to view this page

text-align ​

Aligns the text in the element on the browser content area

Example:

css
p {
 text-align: left;
}
html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

p { text-align: right; }

``` html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

css
p {
 text-align: center;
}
html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Combining All the Basic CSS Properties ​

Example:

css
p {
 color: darkblue;
 background-color: lightblue;
 font-size:25px;
 font-family: "Lucida Console", "Courier New", monospace;
 text-align: center;
}
html
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

Below is what how it will appear in a browser

Lorem ipsum dolor sit amet consectetur adipisicing elit.

width was left out of this example because it does not work well with text-align. The results in unexpected, and usually undesirable

Class-based Styles ​

Example: Style blocks can be defined with a custom name. It must start with a period in th eCSS file to be recognized as a class

css
 .MyClass {
   color: lightgreen;
 }

To tell the browser to use the class to style any HTML tag, add a class="<the class name>", replacing the class name with the name used in the CSS file

Also, do not include the period when using in the HTML file

html
<h3 class="MyClass">This H3 is styled by a Class-based style</h3>
<p class="MyClass">This Paragraph is also the same color as the header above</p>

The browser will render all tags containing the class reference using the styles in the CSS file

This H3 is styled by a Class-based style

This Paragraph is also same color as the header above

Combining Tag and Class Styles ​

Tag and Class Styles can be combined so that the browser will apply a class style only to specific tags that has the class included

Example:

css
p {
 color: darkblue;
}

p.MyClass {
	color: brown;
}

All paragraph tags will be colored darkblue...

unless the paragraph has the class MyClass included. Then it will be colored brown

html
<p>Just a paragraph without myclass</p>
<p class="MyClass">A paragraph with a myclass</p>

The class included inside the paragraph tag of one line The browser will render all tags containing the class reference using the styles in the CSS file

Just a paragraph without myclass

A paragraph with a myclass

This work is licensed under a Creative Commons License

Creative Commons BY NC 4.0 International License