CSS and its most used Properties!

See how CSS works and its most used properties!

15-sites-design

What? Td bele?

I've been talking about CSS for some time, but I owe something on the blog. But now that I'm close to releasing the ebook on HTML and CSS and with some good stuff on my hands, I thought, “Why not anticipate a little about CSS on the blog?”.

Maybe you remember that the last article was about HTML and I thought it was nice to complement what we saw there now with CSS. What do you think of the idea? Want to learn how to style your websites? Anyway, we have an article about.

Of course, it's impossible in one article to just say everything about this language. But I assure you that with these initial fundamentals you can already risk, how can I say, your first stylized ones in your layouts. Simbora then?

The complete E-book is now online! Click on any of the links below to get yours!

http://ebookhtmlcss.com/ or http://ebookhtmlcss.com/be-book-solidario-fluencia-em-htmlcss/

I will start with a relevant question.

What is CSS for?

Give shape, styles to content created in HTML. And mainly separate the marking from the presentation.

It was created to take away forms of presentation previously attributed to HTML elements and attributes.

With it, it is possible to define, for an HTML page without styles, text colors, backgrounds, borders, font sizes and types, spacing, position blocks, even animations, among others.

without CSS, with CSS

Why use CSS?

Among the main benefits are:

  • Control and visual maintenance of the site through an external file;
  • Increased performance and page speed;
  • Possibility of creating layouts to meet different types of devices.

What do I need to start learning CSS?

It is necessary to have a good understanding of HTML. As for tools, you need a good Mozilla Firefox or Google Chrome browser and an editor for web development. The simplest of all and that I recommend for learning is the notepad.

Notepad

CSS syntax

The CSS syntax is formed by a rule with 3 fundamental items to define a style. Are they:

  • Selector;
  • Property;
  • Value.

See the syntax:

Selector {property: value}

The selector binds an element of the HTML document to the CSS declaration. CSS declaration is formed by property and value.

The property defines a visual characteristic for the HTML element “selected” by the selector.

Example: The text of a paragraph, marked with HTML element “p” , has a color property called “color” .

The value assigns value to the chosen property for the selected element.

Example: The value of the color property for the selected “p” HTML element is “red” (red). That is, the text of the paragraph will have a red color.

See what was explained in the image below:

CSS rules

With this rule any paragraph in an HTML document, as long as it is not selected otherwise, will be colored red.

This paragraph is red.

Comments:

A rule can have more than one statement.

p { font-size: 14px; /* text font is 14 pixels in size */ color: red; /* the font color is red */ }

A rule can have more than one selector.

/* Paragraphs and headings h1, h2, h3 have red font color */ p , h1, h2, h3 { color: red; }

All content between /* */ is a comment. Comments serve to instruct who is reading the CSS code.

Common Selector Types

I will present some of the most used selectors that will allow you to style pages.

Element Type Selector

the selector “p” that we used in the previous examples is an element type selector. This kind of selector identifies and links an HTML element, just place the element as selector.

body { /* here's any declaration */ } div { /* here's any declaration */ } p, span, strong { /* here's any declaration */ }

And we can use one or more selectors for the same declaration. For this, we just need to use commas to separate them (as shown in the previous example).

ID type selector

It is an individual selector used to link only one element per web page. It cannot be used on two or more elements. To build it just create a name preceded by the symbol #.

#identifier-name { background-color: green; /* background color green */ }

Now see how to assign in HTML so that the element receives the green background color:


class selector

This selector makes it possible to use more than one element on the same page. Indicated when you need to assign some equal properties to different elements. To build it just create a name preceded by a period.

.class-name { color: blue; /* blue text color */ }

Title with blue color

Paragraph with the blue color.

attribute selector

This type of selector binds to an attribute used in an HTML element. Example:

This is a button for submitting form data. We can use the attribute “type” with value “submit” to style the button.

input[type="submit"] { font-weight: bold; /* texto em negrito */ }

With these selectors you can style your first pages. However there are others:

  • Universal selector;
  • Child elements selector;
  • Adjacent selector;
  • Contextual selector;
  • Pseudo-element type selectors;
  • Pseudo-class selectors.

you can consult them in this W3C Guide.

Units for values

There are a number of specific values for properties. Only some are in common use for many properties and turns and shakes you will be using them. See a small list below:

px – is the unit of pixels. Often used in block and font dimensions. Example:

  • font-size: 14px;
  • width: 200px;

in - Suitable for font sizes. By using the default size of the user's device we can express the font size of other elements through this unit.

So an element with a font size of 2em (font-size:2em} is twice the default size. If the default size is 16 pixels, a 2em font equals 32 pixels. Syntax example:

  • font-size: 1.25em;
  • font-size: 0.5em;

% – is obviously a unit of percentages. It is relative to the block where the element is contained. If a block is 150 pixels long and another block contained within it is assigned a width of 50%, it is 75 pixels.

  • font-size: 120%;
  • width: 50%;

Hexadecimal - is a numbering system that represents numbers in base 16, thus employing 16 symbols. This system consists of 10 numbers, from 0 to 9, and six additional letters from A to F.

We use CSS to assign values for color properties to fonts (color), background-color, border-color, and so on. Example:

  • background-color: #cccccc;
  • color: #ff0000;

In this case we have the red color for texts. The hexadecimal value in CSS is preceded by the symbol #.

The hexadecimal value consists of three pairs of characters. The order of pairs, from left to right, represents the RGB color system (Red, Green, Blue) reproducing colors by “mixing” a certain amount of additive colors Red, Green and Blue.

In the image below we see a representation of a dark gray obtained by mixing the three colors:

hexadecimal

The hexadecimal system needs a separate article. I suggest you consult later This article.

single statement

That's when you abbreviate statements by putting all of these values into one. And this can be applied to fonts, margins, fills, backgrounds, borders, etc. These themes that I will still present in this article.

For example: Border is the property responsible for gathering in a single declaration the values of the properties, border-style, border-width and border-color.

Example. We have the following statements for a div:

div { border-style: solid; border-width: 1px; border-color: black; }

We can merge all these declarations into one using border. Look:

div { border: solid 1px black; }

What is inheritance?

Inheritance happens when child elements inherit some properties from parent elements.

Child elements are the elements contained within the parent element, such as the elements "at the" that are within "The". Look:

  • This is a child element of ul.
  • This one too.

Parent element is, of course, what contains the child element. In the example above it is "The".

By specifying, for example, a font-size value for "The", its children automatically inherit this value if we don't specify any other value of this property for them.

Example:

ul { font-size: 14px; } ul li { color: blue; }

We can state here that the element "at the" in addition to receiving the blue color, it also receives a font size of 14 pixels.

But beware! Not all properties are inherited. But you can force through the value “inherit”. Example:

div { border: 1px solid #000000 /* black one pixel border */ } p { border: inherit; }

Where to put CSS inside the HTML document

There are a few ways to link style sheets in an HTML document. These shapes also define the location of each type. They are classified into three types:

  • Inline:
  • Incorporated;
  • External.

Inline

This type causes CSS rules to be declared inside an opening tag using the attribute “style”. See the syntax below:

This title is 18 pixels in size.

This type is the least suitable. Only for specific cases. It's good to remember that CSS was created to separate the presentation. The type inline it escapes this goal because it incorporates the style within a tag.

Incorporated

It is considered embedded when the rules of a style sheet are declared in the head section of the HTML document within the HTML element. “style”. This element is specially dedicated to holding style information for the document. See syntax:

Example of the elements presented

This title has a blue color. Declared value in the CSS rule embedded in the document between the "style" tags

This type is more suitable than the previous one, but it's still not the best. It can be a good thing when the styling is only applied to one page.

External

An external style sheet is when CSS rules are declared in a separate file from the HTML file you work with.

A stylesheet file has the extension .css. Examples: style.css, style.css, any-name.css.

In my opinion (and also the Corinthians fans) this is the best way. With this type you can separate markup (HTML) from presentation (CSS). You can also change a style of an entire site with a simple edit to defined rules.

We can classify them into linked and embedded:

Linked – This type uses the HTML element “link” plus attributes. Look:

Example of the elements presented

This title has a blue color. Value declared in the CSS rule inside the file "style.css"

the attribute rel defines that the destination file is a style sheet and href indicates the file address .css.

To create a file .css, just open your favorite editor and save the document with the extension .css. In it just put the CSS rules linked to the elements of the HTML document.

Imported – This type uses the “style” tags in the same way we use the embedded type. The big difference is that we use the @import rule between the tags. He is responsible for importing all the rules from the “style.css” file. The url(“”) represents the location of the CSS file to be imported.

Look:

Example of the elements presented

This title has a blue color. Value declared in CSS rule inside imported file "style.css".

We can also use @import inside a file, a sheet, external css.

Commonly used properties

There are so many CSS properties for different applications that you can write a huge book about them.

It is not objective and I would not explain them all in this article. However, I will try to give basic notions about the most used ones so that a beginner can take his first steps and have a basis for further research.

For fonts and texts

It is essential for anyone who wants to work with CSS to understand the properties for fonts and texts, because most of the content on the web so far is textual. Here are some that you will use a lot.

Font-size – This sets the font size.

font-size

The most used values are px, em and percentages. Look:

p { font-size: 14px; }

Font-family – Defines the font family. With it you can declare a specific font and a generic one.

font-family

  • Specific sources: Verdana, Time New Roman, Monotype Cursiva, Courier New, etc.
  • Generic sources:
    1. serif (serif fonts),
    2. sans-serif (fonts without serifas),
    3. cursive (italics),
    4. monospace (monospaced fonts).
    5. fantasy (fonts with decorative representations of characters).

It is indicated that every time you declare a specific font, you also declare in sequence a generic family font that matches the specific font declared. This is because if the specific font is not available on the user's device the browser is free to choose a similar font from the generic family.

For example. If you declared the specific font Verdana, also declare the generic sans-serif font because Verdana is a sans-serif font. See the syntax:

p {font-family: Verdana, sans-serif; }

It is also important to note that when using family-derived fonts you must always use quotation marks. Example: “Times New Roman”, “Palatino Linotype”, “Book Antiqua”. Look:

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

Font-weight – This property is used to determine the font weight. It is used a lot with the “bold” value to bold sections of text.

font-weight

The larger value represents greater weight:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Here are other possible values: normal, bold, bolder, lighter.

See an example syntax for this property:

p { font-weight: bold; }

Font-style - Used to give style. You can use this property for “normal”, “oblique” or “italic” values.

font-style

Look:

p { font-style: italic; }

Line-height – This is a dimensioning property that allows you to stipulate line spacing.

line-height

Values used for this property can be of different CSS measurement units px in %, etc. And also a number (1, 2, 3). Look:

p { line-height: 36px; }

Font - The “Font” property is indicated if you want to reduce the code by gathering all the values of the above properties in a single declaration. Look:

p { font:bold italic 30px/36px Verdana; }

When using this property the values for “size” is “family” Are mandatory. if you declare line-height its value must come after the value of “size” followed by a slash “/”.

Text-align – This is the property used to determine the type of alignment a text will have. Values for this property are: left, right, center, and justify .

text-align

  • For left alignment – text-align: left;
  • For right alignment – text-align: right;
  • Centralized – text-align: center;
  • Justified – text-align: justify.

Here's an example:

p { text-align: center; }

Well… There are other properties for shaping texts and fonts. On another occasion we can comment on them. However, with those presented in this article you already have a foundation for your first steps.

For text color

The text color property is the “color”. You can use hexadecimal values for this property. Look:

p { color: #ff0000; /* Red color */ }

This option is good because you can get the value straight from graphic editors like Photoshop, for example. Just put the sign " # ” before the hexadecimal.

Another more advanced option is to use RGB, RGBA and HSL systems.

You can also choose the color name in English. You find a reference list on here . However, this option is little used compared to hexadecimal.

For block dimensions

height-width

Elements styled with CSS have both width and height. They often don't even need to be specified, as they result from other factors such as the size of the content on the screen and interference from other properties.

However, there will always be a time when you will have to stipulate a block's dimensions, mainly in terms of width. See an example:

div { width: 400px; /* red color */ height: 200px; /* Red color */ }

“Width” defines the width of the block and “height” defines the height.

When you define percentage values, for example, for a width, its value will be calculated based on the width of the parent element.

One of the possible values is the “auto” (width: auto). When used, it makes the element fit inside the parent box.

For site and block backgrounds

The property responsible for assigning values for background characteristics of sites, sections and blocks is the background.

With it it is possible to assign values of color, positioning, images for backgrounds, among others. A common example:

div { background: #fff000 url(background.png) repeat; }

This example sets a background image “background.png”. It will repeat over the entire length of the element on the x and y axis, and behind it we have a yellow background color.

This color will be noticed if the image in Png has transparency or while the background image is loading on the website.

This rule could be obtained through background variants. Look:

div { background-image: url(background-image.png); /* Set the background image */ background-color: #fff000; /* Set the background color to yellow */ background-repeat: repeat; /* Sets whether the background image should repeat or not, or only on the x-axis, or on the y-axis. In this case it is repeated on all axes. }

Other variations:

  • background-attachment – defines whether the image is fixed or not while scrolling the screen;
  • background-position – defines where the background image is positioned;
  • background-clip – defines the area where the background image is applied;
  • background-origin – defines the origin position of the image in an element;
  • background-size – sets the dimensions of the background image.

for margins

CSS margins are used for a block to distance itself from neighboring blocks and also from the edge of the browser. And this is very useful for creating vent areas between elements, defining placements, and aiding in diagramming a layout when used in conjunction with properties width is height.

margin

The property responsible for setting margins for an element is called “margin”. See an example:

div { margin: 10px; }

Here it says that the element “div” it must be 10 pixels apart on all sides in relation to other elements around it. This rule is equivalent to this:

div { margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; }

Most obviously the rule above is better because it saves code, time and improves site performance.

It is better to use the rules for the sides when only one of them needs to be adopted. Look:

div { margin-top: 30px; /* applies a 30-pixel margin at the top causing the block to distance itself from what is above it */; }

For fills

Padding or spacing is similar to margins. It also creates a breathing area. Only this time it's between the content and end of a box. The property responsible for this is called “padding”.

padding

Here's an example:

div { padding: 10px; }

As we saw in margin, padding can also be applied to the sides with padding-top, padding-right, padding-bottom is padding-left.

for edges

The property “border” is responsible for specifying the thickness, style, and border color of an element.

There are variants of this property for each type of value you intend to use. Are they:

Border-style: Specifies the style of the border.

From this property it is still possible to get variations for the sides of a box: border-top-style, border-right-style, border-bottom-style is border-left-style.

Example:

div { border-style: solid; }

Border-width: Specifies the thickness.

Its variations: border-top-width, border-right-width, border-bottom-width is border-left-width.

Example:

div { border-width: 1px; /* Only works if border-style is also declared */ }

Border-color: Specifies the border color.

Its variations: border-top-color, border-right-color, border-bottom-color is border-left-color.

Example:

div { border-color: #000000; /* Only works if border-style is also declared */ }

However, the most used form is the one that brings together the three in a single abbreviated declaration. Look:

div { border: 2px solid #000000; }

We have the value of thickness (2px), style (solid) and border color (#000000) all gathered in the declaration.

This shape also represents other variations of each side of an element. Look:

div { border-top: 2px solid #000000; border-right: 2px solid #000000; border-bottom: 2px solid #000000; border-left: 2px solid #000000; }

Example

After this presentation with widely used properties and CSS principles I'll leave some sample code for you to identify and study what was passed in this article.

First the HTML. It is based on the code developed in the article. “18 things about HTML that I wish they had told me when I started creating my first website” and is with minor changes.

Look (html-e-css.html):

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta content="noindex, follow" name="robots">

		<link rel="stylesheet" href="https://www.chiefofdesign.com.br/posts-archives/estilo-html-e-css.css">

		<title>Exemplo dos elementos apresentados</title>

	</head>

	<body>

	<div id="corpo">

		<h1>Eu sou o título principal desta página</h1>

		<div>

			<h2>Eu represento um título importante dentro deste bloco (div) interno.</h2>

			<img src="imagem-do-bloco.jpg" alt="Sou a imagem deste bloco" width="560" height="311">

			<p>Eu sou o primeiro parágrafo deste bloco. Meu conteúdo consiste em explicar o que o título propõe.</p>

			<p>Eu sou o segundo parágrafo e dentro de um mim tem <strong>um trecho que quero da ênfase.</strong></p>

			<a href="https://www.chiefofdesign.com.br/ebook-guia-porftolio/">Um sou um link que aponta para uma página interna do Chief of Design.</a>

		</div>

	</div>

	</body>

</html>

You can copy this code and paste it into your editor to test or access the final result. on here.

Now the CSS (style-html-and-css.css):

body { background-color: #262626; margin:0; padding: 0; font-family: Arial, sans-serif; color: #626262; } #corpo { background-color: #F9F9F9; margin: 20px; width: 570px; padding: 40px; border: 3px solid #CCC; } h1 { text-align: justify; color: #FF1B7B; } h2 { color: #626262; font-weight: 100; } img { border: 5px solid #ffffff; } p { font: normal 16px/20px Arial, sans-serif; } a { font-weight: bold; color:#11B4FF; text-align: center; }

You can copy this code and paste it into your editor to test it, just save the file in the same directory as the HTML file and name it as “style-html-and-css.css”.Or if you prefer, access on here.

The complete E-book is now online! Click on any of the links below to get yours!

http://ebookhtmlcss.com/ or http://ebookhtmlcss.com/be-book-solidario-fluencia-em-htmlcss/

Conclusion

It's a lot of material, but it's just the beginning. As I've said before, with a little study and practice, it's possible to move the visuals of your projects even if they're in their infancy.

I ask you to practice and if you have questions, post in the comments, okay? I am here to help in any way I can.

CSS is a wonderful language that gives our interfaces a special shine and has emerged to partner nicely with HTML. I hope you enjoy this partnership. 😀

And if you want learn even more about CSS, o Chief of Design oferece conteúdo em vídeo sobre essa ferramenta no HTML & CSS Fluency Video Course. Check it out!!!

I also hope this article has been helpful to you. I await you in the comments!

Now I need to run to finish the e-book!

Strong hug!

See you!

David Arty

Hi I am David Arty, founder from the blog Chief of Design.
I am from São Paulo, Brazil. I work with design, mainly with web design, since 2009. I try to transform crazy and complex ideas into simple, attractive and functional pieces.