The syntax for CSX is different than HCM El Marco and consists of three parts a selector a property
and a value the selector is the HD PML element that you want to apply this style to.
Let's take a look at an example open the file in your Downloads folder corresponding to this lecture
with the file open.
Let's preview it in our web browser to see what the original looks like.
We can see that there are three headings and three paragraphs.
Now let's create a style sheet contained within our head take
let's create a style rule that changes the background color of our web page to pink
for this.
We will need to create the following style rule inside of our style sheet.
So in between our stop are open and close style tag
in this case the body is the selector and the property is the background once you've inserted the style
rule save your document and preview it in your web browser
you will notice the pages background is now pink
each selector can have multiple properties.
For example if you wanted to change both the colour of the background and the default font for the web
page to Ariel the CSI style rule would now look like this.
Let's see var page
and we'll refresh the contents in our web browser and we can now see that all the font on the page is
change to area
if you only wanted to apply another rule to certain selectors.
You can do that as follows.
Let's say we wanted to change all the headers all the h1 tags in our document to a different font color
and a different font family
in this case any block of text within each one tags will have the color red and the font family.
Georgia
so let's go ahead and add the h1 tag around our first heading heading one.
So with the I'll start with the open h1 tag
and the close h1 tag.
Now let's go ahead and save and take a look in our browser.
We can see that the heading is now much larger and a different color the font face is also different
so just as we intended
selectors can also be combined.
So say for example not only did we want to change the H1 headers to this font in color we also wanted
to do the same for H2 H3 and H for
so let's go ahead and apply the H2 tags to our second heading
in the H3 tag to our third heading.
Now we'll save our file
and there it is now we can see that that style rule was applied to having 1 2 and 3.