Skip to content
close
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
close
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
Call us Email us
Blue Whale Media Logo
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
Menu
Blue Whale Media Ltd
  • Inside Blue WhaleBlue Whale Media
    • About Us
    • AwardsAwards
    • Testimonials
    • TrainingTraining
    • EventsEvents
    • CharityCharity
    • Vacancies
    • Blog
  • Web ServicesWeb Services
    • Web Design
    • Audit
    • Hosting
    • Ecommerce
    • Development
  • ProductionProduction
    • Video Production
    • Live Shoots
    • Animation
    • Aerial Imagery
    • Photography
    • Social Media
  • MarketingMarketing
    • Marketing
    • SEO
    • Pay Per Click
    • Social Media
    • Email Marketing
  • ContentContent
    • Website Content
    • Blogging
    • Press Release
    • Product Descriptions
  • PortfoliosPortfolios
    • Website
    • Content
    • Branding
    • Marketing
  • Contact UsContact Us
  • ConsultationConsultation
  • EmailEmail
  • TelephoneTelephone
Close Menu

Introduction to CSS

CSS stands for Cascading Style Sheets. This is what allows you to create your web pages how you like, which makes them look so much better.

Before we get started you should remember to always close anything that you start, otherwise the computer won’t be able to read it. An example is, opening <style> and closing </style>

The rule the CSS coding follows is a selector then the declaration. For example:

  • Selector is h1
  • Declaration is {color:blue; font-size:12px;}

This would then look like this:
h1 {
color: blue;
font-size: 12px;
}

A declaration is made up of a property and a value. In the example above, your property would be color and your value would be blue.

CSS Website Design

Different Types of Selectors (these are examples)

  • Element Selector

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

All <p> elements will do what was stated above. The code for adding your text is <p>Whatever you are writing.</p> and you input your text in the part that is bold.

  • id Selector

#para1 {
text-align: center;
color: red;
}

This one will only make elements that used the id ‘para1’ to do what is stated above. The code for adding your text is <p id="para1">Whatever you are writing.</p>

  • class Selector

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

With this one, it is very similar to the id selector when in the format above. However, you can make it more specific by adding an element selector in front of the ‘.center’ which would now look like this ‘p.center’. This would then make only the text that is both a ‘p’ element and in a ‘center’ class. The code for adding your text in is

<p class="center">Whatever you are writing.</p>

  • Universal Selector

* {
text-align: center;
color: blue;
}

All elements will do what is stated above. This means that all the text on your web design will follow the declaration that is written.

  • Grouping Selector

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

If all of those selectors above have the same declaration, you are able to write them a different way. This will reduce the amount of coding but will still do the same thing.

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

An important thing to remember is, when you are using this coding, always put the right part in the right areas. This means that the;

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

Should be in the <style> part and the <p>Whatever you are writing.</p> should be in the <body> part.

It will look like this;

<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
</body>
</html>

Summary of Selectors

  • <p> = selects all <p> elements
  • #id = selects all elements with the #id that you selected
  • .class = selects all elements with the .class that you selected
  • * = selects all elements
  • h1, h2, p = selects all elements that was listed

Different Ways to Insert CSS

  • Internal

This is when the <style> element is inputted into the HTML that you are working in, which is what we have been doing above.

  • External

With this one you are referring to a different stylesheet. The external sheet you are bringing in would have the same sort coding as the internal. To refer to this other document the coding would be like this:
<head>
<link rel="stylesheet" type="text/css" href="Whatever stylesheet you are bringing in.css">
</head>

The part that is in bold is where you put the name of the document that you are referencing to. Although this file does have to be in .css format, and it can not have any HTML tags.

  • Inline

 

 

Inline CSS has both the style and the body in one line. This is usually used for a specific part that you want to separate from the original format. Due to it having both the body and style, the coding for this one is put in the <body> part of the HTML. It will look something like this:
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>

Inputting CSS in WordPress

With CMS’s (Content Management System) there are other ways to input in CSS. In WordPress you can add your CSS if you go to the Appearance – Customise – Additional CSS, or you can have them inputted by using any WordPress Plugins.

Inline Colour Settings

These are examples of code that is used to colour in different things.

  • Text Colour – <h1 style=”color:Tomato;”>Hello</h1>
  • Border Colour – <h1 style=”border:2px solid Tomato;”>Hello</h1>
  • Background of Text – <h1 style=”background-color:DodgerBlue;”>Hello</h1>
  • Whole Background Colour – body {background-color: lightblue;} – This one goes in the <style> part of the HTML as it doesn’t have any text with it.

With the whole background you can have an image instead. The coding for this is;

body {background-image: url("paper.gif");}

With colours they can be written in different ways. These are:

  • The Name of The Colour – <h1 style=”background-color:red;”</h1>
  • The RGB Values – <h1 style=”background-color:rgb(255, 99, 71);”</h1>
  • The HEX Values – <h1 style=”background-color:#ff6347;”</h1>
  • The HSL Values – <h1 style=”background-color:hsl(9, 100%, 64%);”</h1>

You can also reduce the transparency, however it can only be written in these two ways. These examples are for wanting the colour to be 50% transparent.

  • <h1 style="background-color:rgba(255, 99, 71, 0.5);"</h1>
  • <h1 style="background-color:hsla(9, 100%, 64%, 0.5);"</h1>

The A in both RGBA and HSLA stands for alpha which allows you to add the opacity of the colour.

Fonts in CSS

There are 3 different types of generic families.

  • Serif – Fonts that have flicks
  • Sans-serif – ‘Sans’ means without, so these fonts don’t have the flicks
  • Monospace – Fonts that have the same space between characters

p {font-family: "Times New Roman", Times, serif;}

There are 3 different font styles.
  • Normal
  • Italic
  • Oblique – This is very similar to italic but it is less supported.

p.normal {font-style: normal;}

Font weight is very similar to the font styles in the coding. The weight is for you to decide how thick you want your font.

p.normal {font-weight: normal;}

Font variant is again very similar to the font styles, but can determine whether you want it in uppercase lettering or lowercase lettering.

p.normal {font-variant: normal;}

Different Ways of Writing Font Sizing
  • Pixels – h1 {font-size: 40px;}
  • Em – h1 {font-size: 5em;} – To calculate the em, it is pixels/16=em. (40px/16=2.5em)
  • Percentages – body {font-size: 100%;} – This allows you to set your default size for the whole page.

With the fact that CSS is cascading, this means that whatever that last value of that selector, will be used. For example if you had this as your coding:

<style>
h1 {
color: orange;
}
h1 {
color: red;
}
</style>

Then what would happen is the computer would only read the h1 {color: red;} as it cancels out the one above it.

Call us

Call

01925 205 035
Email us

Email

[email protected]
Book a Zoom consultation

Zoom

Book a consultation today.

Client Support

Locations

Policies

Careers

Company Reg: 15890531

GDPR Data Protection Act: A8639602

By continuing to browse our site, you agree to the use of our cookies.
OK
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT