CSS

Question 1

What is css

Answer 1

CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Question 2

CSS Syntax

Answer 2

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Question 3

Explain 
p {
  color: red;
  text-align: center;
}
sintax

Answer 3

p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value</p>

Question 4

A CSS selector selects the HTML element(s) you want to style.
Name the types

Answer 4

The CSS element Selector
p {
  text-align: center;
  color: red;
}
----------------

The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.

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

-----------------
The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.
--------------------
The CSS Grouping Selector
h1 {
  text-align: center;
  color: red;
}

Question 5

Special selector cases

p.center {
text-align: center;
color: red;
}

Answer 5

You can also specify that only specific HTML elements should be affected by a class.

Question 6

Special selector cases

<p class="center large">This paragraph refers to two classes.</p>

Answer 6

In this example the <p> element will be styled according to class=”center” and to class=”large”:</p>

Question 7

The CSS Universal Selector

Answer 7

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

Question 8

CSS Comments

Answer 8

/* This is a single-line comment */

Question 9

Add a background color to an grouping selector

Answer 9

<h1>Hello World</h1>

Question 10

Borders styles (10)

p.dotted {border-style: dotted;}

Answer 10

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Question 11

border-width property

Answer 11

The border-width property specifies the width of the four borders.

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */

Question 12

border property is a shorthand property

Answer 12

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

p {
border: 5px solid red;
}

Question 13

CSS Margins

Answer 13

Margins are used to create space around elements, outside of any defined borders.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Question 14

CSS Padding

Answer 14

Padding is used to create space around an element’s content, inside of any defined borders.

padding-top
padding-right
padding-bottom
padding-left

Question 15

The height and width properties may have the following values

Answer 15

auto - This is default. The browser calculates the height and width
length - Defines the height/width in px, cm etc.
% - Defines the height/width in percent of the containing block
initial - Sets the height/width to its default value
inherit - The height/width will be inherited from its parent value

Question 16

The CSS Box Model

Answer 16

In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Question 17

CSS Outline

Answer 17

An outline is a line drawn outside the element’s border.

Question 18

Generic Font Families types

Answer 18

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.

Question 19

Font Families why?

Answer 19

The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems.

.p1 {
font-family: “Times New Roman”, Times, serif;
}

Question 20

Styling Links

Answer 20

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

a: link - a normal, unvisited link
a: visited - a link the user has visited
a: hover - a link when the user mouses over it
a: active - a link the moment it is clicked

Question 21

Responsive Table

Question 22

The display Property

Answer 22

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Question 23

Blocklevel display

Answer 23

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container.

Using max-width instead, in this situation, will improve the browser’s handling of small windows. This is important when making a site usable on small devices

Question 24

Inline display

Answer 24

An inline element does not start on a new line and only takes up as much width as necessary.

Question 25

Override The Default Display Value

Question 26

The position Property

Answer 26

There are five different position values: ``` static relative fixed absolute sticky Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. ```

Question 27

Navigation Bars

Question 28

CSS Website Layout

Answer 28

Header Navigation Bar Content Footer Responsive Website Layout By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

Question 29

3 ways to insert css in html

Answer 29

external stylesheet with link... (can be reuse) css file save as .css use more than one css file ------------ @import url not use often, takes more loading, import page load is high ``` ---------------- inline method direct to html element hard to manage p style= "style que quieras" ``` ``` directo a cada elemenento. ------------- internal css add the styles in the head of html. hard to reuse. ```

Question 30

CSS how to start

Answer 30

create a folder, no usar espacios css-projectDolphin dentro: css-images index.html (usa el web server) ---cargo el projecto a VisualStudio

Question 31

CSS Image dimentions

Answer 31

- avoid unnecesary loads, too big pictures, because it mades page load slower. - risized the width, the heigh gets rezied too.

Question 32

Relative path

Answer 32

src: foldername/fileName when the image is in the project folder.

Question 33

Create a css file in the project. create style.css link to html file

Answer 33

link rel="stylesheet" href= "css/styles.css" css/styles.css relative path /css/styles.css absolute path

Question 34

Absolute path

Answer 34

link page outside of your website. the whole link -avoid hotlinked with image (the full website, you are using the page bandwidth)