Css tutorial

<< Prev
Next >>


Css (Cascading Style Sheet) is a set of instructions that can modify the presentation html elements of a web page.

Css styles can be added to a web page in 3 ways.

Css internal style

In this way, element style features will be declared in the <head> section between the <style> and </style> tag.
The html elements in the <body> section will take over these features. It has the advantage that these styles can be used by all the elements on the web page.

Css internal style

Css inline style

In this way, element style features will be declared in the <body> section for each element.

Css inline style

Css external style

In this way, element style features will be placed in an external file, called: style.css (any name with the extension .css).
The major advantage is that element styles can be used from any web page in the site. However, for this, in the <head> of each web page, we must place the instruction:

<link rel="stylesheet" type="text/css" href="style.css">

Css external style

Html5 recommends using the external CSS style, which results in faster loading of pages in the browser.
Next, we will use for example only external styles.

Css background

The background of the web page can be a color:

Css background color

Or it can be an image:

Css background image

The background image can be repeated horizontally using the instruction:

background-repeat: repeat-x;

It can be repeated vertically using the instruction:

background-repeat: repeat-y;

It can be repeated both horizontally and vertically, using the statement (which is default):

background-repeat: repeat;

Or it may not be repeated, using the statement:

background-repeat: no-repeat;

The background image position can be set as:

background-position:left top, center top, right top, left center, center center, right center, left bottom, center bottom, right bottom.

It can also be set as a percentage:

background-position: 40% 60%;

Or in pixels:

background-position:200px 100px;

You can also set the position fixed, when the background image will not scroll with the page:


Css background image

Css borders

Css border properties are: style, width and color.
The border style can be:

border-style: dotted, dashed, solid, groove, double, dotted dashed solid double, none.
The width can be expressed in pixels, em, percent, vw.
Color can be represented by: color name, hexadecimal color (HEX) or RGB color.

Css borers

Css fonts

With font attributes, we can attach different styles of text blocks from webpages.
The font features are:
Font family, which can be:

font-family: "Times New Roman", Arial, Verdana,...

Font face is used to add a new type of font. First we downloaded the england-webfont.ttf font and put it in the fonts directory. In the file: style.css, we write:

@font-face {
font-family: 'EnglandHandDBRegular';
src: url('fonts/england-webfont.ttf');

p. {
font-family: "EnglandHandDBRegular";
font-style: normal;
text-decoration: none;
text-align: center;

Then, on the web page, in the <body> section, we will write:

<p>Test new font</p>

Css fonts

Font style, which can be:

font-style: normal, italic, oblique.

Font size, which can be expressed in: pixels, em, percentages, vw.

font-size: 40px, 2em, 100%, 3vw, ...

Font weight, which can be:

font-weight: normal, bold.

Font variant, which can be:

font-variant: normal, small-caps.

Css fonts

Css links

To create a link style, you can use: font family, color, background color, font size, font style, ...
Links use the <a> tag followed by the page reference that will be displayed when you access the link.

<a href="https"//www.jweb.ro">Jweb site link</a>

There are selectors for links, they change the color of the link according to its status: normal link, visited link, selected link, ...

a:link {
color: brown;
a:visited {
color: yellow;
a:hover {
color: green;
a:active {
color: red;

Normally, a link appears underlined in the web page. To suppress the underlined text, we use:

a:link {
text-decoration: none;

Css links

Css margins

For any element on the web page you can set: margin-top, margin-bottom, margin-left, and margin-right.
Values can be expressed in pixels, em, percentages or vw.

Css margins

Css padding

Css padding sets spaces around the elements:padding-top, paddding-bottom, padding-left, and pading-right.

Css padding

Positioning elements in Css

The positioning of the elements in Css can be: static, absolute, fixed, relative, sticky.
The alignment of the text can be done as follows:

text-align: left, center, right, justify.

Centering an element is done by setting: margin: auto;

Css center element

Centering an image is done by setting: margin-left: auto; and margin-right: auto;

Css image center

Aligning an image using the absolute position is done by setting the distance from the top and left edges of the web page.

Css image align

Align an image using the float property. You can align the image to the left or right.

Css float align

Aligning an element can also be done using relative positioning when positioning the element is no longer aligned with the edges of the web page, but with the other elements on the page.

Css selectors

The css selectors can be: elements (p {color: blue;}), classes (.font1 {font-size: 20px; color: red}} ), identifiers (# text1 {font-style: italic; color: green}), or universal selectors (* {color: brown;}).
They can be accessed by the elements p, h1, ..., h6, a, span and div as follows:

Css selectors

To make links to sections on the same web page, the sections will have an identifier (id) and the href will set that identifier (#id), as in the following figure:

Css selectors

Media queries Css

It refers to personalization of web page elements for various equipment: laptops, phones, printers, sound playback.
To view a web page in different ways, depending on the screen resolution, use the instructions: @media screen.

@media screen and (min-width: 400px) {
body {
background-color: yellow;

Also, to set rules for printing a web page (no navigation menu, no background color, what type of font and color we use), use the instructions: @media print.

@media print {
body { background: white; }
#menu { display: none; }
#wrapper, #content {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none;

<< Prev
Next >>

Visit my websites: