This tutorial is a very basic look at how to style websites with CSS. You should already know HTML Basics. For a bit more advanced tutorial, learn how to Build Your Own Website with basic HTML and CSS.CSS is the programming language used to style HTML websites. The size of buttons on your website, the color of text in your application are all styled with CSS. You can also use CSS to style elements of your website based on screen size and device.

Description of CSS

  • CSS stands for Cascading Style Sheets
  • CSS is a programming language that describes how HTML elements should be displayed on screen
  • CSS can control the layout of many web pages at once

Using CSS Selectors

Let’s go over what everything in the CSS example above:

  • The “h1” is called a “selector”. The selector points to the HTML element you want to style.
  • The “declaration block” is surrounded by curly braces and contains CSS style rules. The declaration block contains one or more declarations separated by semicolons.
  • Each CSS “declaration” contains a CSS property name value pair. The property and name value is separated by a colon and ends with a semi-colon.

In the following example all <section> elements will be left-aligned. The text color will be blue.

 

CSS Selectors

CSS selectors are used to target HTML elements based on their element name, ids, classes and attributes.

 

The element CSS Selector

The element CSS selector targets HTML elements by their HTML element name. You can target all <h1> elements on a website like the example below. All h1 elements will be aligned center with a red text color.

 

The id CSS Selector

The id HTML selector uses the id attribute of an HTML element to target a single HTML element. The id of an HTML element should be unique on a single web page, so the id selector is used to select one unique element! To target a specific id, a hash (#) character is used, followed by the id of the HTML element. The CSS style rule below will be applied to the HTML element with id=”example-1″:

The class CSS Selector

The CSS class selector targets all elements based on their class attribute. To target elements by a specific class, write a period (.), followed by the class name. In the example below, all HTML elements with class=”example-1″ will be green and left-aligned:

You can also state that only certain HTML elements should be styled by a class. In the following code, only elements with the class “center” will be center-aligned:

HTML elements can also refer to more than one class. In the example below, the element will be styled based on the class=”center” and class=”large”:

Grouping CSS Selectors

If you have elements with the same style definitions, like this:

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above:

 

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the element. The element goes inside the section:

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. Here is how the “mystyle.css” looks:

 

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

Inline CSS Styles

An inline style may be used to apply a unique style for a single element. To use inline styles, add a style attribute to the relevant element. The style attribute can contain one or many website styling properties. Below shows how to alter two properties of an <h1> tag:

For more examples like these, check out W3Schools.

Leave a Reply