Adrian's CSS Site

Table of contents

  1. What is CSS?
  2. CSS Structure
  3. CSS Syntax
  4. CSS Selectors
  5. Examples

About CSS: What is CSS?

Cascading Style Sheets (CSS) is a rule-based language used to describe how HTML content will be formatted and displayed in a web page. This allows web developers to make appealing graphics and styles for webpages.

Advantages of CSS

CSS is powerful as it allows web developers to style boring black and white pages of text to a webpage that is more pleasing to read for the users.

CSS provides flexibility in how content can be displayed which every way you want and in all forms of device and screen form factors.

CSS can be used to efficiently style many pages with only one CSS file, this frees up time for the web developer when designing websites and provides better performance as the browser can cache the CSS file rather than loading a new style for each webpage.

Example of CSS styling

Without CSS

When you first write your website, this is probably what it would look like at first without CSS. You probably wouldn't want your website to look plain and boring to read, well neither does anyone else.

With CSS

After you have written your website, you can add CSS to make it look nicer and easier to read, now you can publish your website to your family, friends and more!

CSS Structure

Example of an inline style

Inline Style

Inline CSS are specified within the style attribute of a html tag and only styles the content within the tag.

Inline styles are only used rarely when you need a style for a unique tag e.g. a special style for a word in the middle of a paragraph.

Example of an inline style

Internal Style

Internal CSS are specified within the HTML document within the <style> tag in the <head> and only styles the content within the single HTML document.

Internal styles are used for when there is a unique style just for one webpage.

Example of an inline style Example of an inline style

External Style

External CSS are specified in a separate .css file which is linked through the <link> tag in the HTML document and it can style multiple HTML documents that link to it.

External styles is the recommended form of writing styles for a whole website. E.g. if you change the colour of your navbar or accent colour you only need to edit one value

CSS Syntax

CSS must follow a syntax shown below in order to work. it consists of a selector, declarations and within that, the property and value.

           Declaration
        ↓               ↓
p {color: red; font-size: 16px}
↑                 ↑         ↑
selectors      property   value

The selector specifies what HTML element will it style.

The declaration contains a property and value. The declaration is used to specify what style should be applied.

CSS Selectors

CSS selectors are used to specify what HTML element will be styled. Selectors come before the declaration. CSS selectors can be put into 5 categories:

CSS Examples

I have written 20 examples of different CSS properties in codepen.io. You can find more of my CodePens by clicking here

1. Styling a Paragraph

2. Styling a Heading

3. CSS Colour:: Names

4. CSS Colour:: RGB

5. CSS Colour:: HEX

6. CSS Selectors

7. Id Selector

8. Class Selector

9. Centering a Container

10. Centering text in a container

11. Background-color

12. Background-image

13. Colour

14. CSS Text:: Text Alignment

15. CSS Text:: Text Decoration

16. CSS Fonts

17. Styling Links

18. Inline Blocks – Old way using float

19. Inline Blocks – New Way

20. Setting the width and height of an iFrame