Loading...

Reply to topic

How to use CSS

Author Message
Registrovani Član

User avatar

Registrovan: Sep 16, 2015
Broj postova: 10745
Lokacija: Timişoara
Država:
Pohvalio: 1239 x
Pohvaljen: 909 x
Online: 62d 22h 55m 39s
Medalje: 2
Post How to use CSS   09 Sep 2018, 20:47
CSS (Cascading Style Sheets) is the code you use to customize your web page. Getting CSS gives you everything you need to get started. I will answer questions such as: How can I make my text black or red? How do I make my content appear in different places on the screen? How can I decorate my web page with wallpapers and colors?

What is CSS?

Just like HTML, CSS is not even a programming language. There is no markup language - it's a styling language. This means that it allows you to selectively apply styles to elements in HTML documents. For example, to select all paragraph items from an HTML page and turn the text inside them into red, you will write this CSS code:
Code: Select all
p {
  color: red;
}

Let's try: insert these three CSS lines into a new file in your text editor, and then save the file as style.css in the taustyles directory.

But you still need to apply the CSS code to your HTML document. Otherwise, CSS style will not change how your browser displays the HTML document (If you have not tracked our project so far, read Manage Files and HTML Basics to find out what you need to do first).

Opens the index.html file and inserts the following line somewhere in the head element (that is, between the <head> and </ head> tags):
Code: Select all
<link href="styles/style.css" rel="stylesheet" type="text/css">

Save the fileulinulin.html and upload it to your browser. You should see something like this:

Image

Congratulations if the text of your paragraph is red! You just wrote your first CSS code line.

The anatomy of a set of CSS rules

Let's look in detail at the CSS line above:

Image


The entire structure is called a set of rules (but it is often abbreviated as "rule"). Please also note the names of the individual parties:

Selector
Name the HTML elements at the beginning of the rule set. It selects the element (s) to be stylized (in this case the p elements). To style a different element, it only changes the selector.

The Statement
One rule like color: red; which specifies which of the element properties will be stylized.

Properties
Modes in which you can style a given HTML element. (In this case, color a property of <p> elements.) In CSS, choose the properties you want to modify using your rule.

Property value
To the right of the property after two points, you have the value of the property, which chooses one of the many possibilities for a certain property (there are several values ​​of the color property apart from the red property).

Keep the other important parts of the syntax:
1. Each rule set (besides the selector) must be inside the boxes ({}).
2. In each statement, you must use two points (:) to separate the property from its values.
3. Under each set of rules, you must use a semicolon (;) to separate each statement from the next.

To change multiple property values ​​at one time, just separate them with a semicolon as follows:
Code: Select all
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}


Selecting Multiple Items

You can also select multiple types of items and you can apply them to a single set of rules. Includes multiple selectors separated by commas, e.g:
Code: Select all
p,li,h1 {
  color: red;
}


Different types of selectors
There are several different types of selectors. Above, you have only looked at element selectors, which select all elements of a particular type in the given HTML documents. But you can make selections more specific of that.

Fonts and text

Now that I've exported some CSS basics, let's start adding more rules and information to our style.css file to make our example look better. Let's start by making the text look better.

First, find the font from Google Fonts that you saved in a safe place. Add the <link> element somewhere inside the head element of the fileulindex.html (again, anywhere between the <head> and </ head> tags). It will show something like:
Code: Select all
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Then, delete the existing rule you have in the style.css file. It was a good test, but the red text does not look that good.
Adds the following lines to your home by replacing the substitution line with the real-line font-family you took from Google Fonts. (font-family means just the fonts you want to use for your text). This rule first establishes a global base font and full-page font size (since <html> is the parent element of the entire page, and all of the inside elements of it inherit the same font-size and font-family):
Code: Select all
html {
  font-size: 10px; /* px înseamnă 'pixeli': dimensiunea fontul de bază este acum de 10 pixeli înălțime */
  font-family: placeholder: acesta ar trebui să fie rezultatul luat de la Google fonts
}

You will now set the font size for elements that contain text inside the HTML body (<h1>, <li>, and <p>). We will also centralize the title text and set the line height and space between the letters for body content to make it easier to read:
Code: Select all
h1 {
  font-size: 60px;
  text-align: center;
}

p, li {
  font-size: 16px;   
  line-height: 2;
  letter-spacing: 1px;
}

You can change these px values according to how you want your design to look, but your design should generally look like this:

Image


Boxes, boxes, everywhere boxes

One thing you will notice when writing CSS is that much of it is about boxes - setting the size, color, position, etc. Most HTML elements on your page can be thought of as boxes placed one over the other.

It is not surprising that CSS looks mainly on the box model. Each of the blocks that occupy space on your page have properties like:

1. padding, the space around the content (for example, around the text of the paragraph)
2. border, the solid line that is just outside the padding
3. margin, space outside the element

Image

In this section we also use:

1. width (of an element)
2. background-color, color behind an element's content, and padding
3. color, color of an item's content (usually text)
4. text-shadow: sets a shadow of the text inside an element
5. display: sets the display mode of an item (do not worry about it yet)

Let's start adding more CSS properties to our page! Continue adding these new rules at the bottom of the page, and do not be afraid to experience the change of values to see how it appears.

Changing the page color
Code: Select all
html {
  background-color: #00539F;
}

This rule sets a background color for the entire page. Change the color code above in any color you choose when planning your site.

Body sorting
Code: Select all
body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Now for the <body> element. There are plenty of statements here, so let's go through:

1. width: 600px; - it forces the body to always have a width of 600px.
2. margin: 0 auto; - When you set two values ​​to a saupadding margin property, the first value affects the top and bottom of the element (making it 0 in this case), and the second value the left and right (here, auto is a special value which divides the horizontal space available equally between the left and right). You can use one, three or four values, as documented here.
3. background-color: # FF9500; - as before, it sets the background color of the element. I used some reddish orange for body as opposed to dark blue for the <html> element, but you can experiment with it.
4. padding: 0 20px 20px 20px; - We have four set values ​​for padding to make more space around our content. This time we will not set padding on top of the body, but we will set 20 pixels left, down and right. The set values ​​are up, right, down and left in this order.
5. border: 5px solid black; - This sets a solid 5-pixel solid border for all sides of the body element.

Positioning and stylizing the title of our page
Code: Select all
h1 {
  margin: 0;
  padding: 20px 0;   
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

You have probably noticed that there is a space at the top of the element. This is because browsers apply a certain default style to the <h1> element (among others), even if you have not applied CSS at all! This might seem like an unsuccessful idea, but we even want an unused web page to have a basic legibility. To get rid of space, we override the default style by setting the margin: 0 ;.

Next, I set padding up and down for the title to 20 pixels, and I made the title of the text to have the same color as the background color of the html element.

A quite interesting property I've used here is text-shadow, which applies a shadow of text to the content of the element's text. The four values ​​are as follows:

1. The first pixel value sets the horizontal offset of the shadow in the text - how far it moves: a negative value must move it to the left.
2. The second pixel value sets the vertical offset of the shadow in the text - how far it moves away, in this example; a negative value should move it upwards.
3. The third pixel value sets the radius shadow of the shadow - a higher value will mean a shadier shadow.
4. The fourth value sets the base color of the shadow.

Again, try to experience different values ​​to see what you can do!

Focusing the image
Code: Select all
img {
  display: block;
  margin: 0 auto;
}

Finally, we will center the image to make it look better. We could again use the margin trick: 0 as we did earlier for the body, but we have to do something else. The <body> element is a block level, which means that it occupies space on the page and can have margin and other applied spacing values. Images, on the other hand, are inline elements, which means they can not. And so to apply the edges of the image, we need to give it a block-level behavior using the display: block ;.

Conclusion
If you followed all the instructions in this article, you should have a page that looks like this

Image

_________________
a simple act of caring creates an endless ripple


VIP

User avatar

Registrovan: Jun 11, 2011
Broj postova: 6475
Pohvalio: 689 x
Pohvaljen: 2054 x
Online: 70d 21h 55m 53s
Medalje: 3
Post Re: How to use CSS   12 Sep 2018, 22:01
Do you actually know anything about CSS or you are just copy-pasting everything?

_________________
Image


Global Moderator

User avatar

Registrovan: Jan 25, 2011
Broj postova: 7212
Lokacija: I dalje selo
Država:
Pohvalio: 386 x
Pohvaljen: 830 x
Online: 16d 8h 48m 27s
Medalje: 1
Post Re: How to use CSS   13 Sep 2018, 10:38
Cim koristi mozilu, mora da je kopirao xD

_________________
< ̄`ヽ、       / ̄>
 ゝ、  \ /⌒ヽ,ノ  /´
   ゝ、 `( ( ͡° ͜ʖ ͡°) /
     >     ,ノ
     ∠_,,,/´”


Registrovani Član

User avatar

Registrovan: Sep 16, 2015
Broj postova: 10745
Lokacija: Timişoara
Država:
Pohvalio: 1239 x
Pohvaljen: 909 x
Online: 62d 22h 55m 39s
Medalje: 2
Post Re: How to use CSS   14 Sep 2018, 20:32
CELL wrote:Do you actually know anything about CSS or you are just copy-pasting everything?

if i didn't know i wouldn't made it,

_________________
a simple act of caring creates an endless ripple


Global Moderator

User avatar

Registrovan: Jun 1, 2017
Broj postova: 3855
Lokacija: Živinice
Država:
Pohvalio: 590 x
Pohvaljen: 602 x
Online: 76d 19h 26m 20s
Post Re: How to use CSS   14 Sep 2018, 20:33
ODLIČAN TUTORIJAL

_________________
dlix'


Registrovani Član

User avatar

Registrovan: Sep 16, 2015
Broj postova: 10745
Lokacija: Timişoara
Država:
Pohvalio: 1239 x
Pohvaljen: 909 x
Online: 62d 22h 55m 39s
Medalje: 2
Post Re: How to use CSS   14 Sep 2018, 20:35
7kyu wrote:Cim koristi mozilu, mora da je kopirao xD

ofc i did copy-pasting but because im using css,html everyday lul, also those are translated too.

_________________
a simple act of caring creates an endless ripple


Global Moderator

User avatar

Registrovan: Jan 25, 2011
Broj postova: 7212
Lokacija: I dalje selo
Država:
Pohvalio: 386 x
Pohvaljen: 830 x
Online: 16d 8h 48m 27s
Medalje: 1
Post Re: How to use CSS   19 Sep 2018, 13:32
Brother it's ok. There is nothing new in this so I'm just pulling your leg a little bit ;) You can't think of anything new because this is all there is to CSS xD

_________________
< ̄`ヽ、       / ̄>
 ゝ、  \ /⌒ヽ,ノ  /´
   ゝ、 `( ( ͡° ͜ʖ ͡°) /
     >     ,ノ
     ∠_,,,/´”


Reply to topic
Display posts from previous:  Sort by  
Jump to:  

Users browsing this forum: No registered users and 1 guest



Quick Reply