Learn CSS

Web developers use it to build on basic HTML and add personality to plain text pages. This course helps you expand your coding foundation and gives you CSS editing layouts so you can create your very own, unique stylized web pages.

Topics Covered

The topics covered in this CSS tutorial are:

What is CSS?
How to use CSS?
CSS Concepts.

CSS Learning Requirements:

Basic software installed, basic knowledge of working with files, and HTML basics (study Introduction to HTML.)

CSS Beginner Tutorial

A step-by-step guide to CSS basics. Go here if you’re comfortable with basic HTML.

Applying CSS - The different ways you can apply CSS to HTML.
Selectors, Properties, and Values - The bits that make up CSS.
Colors - How to use color.
Text - How to manipulate the size and shape of text.
Margins and Padding - How to space things out.
Borders - Erm. Borders. Things that go around things.
Putting It All Together - Throwing all of the above ingredients into one spicy hotpot.

More topics is separated to next courses

CSS Intermediate Tutorial

CSS Advance Tutorial

What is CSS?

CSS Stands for Cascading Style Sheets. It is a programming language and exists to style your HTML — to represent your content.

A CSS Example with Output.

The language is somewhat different to HTML but it remains simple and straightforward.

Here a code sample below :

div{

background-color: green;

border: 10px solid rgb(232, 69, 69);

border-radius: 2%;

height: 50vh;

width: 50vh;

}

The div tag is often used to specify the container for HTML elements. It can also be used to structure the layout of the webpage.

Output in Browser

Now, let’s understand how to style the div element and its children elements.

CSS Syntax Example:

Benefits of CSS.

Cascading Style Sheet is a style language used to add visual design to web pages.
CSS selectors are used for targeting HTML elements and applying specific styles.
We can define how HTML elements (text, background, image, etc.) appear on a webpage using CSS properties.
CSS allows responsive design; web pages can adapt to different screen sizes and devices.
We can control the layout of multiple web pages at once using CSS.

Why Learn CSS?

CSS makes a website visually appealing. You can add CSS style to your HTML pages to create professional websites with refined and elegant aesthetics.
You can make your website responsive with CSS, which enhances user experience by allowing them to view your website on any device without any problem.
CSS makes our website more accessible. CSS allows people with visual impairments to use the website as you can change fonts and font size; color combinations and contrasts; and much more.
CSS is an easy language to learn. You can start styling your document after learning some very basic CSS.
We can add animations and transitions to a webpage, making it more engaging and interactive without the use of JavaScript.

Applying CSS.

There are three ways to apply CSS to HTML:

Inline : Styles added directly to the HTML element.
Internal : Styles defined at the head section of the document.
External : Styles defined in a separate file.

Inline CSS.

Inline styles are plonked straight into the HTML tags using the style attribute.

They look something like this:

This will make that specific paragraph red.

Here,

style - defines the CSS for the element <p>
color: red - changes the text of the <p> element to the color red

The style attribute can be added to any element but the styles will only be applied to that particular element. For example,

<!DOCTYPE html>

<head>

<title>Browser</title>

</head>

<body>

<p>This paragraph doesn't have CSS.</p>

<p style="color:red">This paragraph is styled with inline CSS.</p>

</body>

</html>

But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.

Multiple Properties in Inline CSS

We can also add multiple styling using inline CSS. For example,

Here, we have used multiple properties by separating them with a (;) semicolon.

Internal CSS.

Embedded, or internal, styles are used for the whole page. Inside the head element, the style tags surround all of the styles for the page.

<!DOCTYPE html>

<html>

<head>

<title>CSS Example</title>

<style>

p {

color: red;

}

</style>

</head>

<body>

<h1>Internal CSS Example</h1>

<p>This is Paragraph 1</P>

</body>

</html>

Here,

<style> - defines CSS
p - selects p tag and applies CSS to it
color: red; - changes the text color of the content of <p> elements to red

External CSS.

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

p {

color: red;

}

If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to in the HTML like this:

<!DOCTYPE html>

<html>

<head>

<title>CSS Example</title>

</head>

<body>

<h1>Internal CSS Example</h1>

<p>This is Paragraph 1</P>

</body>

</html>

Here, we have CSS in a separate file named style.css. The external CSS file should have a .css extension.

The external CSS file can be linked to the HTML document by using the link element in the HTML. For example,

<head>

</head>

We use the <link> tag to link the style.css file to an HTML document. In the above code,

href="style.css" - URL or file path to the external CSS file.
rel="stylesheet" - indicates the linked document is a CSS file

Using Multiple Stylesheet

We can link multiple CSS file to an HTML file. Suppose we have the following two CSS files.

<head>

<title>Browser</title>

</head>

Inline Style Override Internal Style

If an internal CSS and inline CSS are both applied to a tag, the styling from the inline tag is applied. Let's see an example.

<head>

<style>

h1 {

color: blue;

}

p {

background: red;

}

</style>

<title>Browser</title>

</head>

<body>

<h1 style="color: green">Priority Example</h1>

<p>This is Paragraph 1</P>

<p style="background: orange">This is paragraph 2</p>

</body>

</html>

CSS Syntax:

CSS syntax is used to add CSS to an HTML document. A CSS syntax consists of a selector and a declaration block. For example,

selector {

property1: value;

property2: value;

}

The basic syntax of CSS includes 3 main parts:

selector - specifies the HTML element that we want to apply the styles
property1 / property2- specifies the attribute of HTML elements that we want to change (color, background, and so on)
value - specifies the new value you want to assign to the property (color of the text to the red, background to gray, and so on)

Basic CSS Syntaxes:

The following are the basic building components of CSS syntax:

Selector : A CSS selector is the initial portion of a CSS syntax rule. It's a collection of HTML elements that tells the browser which HTML elements should get the rule's CSS property values applied to them.
Declaration Block : A declaration block contains a list of declarations that define how the selected elements should be styled. A declaration consists of a property and a value, separated by a colon and terminated by a semicolon.
Property : The property is an identifier that specifies which feature, such as color or font size, is taken into account.
Value : CSS values are allocated to CSS Properties and saved in the CSS declaration block, which is part of the CSS rule/statement. For example, the color is set to black.

CSS values are assigned to the properties in the property value pair, with COLON (**' : '**) acting as a separator.

Property: value;

A property and value pair is called a declaration. For example, see the color property declaration below.

Types of Selectors

There are various types of selectors in CSS. They are:

CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector

CSS Element Selector

The element selectors select the HTML elements by name.

How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS

Before understanding how to adjust the content, padding, border, and margins of an HTML element, let’s understand the CSS box model. It is a box that wraps around every HTML element in the DOM.

Comments in CSS

Comments are notes written along with the code that is ignored by the browser. For example,

/* this is css comment */

<head>

<title>Browser</title>

<style>

p {

background-color: yellow;

color: red;

}

</style>

</head>

<body>

<p>This is a paragraph</p>

</body>

</html>

All the <p> elements will be center-aligned with red text and a font size of 25 pixels.

CSS ID Selector

The id selector selects the element based on the id attribute.

The id of an element is unique within the page, so the id selector is used to select the unique element.

It is written with the hash character (#), followed by the id of an element.

The paragraph with ‘id1’ will be styled and all the other elements remain as it is.

CSS Class Selector

The class selector selects the element based on the class attribute.

It is written with a period character (.), followed by the class name.

As you can see the style is applied only to “class1”.

If you’d like only 1 specific element to be affected by the action, then you should use the element name with the class selector. Let’s understand this with an example.

CSS Universal Selector

The universal selector (*), selects all the HTML elements on the page.

CSS Group Selector

The group selector is used to select all the elements with the same style definition.

Commas are used to separate the elements in the grouping.

Margins and Padding

Margin and Padding are the two most commonly used properties for spacing-out elements. A margin is the space outside something, whereas padding is the space inside something.

Lengths and Percentages

There are many property-specific units for values used in CSS, but there are some general units that are used by a number of properties and it is worth familiarizing yourself with these before continuing.

px (such as font-size: 12px) is the unit for pixels.
em (such as font-size: 2em) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.
pt (such as font-size: 12pt) is the unit for points, for measurements typically in printed media.
% (such as width: 80%) is the unit for… wait for it… percentages.

Other units include pc (picas), cm (centimeters), mm (millimeters) and in (inches).

When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

“px” in this case, doesn’t actually necessarily mean pixels - the little squares that make up a computer’s display - all of the time. Modern browsers allow users to zoom in and out of a page so that, even if you specify font-size: 12px, or height: 200px, for example, although these will be the genuine specified size on a non-zoomed browser, they will still increase and decrease in size with the user’s preference. It’s a good thing. Trust me.

Colors

CSS brings 16,777,216 colors to your disposal. They can take the form of a name, an RGB (red/green/blue) value or a hex code.

The following values, to specify full-on as red-as-red-can-be, all produce the same result:

red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00

Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. transparent is also a valid value.

With the possible exception of black and white, color names have limited use in a modern, well-designed web sites because they are so specific and limiting.

The three values in the RGB value are from 0 to 255, 0 being the lowest level (no red, for example), 255 being the highest level (full red, for example). These values can also be a percentage.

Hexadecimal (previously and more accurately known as “sexadecimal”) is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#ff0000 becomes #f00, #cc9966 becomes #c96, etc.). The three-digit version is easier to decipher (the first digit, like the first value in RGB, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color.

Text

You can alter the size and shape of the text on a web page with a range of properties.

font-family

font-size

font-weight

font-style

text-decoration

text-transform

Text spacing

SPAN Division

Meta Tags

Description List

Change the CSS code for h2 to the following:

h2 {

font-size: 1.5em;

background-color: #ccc;

margin: 20px;

padding: 40px;

}

This leaves a 20-pixel width space around the secondary header and the header itself is fat from the 40-pixel width padding.

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.

The Box Model

Margins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:

Borders

Borders can be applied to most HTML elements within the body.

To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.

border-width sets the width of the border, most commonly using pixels as a value. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.

Finally, border-color sets the color.

Add the following code to the CSS file:

h2 {

border-style: dashed;

border-width: 3px;

border-left-width: 10px;

border-right-width: 10px;

border-color: red;

}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).

Sectioning

While headings do a grand, perfectly valid, job in defining the start of a new section or sub-section in a document, there are a number of elements that can be exploited to establish a cleaner, clearer semantic structure.

Whereas div elements can be used to contain sections, used primarily as scaffolding on which to hang CSS, they don’t hold a great deal of meaning. Sectioning involves a handful of tags that can be used to define specific parts of a page, such as articles, headers, footers, and navigation.

Articles and Sections

An article element can be used to mark up a standalone section of content. This could be used just once, if you think of a blog post as an article, for example, or a number of times, if you imagine replicating a traditional newspaper page with numerous articles.

A section element represents a more general section and could be used to split up an article, or to represent chapters, for example.

Headers and Footers

header and footer provide further specialized, self-descriptive, sections:

<body>

<h1>Alternatively…</h1>

<p>[An introduction]</p>

</header>

<p>[Content]</p>

</section>

<p>[End notes]</p>

</footer>

</article>

<p>[Copyright bumf]</p>

</footer>

</body>

Page updated

Google Sites

Report abuse