How to create a CSS (with pictures)

Table of contents:

How to create a CSS (with pictures)
How to create a CSS (with pictures)
Anonim

CSS is a style sheet language that allows you to create web pages and control multiple features at the same time by assigning specific elements to groups. For example, using a color code, a designer can change the background color on all pages of a site with just one change to the CSS code.

Steps

Part 1 of 4: How to Write Inline CSS

Create CSS Step 1
Create CSS Step 1

Step 1. Familiarize yourself with HTML tags

Need to know how tags and attributes work

src

 and

href

 .

Create CSS Step 2
Create CSS Step 2

Step 2. Explore some of the basic properties of CSS

There are many properties, but you don't need to memorize everything.

  • Remember the following basic CSS properties:

    color

     and

    font-family

     .
Create CSS Step 3
Create CSS Step 3

Step 3. Examine the values of the corresponding properties

A value is specified for each property. For example, for the property

color

 you can specify a value

red

 .

Create CSS Step 4
Create CSS Step 4

Step 4. Review the HTML Attribute

style

 .

It is used inside the element

href

 or

src

 … To use the specified attribute, in quotation marks after the equal sign, enter the CSS attribute, a colon, and then the property value. This is called a CSS rule.

Create CSS Step 5
Create CSS Step 5

Step 5. Please note that professional web developers generally do not use inline CSS to build websites

Inline CSS can compromise the integrity of HTML. However, it is a great way to get familiar with the basics of how CSS works.

Part 2 of 4: How to Write Simple CSS Code

Create CSS Step 6
Create CSS Step 6

Step 1. Run the program where you can create HTML and CSS files

If there is no special program, use Notepad or another text editor. Just save the file as a text file and a CSS file

Create CSS Step 7
Create CSS Step 7

Step 2. Open the HTML code

Do it in your HTML editor (if you have one).

In the HTML editor, you can work with HTML code and CSS code

Create CSS Step 8
Create CSS Step 8

Step 3. Create a tag inside the HTML tag

In this case, the CSS code can be written without the need to create a separate file.

Create CSS Step 9
Create CSS Step 9

Step 4. Select the element to which you want to add a style

Now enter the element name and curly braces ({}). To make your code more legible, always enter the second curly brace on a new line.

Create CSS Step 10
Create CSS Step 10

Step 5. Inside the brackets, enter the CSS rule as if you were using the attribute

style

 .

Each line must end with a semicolon (;). To make your code legible, enter each rule on a separate line, and each line should be indented.

Note that this style will affect “all” elements of the selected type on the page. A more specific style will be discussed in the next section

Part 3 of 4: How to Write More Complex CSS

Create CSS Step 11
Create CSS Step 11

Step 1. Create a CSS file (not an HTML file) and save it with the extension

.css

 .

Also open the HTML file.

Create CSS Step 12
Create CSS Step 12

Step 2. Create a tag inside the HTML tag

This will link the separate CSS file to the HTML file. The tag requires three attributes:

rel

 ,

type

 and

href

 .

  • rel

     tells the browser how to treat the HTML file. Here this attribute should have a value

    stylesheet

     .
  • type

     tells what type of media the link belongs to. Here this attribute should have a value

    text / css
  • href

     it is used here the same as in the element, but here this attribute must refer to the CSS file. If the CSS file is in the same folder as the HTML file, use only the file name in quotation marks.
Create CSS Step 13
Create CSS Step 13

Step 3. Select elements of different types to which you want to add one style

Add the attribute

class

 to such elements and equate them to the name of the selected class. In this case, the elements will have the same style.

Create CSS Step 14
Create CSS Step 14

Step 4. Indicate which style the class will receive

In the CSS file, enter the class name after the period., That is, like this:

.class

 .

Create CSS Step 15
Create CSS Step 15

Step 5. Select the individual elements to which you want to add a custom style and add the attribute

id

 .

In CSS, identifiers are created using the # symbol, not a period.

Identifiers are more specific than classes, so an identifier overrides any class style if it has an attribute with a value other than the class value

Part 4 of 4: How to Learn CSS and HTML

Create CSS Step 16
Create CSS Step 16

Step 1. Open the HTML Academy website

On it you can learn the basics of web development.

Create CSS Step 17
Create CSS Step 17

Step 2. Find other sites specifically dedicated to learning HTML and CSS

Look for reputable sources to build on your knowledge.

Create CSS Step 18
Create CSS Step 18

Step 3. Chat with web designers and developers

Their experience will help you acquire valuable knowledge and skills.

Create CSS Step 19
Create CSS Step 19

Step 4. View the source codes of the sites that you open

Looking at the CSS codes of well-made websites will give you an idea of how to design parts of websites. Copy the code and then edit it to learn how to use the various CSS attributes.

Advice

There are many different properties that can be manipulated with CSS. Find a website you like and view its source file. If there is a CSS file name inside the HEAD tags, click on it to see the various properties and values assigned to the elements

Popular by topic